Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cristianosantan/reactjs_intro
https://github.com/cristianosantan/reactjs_intro
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/cristianosantan/reactjs_intro
- Owner: CristianoSantan
- Created: 2022-02-01T03:36:49.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-01T03:57:18.000Z (almost 3 years ago)
- Last Synced: 2024-04-24T09:49:37.763Z (8 months ago)
- Language: JavaScript
- Size: 149 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://pt-br.reactjs.org/). 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://code.visualstudio.com/download)
[https://www.youtube.com/watch?v=_R6YslWRUFk](https://www.youtube.com/watch?v=_R6YslWRUFk)
- [Node js](https://nodejs.org/en/) e npm. [ instalação ]
[https://www.youtube.com/watch?v=_sEwOXCKw4c](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***.
```jsx
npx create-react-app webapp
```
Entre na pasta pelo terminal.
```jsx
cd webapp
```
Abra o vscode.
```jsx
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.
```jsx
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.
```jsx
function App() {
return (
App
);
}
export default App;
```
E o arquivo ***index.js*** da pasta ***src*** para o codigo abaixo.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
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](https://github.com/remix-run/react-router/blob/main/docs/getting-started/installation.md) de acordo com a documentação.
```jsx
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 N***ovos Arquivos*** dentro da pasta ***views***.
chamado ***Home.jsx***.
```jsx
import React from "react";
export default function Home() {
return (
<>
Home
>
);
}
```
chamado ***Lojas.jsx***.
```jsx
import React from "react";
export default function Lojas() {
return (
<>
Lojas
>
);
}
```
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***
```jsx
import React from "react";
import { Link } from "react-router-dom";
export default function Menu() {
return (
home
Produtos
Lojas
Contato
);
}
```
***Footer.jsx***
```jsx
import React from "react";
export default function Footer() {
return (
<>
Footer
>
);
}
```
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 ``, `` e ``
```jsx
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 (
} />
} />
} />
} />
);
}
export default App;
```
Após essas configurações, sua página deve se parecer com esta imagem abaixo:
