.Net Core - ReactJS

Para criar uma aplicação React, vamos acessar o site https://create-react-app.dev/

Vamos instalar o React utilizando o npx, que é um arquivo binário que lê os arquivos que são colocados no arquivo package.json, para saber os arquivos que existem na pasta node_module e assim executar algumas bibliotecas.

O npx é um auxiliar do npm que vem junto na instalação do npm para auxiliar na criação de aplicaticos e execuções de scripts dentro do node.js.

Vamos utilizar o npx para mostrar como criar aplicação.

      
        npx create-react-app my-app 
        cd my-app 
        npm start
       
    

Estrutura da aplicação react

Após a instalação, a estrutura de arquivos abaixo será criada:

• node_modules
• public
• favicon.ico
• index.html
• src
• App.css
• App.js
• index.js
• .gitiginore
• package.json
• README.md
• yarn.lock

O arquivo yarn.lock

O arquivo yarn.lock possui as versões dos pacotes que estamos utilizando no momento da instalação da aplicação.

O arquivo package.json

No arquivo package.json temos todas as dependências e alguns scripts:

      
        "dependencies": {
          "@testing-library/jest-dom": "^5.14.1",
          "@testing-library/react": "^13.0.0",
          "@testing-library/user-event": "^13.2.1",
          "react": "^18.2.0",
          "react-dom": "^18.2.0",
          "react-scripts": "5.0.1",
          "web-vitals": "^2.1.0"
       
    

      
        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test",
          "eject": "react-scripts eject"
        },
       
    

O arquivo .gitignore

Temos o arquivo .gitignore, que vai fazer com que, ao enviarmos os arquivos para o git, os arquivos abaixos sejam ignorados:

      
        # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
        # dependencies
        /node_modules
        /.pnp
        .pnp.js

        # testing
        /coverage

        # production
        /build

        # misc
        .DS_Store
        .env.local
        .env.development.local
        .env.test.local
        .env.production.local

        npm-debug.log*
        yarn-debug.log*
        yarn-error.log*
       
    

Pasta public

O arquivo favicon

O arquivo favicon.ico, insere um ícone na aplicação,através da tag head o arquivo index.html

      
        < !DOCTYPE html>
        < html lang="en">
          < head>
            < link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
          < /head>
          < body> 
          < /body>
        < /html>
       
    

O arquivo index.html

Arquivo index.html possui algumas tags como a tag meta que declara o viewport adaptando a aplicação para que seja responsiva

      
        < !DOCTYPE html>
        < html lang="en">
          < head>
            < meta charset="utf-8" />
            < meta name="viewport" content="width=device-width, initial-scale=1" />
            < title>React Torne-se um programador< /title>
          < /head>
          < body> 
          < /body>
        < /html>
       
    

A div root

A div com o id=root é onde tudo vai acontecer.

Todo HTML será inserido nesta tag. Lembrando que o Javascript Vanilla terá um document.getElementById deste root, que usará um innerHtml enviando todo HTML que foi feito build da nossa aplicação js em cima deste root.

      
        < div id="root">< /div>
       
    

Pasta src

O arquivo App.css

O arquivo App.css é onde podemos inserir o estilo da página, podemos também importar arquivos css.

      
        .App {
          text-align: center;
        }
        
        .App-logo {
          height: 40vmin;
          pointer-events: none;
        }
        
        @media (prefers-reduced-motion: no-preference) {
          .App-logo {
            animation: App-logo-spin infinite 20s linear;
          }
        }
        
        .App-header {
          background-color: #282c34;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: calc(10px + 2vmin);
          color: white;
        }
        
        .App-link {
          color: #61dafb;
        }
        
        @keyframes App-logo-spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        
       
    

Arquivo App.js

