Como criar uma simples aplicação usando React

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-react

Seu 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 "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!