No post passado, mostrei uma maneira de configurar uma aplicação React do zero. Agora iremos montar uma estrutura de arquivos básica para a nossa aplicação React. Lembrando que assim como todo projeto, temos diferentes maneiras de separar os arquivos, e esta é a que normalmente eu uso. Se tiver uma forma diferente, coloca ali nos comentários. :)

    Preview da estrutura de arquivos

    ├──public
    │ └─── index.html Página HTML que conterá nossa aplicação
    └──src
    └─── components Pasta onde serão colocados os componentes da aplicação
    └─── scss Pasta onde serão colocados os arquivos referentes ao CSS da aplicação
    └─── index.jsx Arquivo raiz do projeto

    Criando a homepage

    Criar um arquivo HTML com a seguinte estrutura dentro da pasta public.

       <html>
          <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <meta http-equiv="X-UA-Compatible" content="ie=edge">
             <meta name="theme-color" content="#2DE05A">
             
             <title>Bills Hub</title>
          </head>
          <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
    
             <div id="root"></div>
    
             <script type="text/javascript" src="/dist/bundle.js"></script>
          </body>
       </html>
    

    Criando a raiz da aplicação

    A próxima parte, é criar o arquivo Javascript que será o “main” da nossa aplicação. Irei colocar a extensão .jsx para diferenciar o mesmo de um JavaScript comum, visto que estamos utilizando essa sintaxe para o desenvolvimento da nossa aplicação.

       import React from "react";
       import ReactDOM from "react-dom";
    
       class App extends React.Component {
          render() {
             return (<h1>Hello World!</h1>);
          }
       }
    
       ReactDOM.render(<App />, document.getElementById("root"));
    

    Não se preocupe com a sintaxe ainda, irei explicar tudo mais adiante. Por enquanto, vamos apenas aprender como executar a aplicação.

    Rodando a aplicação

    Para rodar a aplicação, iremos criar um novo script no nosso arquivo package.json. Para isso, adicione a seguinte linha na parte de scripts:

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

    Se ficar com alguma dúvida sobre aonde colocar o código, consulte o código-fonte da aplicação no GitHub.

    Após modificar o arquivo, volte para o terminal e execute o comando:

       npm run dev
    

    Um servidor de arquivos será inicializado na sua máquina, e com isso, podemos acessar a url http://localhost:8080 e ver nossa aplicação exibindo um “Hello World”.

    Hello World em React

    No próximo post, iremos ver os conceitos básicos do React para o desenvolvimento de aplicações. Vejo você lá.