NodeJs: Criando um projeto em Node com React, ES6 e Bootstrap 4

= Projeto em Node com React, ES6 e Bootstrap 4 =

Criando o arquivo package.json
1) iniciar nosso projeto com o nome de tarefas

mkdir tarefas cd tarefas

2) criar o arquivo package.json.

npm init -y

Instalando o React
1) Instalando pacotes e salvando os pacotes para package.jsom

npm install --save react react-dom react-addons-css-transition-group

Pacotes apenas de desenvolvimento
1) Usando pacotes somente para desenvolvimento

npm install --save-dev webpack webpack-dev-server

No arquivo package.json, será criado uma seção devDependencies, veja abaixo.

2) Habilta o ES6

npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react babel-core

3) Instalando o Bootstrap 4

npm install --save-dev bootstrap@4.0.0-alpha.3

4) Instalando o css-loader, sass-loader, ...

npm install --save-dev css-loader sass-loader node-sass extract-text-webpack-plugin

Executando a aplicação
1) Edite o arquivo package.json e adicione

"scripts": { "start": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1" },

Salve e feche o arquivo

2) Executando

npm start

=Conferindo nosso arquivo package.json=

{  "name": "tarefas", "version": "1.0.0", "description": "", "main": "index.js", "babel": { "presets": [ "es2015", "react" ]  },   "scripts": { "start": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1" },  "keywords": [], "author": "", "license": "ISC", "dependencies": { "react": "^15.5.3", "react-addons-css-transition-group": "^15.5.2", "react-dom": "^15.5.3" },  "devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "bootstrap": "^4.0.0-alpha.3", "css-loader": "^0.28.0", "extract-text-webpack-plugin": "^2.1.0", "node-sass": "^4.5.2", "sass-loader": "^6.0.3", "webpack": "^2.3.3", "webpack-dev-server": "^2.4.2" } }

= Ver também =


 * NodeJs: Instalando o NodeJs no Linux