Caso não o tenha instalado, instale agora o Node.js.
Crie um novo diretório chamado simple-react-app e vá para ele para executar o comando npm init -f e iniciar um novo projeto.
Instale suas dependências com npm install -S react react-dom.
Instale também alguns pacotes que você precisará para trabalhar com React: Babel, Webpack e Webpack Dev Server.
npm install -g babel webpack webpack-dev-server
npm install -D babel-loader babel-core babel-preset-es2015 babel-preset-reactSeu projeto ainda precisará de mais alguns arquivos touch index.html App.js main.js webpack.config.js.
Abra no seu editor de texto o arquivo ./webpack.config.js que você acabou de criar no diretório raiz do projeto e escreva o seguinte:
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 1337
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}Abra também o arquivo ./index.js e complete assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simples</title>
</head>
<body>
<div id="app"></div>
<script src="index.js" charset="utf-8"></script>
</body>
</html>Preencha ainda os arquivos ./App.js e ./main.js respectivamente com:
import React from 'react';
class App extends React.Component {
render(){
return <div>Essa foi fácil</div>
}
}
export default App;import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));Finalmente edite seu ./package.json para que tenha um start script.
{
"name": "es6-react-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server ### Esta linha foi adicionada."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
}
}Volte para a linha de comando e execute npm start. Parabéns! sua aplicação deverá estar funcionando em http://localhost:1337/.
Experimente editar o arquivo ./App.js para que se visualize o texto "Estou gostando!" em vez de "Essa foi fácil!". A aplicação deverá ser automaticamente atualizada no momento em que você salvar suas modificações.
Legal, não é? deixe qualquer dúvida ou sugestão abaixo nos comentários ou envie sua mensagem direto para o meu e-mail. Obrigado!