O arquivo App.js é basicamente um componente que vamos introduzí-lo no arquivo index.js.

      
        import React from 'react';
        import logo from './logo.svg';
        import './App.css';

        function App() {
          return (
            < div className="App">
              < header className="App-header">
                < img src={logo} className="App-logo" alt="logo" />
                < p>
                  Edit < code>src/App.js< /code> com o torne-se um programador.
                < /p>
                < a
                  className="App-link"
                  href="https://reactjs.org"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Learn React
                < /a>
              < /header>
            < /div>
            );
          }
        export default App;
       
    

Arquivo index.js

O arquivo index.js é o principal da aplicação, que vai fazer o import dos arquivos.Lembrando que ele está fazendo o import graças a função do webpack ou do babel, ou seja, terá a função de importar, dar opção de termos esses dados e depois fazer a tradução de acordo com a versão do EcmaScript que iremos utilizar. Normalmente compila na versão EcmaScript 5, que praticamente todo o tipo de browser irá funcionar.

A aplicação react será renderizada dentro do root.

      
        import React from 'react';
        import ReactDOM from 'react-dom/client';
        import './index.css';
        import App from './App';
        import serviceWorker from './serviceWorker';
        
        ReactDOM.render(
          < React.StrictMode>
            < App />
          < /React.StrictMode>,
          document.getElementById('root')
        );
        
        // If you want to start measuring performance in your app, pass a function
        // to log results (for example: reportWebVitals(console.log))
        // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
        serviceWorker.unregister();
       
    

Vamos executar a aplicação utilizando o comando:

      
        yarn start
       
    

O próximo passo será utilizar componentes, então vamos modularizar algumas partes do nosso HTML, ou seja, vamos trazer a estrutura do header,body e footer em componentes separados.

O componente Header.js

No arquivo App.js, vamos retirar a tag header, o import do logo e o import do css, para iniciar a componentização do header. Por enquanto o arquivo ficará somente com a tag div, para não dar erro de renderização.

      
        import React from 'react';

        function App() {
          return (
            < div className="App">
             
            < /div>
            );
          }
        export default App;
       
    

Para começar a criar nosso componente header, vamos acessar o site do bootstrap para copiar a tag nav da página inicial do bootstrap:

• Iremos clicar com o botão direito do mouse em cima da tag nav
• No Html, clicar na tag header;
• Clicar com o botão direito do mouse no menu copy ->copyouterHtml.

Vamos colar e ajustar o código fonte da tag nav no nosso app. Ficará com o código abaixo:

      
        import React from 'react';

        function App() {
          return (
            < div className="App">
              < header className="navbar navbar-expand-lg bd-navbar sticky-top">
                < nav className="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
                  < div className="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
                    < div className="offcanvas-body p-4 pt-0 p-lg-0">
                      < hr className="d-lg-none text-white-50">< /hr>
                      < ul className="navbar-nav flex-row flex-wrap bd-navbar-nav">
                        < li className="nav-item col-6 col-lg-auto">
                          < a className="nav-link py-2 px-0 px-lg-2" href="/home" >Home< /a>
                        < /li>
                        < li className="nav-item col-6 col-lg-auto">
                          < a className="nav-link py-2 px-0 px-lg-2" href="/clientes" >Clientes< /a>
                        < /li>
                      < /ul>
                    < /div>
                  < /div>
                < /nav>
              < /header>
            < /div>
          );
        }
        export default App;
       
    

Vamos inserir, abaixo do return, o link absoluto para importar o css da tag nav que acabamos de copiar:

• Iremos clicar com o botão direito do mouse no site do bootstrap;
• Copiar o link relativo do css, mas vamos mudar o endereço para o link absoluto, que aponta diretamente para o bootstrap, pois não temos a pasta doc do link relativo na nossa aplicação.

Link relativo do css:

      
        < link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">< /link>
       
    

Substituir pelo endereço absoluto do css:

      
        < link href="/https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">< /link>
       
    

Ficará assim:

      
        import React from 'react';

        function App() {
          return (
            < link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">< /link>
            );
          }
        export default App;
       
    

Agora vamos construir o componente Header, criando um novo arquivo chamado Header.js, dentro da pasta src:

Vamos alterar a função para uma classe chamada Header e o export default Header.

Iremos também fazer o import do Component:

      
        import React, { Component } from 'react';

        class Header extends Component {
          render() {
          return < header className="navbar navbar-expand-lg bd-navbar sticky-top">
                  < link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">< /link>
                  < nav className="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
                    < div className="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
                    < div className="offcanvas-body p-4 pt-0 p-lg-0">
                      < hr className="d-lg-none text-white-50">< /hr>
                      < ul className="navbar-nav flex-row flex-wrap bd-navbar-nav">
                        < li className="nav-item col-6 col-lg-auto">
                          < a className="nav-link py-2 px-0 px-lg-2" href="/home" >Home< /a>
                        < /li>
                        < li className="nav-item col-6 col-lg-auto">
                          < a className="nav-link py-2 px-0 px-lg-2" href="/clientes" >Clientes< /a>
                        < /li>
                      < /ul>
                    < /div>
                    < /div>
                  < /nav>
                < /header>
          }
        }
        export default Header;
       
    

No arquivo App.js, iremos apagar a tag header, e agora inserir o componente Header que foi criado.

Faremos também o import do componente Header e o menu nav funcionará corretamente.

      
        import React from 'react';
        import Header from './Header';

        function App() {
          return (
            < Header> < /Header>
            );
          }
        export default App;
       
    

O componente Body.js

Para criar nosso componente Body, vamos acessar o site do bootstrap para copiar a tag main da página inicial do bootstrap:

• Iremos clicar com o botão direito do mouse no site do bootstrap e clicar em inspecionar elemento:
• No Html, clicar na tag main;
• Clicar com o botão direito do mouse no menu copy ->copyouterHtml.

Vamos colar e ajustar o código fonte da tag main no nosso app. Podemos deixar somente poucos trechos e apagar grande parte do que foi copiado, para simplificar o processo.

Fazendo os ajustes, o arquivo Body.js ficará parecido com o código abaixo:

      
        import React, { Component } from 'react';

        class Body extends Component {
          render() {
          return < main className="col-lg-7 mb-5">
                  < h2 className="display-5 mb-3 fw-semibold lh-sm">App com ReactJS< /h2>
                  < p className="lead fw-normal">
                    Uma aplicação criada em ReactJS com torne-se um programador.
                  < /p>
                < /main>
          };
        }
        export default Body;
       
    

No arquivo App.js, faremos também o import do componente Body.

      
        import React from 'react';
        import Header from './Header';
        import Body from './Body';

        function App() {
          return (
            < div>
              < Header> < /Header>
              < Body> < /Body>
            < /div>
            );
          }
        export default App;
       
    

O componente Footer.js

Para criar nosso componente Footer, vamos acessar o site do bootstrap para copiar a tag footer da página inicial do bootstrap:

• Iremos clicar com o botão direito do mouse no site do bootstrap e clicar em inspecionar elemento:
• No Html, clicar na tag footer;
• Clicar com o botão direito do mouse no menu copy ->copyouterHtml.

O arquivo Footer.js ficará parecido com o código abaixo:

      
        import React, { Component } from 'react';
        class Footer extends Component {
          render() {
          return < footer className="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
                  < div className="col-6 col-lg-2 offset-lg-1 mb-3">
                    < h5>Links< /h5>
                    < ul className="list-unstyled">
                      < li className="mb-2">< a href="/">Home< /a>< /li>
                      < li className="mb-2">< a href="/docs/5.3/">Clientes< /a>< /li>
                      < li className="mb-2">< a href="/docs/5.3/examples/">Examples< /a>< /li>
                    < /ul>
                  < /div>
                < /footer>
          };
        }
        export default Footer;
       
    

No arquivo App.js, faremos também o import do componente Footer.

      
        import React from 'react';
        import Header from './Header';
        import Body from './Body';
        import Footer from './Footer';

        function App() {
          return (
            < div>
              < Header> < /Header>
              < Body> < /Body>
              < Footer> < /Footer>
            < /div>
            );
          }
        export default App;