cristianosantan/reactjs_intro

Link do Notion: https://mousy-pickle-a4e.notion.site/React-JS-c9400ee818d8475497f85ac1e91a5165

Criar e explorar o primeiro projeto em React Js.

Neste turorial você ira renderizar o front end de uma pagina web simples com rotas. No final deste tutorial vc tera um aplicativo base para ser usado em outros projetos em react. Você aprenderá como:

• Criar um aplicativo web react js.
• Renderizar paginas html.
• Usar components do react.
• Instalar pacotes com npm.
• Usar rotas para a troca de paginas.
• Usar states do react.

Pré Requisitos

Se necessário, para instalação basta clicar nos links abaixo e abrir o video para seguir o turorial.

• VS Code

  https://www.youtube.com/watch?v=_R6YslWRUFk

• Node js e npm. [ instalação ]

  https://www.youtube.com/watch?v=_sEwOXCKw4c

Criar um aplicativo React js.

Na pasta (diretorio) em que se guardará o aplicativo com um click direito do mouse, abra o terminal.

Crie um novo projeto react com o nome webapp.

npx create-react-app webapp

Entre na pasta pelo terminal.

cd webapp

Abra o vscode.

code .

Após esse procedimento pode fechar o terminal e o explorador de arquivos.

Com o vscode aberto podemos conferir a criação padrão da estrutura do aplicativo. E tmbm vamos abrir o termial do vscode.

E digitar o seguinte comando no terminal para dar start na aplicação.

npm start

Se tudo ocorrer bem até aqui, irá abrir a seguinte pagina no seu navegador.

Limpando o projeto

Agora vamos limpar as nossas pastas para receber um novo projeto.

Na pasta public vamos deixar apenas o arquivo index.html e excluir todos os outros.

Antes

Na pasta src deixamos apenas os arquivos App.js e index.js.

Antes

Vamos substituir o codigo do arquivo App.js da pasta src para o codigo abaixo.

function App() {
  return (
    <div>
      <h2>App</h2>
    </div>
  );
}

export default App;

E o arquivo index.js da pasta src para o codigo abaixo.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Se vc chegou a está pagina então esta tudo ok.

Instalar o pacote de rotas

No terminal do vscode clicamos em “Ctrl + C” depois digitamos a letra “s” e enter para pararmos o servidor, e digitamos o seguinte comando para instalar o pacote react-router-dom de acordo com a documentação.

npm install react-router-dom@6

Criando paginas (ou views)

Agora com o pacote de rotas instalado vamos criar algumas paginas para exemplificar.

Na pasta src clicamos com o direito do mouse e depois em Nova Pasta.

Agora dentro da pasta views vamos criar nossas paginas home, produtos, lojas e contato.

Na pasta views clicamos com o direito do mouse e depois em Novo Arquivo.

Para criarmos Novos Arquivos dentro da pasta views.

chamado Home.jsx.

import React from "react";

export default function Home() {
    return (
        <>
            <h2>Home</h2>
        </>
    );
}

chamado Lojas.jsx.

import React from "react";

export default function Lojas() {
    return (
        <>
            <h2>Lojas</h2>
        </>
    );
}

A organização da pasta views ficara da seguinte forma:

Criando Components

Também vamos criar dois Novos arquivos na pasta components, um Menu.jsx e o Footer.jsx.

Menu.jsx

import React from "react";
import { Link } from "react-router-dom";

export default function Menu() {
    return (
        <nav>
            <Link to="/">home</Link><br/>
            <Link to="/Produtos">Produtos</Link><br/>
            <Link to="/Lojas">Lojas</Link><br/>
            <Link to="/Contato">Contato</Link>
        </nav>
    );
}

Footer.jsx

import React from "react";

export default function Footer() {
    return (
        <>
            <h2>Footer</h2>
        </>
    );
}

A organização da pasta components ficará da seguinte forma:

Criação das rotas

Primeiramente no arquivo App.js, importamos os metodos import { BrowserRouter, Routes, Route } from "react-router-dom"; , também importamos as páginas e components, e vamos alterar o conteudo do return da function App(), acrescentando as tags <BrowserRouter>, <Routes> e <Route path="" element={ } />

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./views/Home";
import Produtos from "./views/Produtos";
import Lojas from "./views/Lojas";
import Contato from "./views/Contato";
import Menu from "./components/Menu";
import Footer from "./components/Footer";

function App() {
  return (
    <BrowserRouter>
      <Menu />
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/Produtos" element={<Produtos/>} />
        <Route path="/Lojas" element={<Lojas/>} />
        <Route path="/Contato" element={<Contato/>} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

Após essas configurações, sua página deve se parecer com esta imagem abaixo: