View source for 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]]

[[Category:Cloud]]
[[Category:WebDev]]
[[Category:Tecnologias]]
[[Category:Nodejs]]
[[Category:node]]
[[Category:javascript]]
[[Category:bootstrap]]
[[Category:es6]]
[[Category:react]]
[[Category:css]]
[[Category:sass]]
[[Category:scss]]