Gran Finale

Vamos fazer nosso projetinho básico para testar nossa configuração. Vamos instalar as dependências que precisamos para rodar qualquer coisa com o React. Para isso execute o comando:

$ yarn add react react-dom

Na pasta app podemos adicionar outra pasta com o nome components e criar o arquivo App.jsx

Linux/MAC:

 $ cd app
 $ mkdir components
 $ cd components
 $ touch App.jsx
 $ cd ../...

Windows:

 > cd app
 > mkdir components
 > cd components
 > type NUL > App.jsx
 > cd ../..

Nosso estrutura de arquivos ficará assim:

.
|-- app
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

A convenção usada para a criação de componentes é PascalCase, ou seja, o nome do arquivo começa com letra maiúscula.A extensão pdoeria ser tanto .jsx como .js. Acho interessante usar .jsx já que nossos arquivos serão escritos com JSX.

Vamos atualizar nosso arquivo App.jsx:

/*
    ./app/components/App.jsx
*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
        <div style={{textAlign: 'center'}}>
            <h1>Eu sou um mestre Jedi!!</h1>
        </div>
     );
  }
}

Finalmente, vamos renderizar nosso componente no nosso arquivo de inicialização index.js. Substitua o console.log por:

/*
    ./app/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Abra o terminal e inicie o projeto. Lembrando que deve executar o seguinte comando na raiz do projeto:

$ yarn start

Abra o browser e digite http://localhost:8080/. Irá perceber que a mensagem Eu sou um mestre Jedi!! irá aparecer na tela.

Conclusão

Agora temos um ambiente de desenvolvimento React configurado. Espero que essa seção tenha esclarecido o que as configurações realmente fazem e o porque que temos de usá-las. Essa configuração é um pouco cansativa de fazer projeto após projeto, por isso que vou compartilhar um repositório que pode servir como código base e contém as configurações que vimos. Sinta-se a vontade experimentar as diferentes configurações que podem ser feitas com webpack.