nicolas-oliveira/omn11_frontend.md

## omn11_frontend.md

      
    Raw
  

              omn11_frontend.md
            
          
    Frontend da Aplicação


  Limpando a estrutura
  Conceitos React

  Componente
  JSX
  Propriedades
  Estado
  Imutablidade


  Página de login
  Configurando as Rotas
  Cadastros de ONGs
  Listagem de casos
  Cadastro de um novo caso
  Conectando a aplicação à API

1) Limpando a estrutura

Siga os passos abaixo para limpar a estrutura criada pelo npx create-react-app frontend
  └─fontend
      ├── node_modules
      ├── package.json
      ├── public
      │   ├── favicon.ico
      │   ├── index.html
-     │   ├── logo192.png
-     │   ├── logo512.png
-     │   ├── manifest.json
-     │   └── robots.txt
      ├── README.md
      ├── src
      │   ├── App.css
      │   ├── App.js
-     │   ├── App.test.js
-     │   ├── index.css
-     │   ├── index.js
-     │   ├── logo.svg
-     │   ├── serviceWorker.js
-     │   └── setupTests.js
      └── yarn.lock
A estrutura deve ficar mais ou menos dessa forma:
└─fontend
    ├── node_modules
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── README.md
    ├── src
    │   ├── App.css
    │   └── App.js
    └── yarn.lock

Dentro dos arquivos que sobraram delete a parte que irei comentar aqui:
/src/App.js delete a parte comentada:

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> and save to reload.
    //     </p>
    //     <a
    //       className="App-link"
    //       href="https://reactjs.org"
    //       target="_blank"
    //       rel="noopener noreferrer"
    //     >
    //       Learn React
    //     </a>
    //   </header>
    // </div>
  );
}

export default App;
Deverá ficar desta forma:
import React from 'react';
import './App.css';

function App() {
  return (
  );
}

export default App;
Vamos criar um <h1>Hello World</h1> dentro da function App():
import React from 'react';
import './App.css';

function App() {
  return (
        <h1>Hello World</h1>
  );
}

export default App;
/src/index.js Delete a parte comentada:

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import App from './App';
// import * as serviceWorker from './serviceWorker';

ReactDOM.render(
 // <React.StrictMode>
    <App />
 // </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();
O React.StrictMode é uma parte fundamental usada em desenvolvimento, porém para este projeto iremos deixar sem.
Entre em /public/index.html retire as partes não fundamentais que irei comentar abaixo:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
-    <!-- <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.-
    
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will-
-      work correctly both with client-side routing and a non-root public URL.
-        Learn how to configure a non-root public URL by running `npm run build`.
-        --> -->
        <title>React App</title>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
-        <!--
-         This HTML file is a template.
-         If you open it directly in the browser, you will see an empty page.-
    
-         You can add webfonts, meta tags, or analytics to this file.
-         The build step will place the bundled scripts into the <body> tag.-
    
-         To begin the development, run `npm start` or `yarn start`.
-         To create a production bundle, use `npm run build` or `yarn build`.
-         -->
      </body>
    </html>
Obtendo este resultado:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <title>React App</title>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
      </body>
    </html>
Após isso poderá editar o nome da aplicação em <title>
Pronto! Agora que a aplicação está bem mais limpa e fácil de entender poderemos avançar com o conteúdo aplicando conceitos teóricos de como todo o conjunto funciona!
Para rodar a aplicação basta digitar em seu terminal:
$ npm start

Vamos em frente com o conteúdo!
2) Conceitos React

a) Componente

b) JSX

c) Propriedades

d) Estado

e) Imutablidade

Página de login

3) Configurando as Rotas

4) Cadastros de ONGs

5) Listagem de casos

6) Cadastro de um novo caso

7) Conectando a aplicação à API

8) Enviar Projeto ao Github