REACT
Links
Concepts
- SPA - Single Page Applications
- JSX - html inside JS
-
fragment - tag empty
First project
npx create-react-app <app-name>
npm start
Properties
<App message="Ola" user="Bob"/>
function App(props) {
return (
<>
<h1>{props.message} {props.user}</h1>
</>
);
}
States
- hook useState
- returns two elements: [state, setState]
import React, { useState } from 'react';
function App(props) {
const[user, setUser] = useState('BOB');
return (
<>
<h1>Hello {user}</h1>
</>
);
}
Controlled Components
- Uses the state of React Component as source of truth.
const [user, setUser] = useState("");
...
<input className='usuarioInput' placeholder='Usuario' value={user} onChange={e => setUser(e.target.value)}/>
import './App.css';
import React, { useState } from 'react';
import axios from 'axios';
function App(props) {
const [user, setUser] = useState("");
function handlePesquisa() {
axios.get(`https://api.github.com/users/${user}/repos`)
.then(response =>
{
console.log(response.data)
});
}
return (
<>
<input className='usuarioInput' placeholder='Usuario' value={user} onChange={e => setUser(e.target.value)}/>
<button type='button' onClick={handlePesquisa}>Pesquisar</button>
</>
);
}
export default App;
ROUTER
import React from "react";
import {Routes, BrowserRouter, Route, } from "react-router-dom";
import Home from "./Home";
import Repositories from "./Repositories";
export default function Routers() {
return (
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Home/>} />
<Route path="/repositories" element={<Repositories/>} />
</Routes>
</BrowserRouter>
);
}
- injecting, the Home component is the default
import React from 'react';
import Routers from './routes';
function App() {
return (
<Routers/>
);
}
export default App;
import { useNavigate } from 'react-router-dom';
...
export default function Home(props) {
const navigate = useNavigate();
const [user, setUser] = useState("");
function handlePesquisa() {
axios.get(`https://api.github.com/users/${user}/repos`)
.then(response => {
const repositories = response.data;
const repositoriesName = [];
repositories.map(repository => repositoriesName.push(repository.name));
localStorage.setItem('repositoriesName', JSON.stringify(repositoriesName));
console.log(repositoriesName);
navigate('/repositories');
});
}
...
import { Link } from "react-router-dom";
...
<Link to='/'>Voltar</Link>
Using local storage
function handlePesquisa() {
axios.get(`https://api.github.com/users/${user}/repos`)
.then(response => {
const repositories = response.data;
const repositoriesName = [];
repositories.map(repository => repositoriesName.push(repository.name));
localStorage.setItem('repositoriesName', JSON.stringify(repositoriesName));
console.log(repositoriesName);
});
}
Styled-Components
import styled from 'styled-components';
export const Container = styled.div`
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
`;
export const Input = styled.input`
border: 1px solid #ddd;
height: 1.5rem;
padding: 0 .5rem;
border-radius: .25rem 0 0 .25rem;
&:focus,
&:active {
outline: none;
box-shadow: none;
}
`;
export const Button = styled.button`
height: 1.5rem;
border: 1px solid #000;
background: #000;
color: #fff;
border-radius: 0 .25rem .25rem 0;
`;
import * as S from './styled';
return (
<S.Container>
<S.Input className='usuarioInput' placeholder='Usuario' value={user} onChange={e => setUser(e.target.value)}></S.Input>
<S.Button type='button' onClick={handlePesquisa}>Pesquisar</S.Button>
</S.Container>
);
- styling in react components
import { Link } from "react-router-dom";
export const LinkHome = styled(Link)`
display: block;
width: 4rem;
text-align: center;
margin: 2rem auto;
background-color: #000;
padding: .5rem 0;
color: #fff;
text-decoration: none;
`;
Conditional Rendering
- verify the error variable below
import '../../App.css';
import React, { useState } from 'react';
import axios from 'axios';
import * as S from './styled';
import { useNavigate } from 'react-router-dom';
export default function Home(props) {
const navigate = useNavigate();
const [user, setUser] = useState("");
const [error, setError] = useState(false);
function handlePesquisa() {
axios.get(`https://api.github.com/users/${user}/repos`)
.then(response => {
const repositories = response.data;
const repositoriesName = [];
repositories.map(repository => repositoriesName.push(repository.name));
localStorage.setItem('repositoriesName', JSON.stringify(repositoriesName));
console.log(repositoriesName);
setError(false);
navigate('/repositories');
})
.catch(error => {
setError(true)
});
}
return (
<S.HomeContainer>
<S.Container>
<S.Input className='usuarioInput' placeholder='Usuario' value={user} onChange={e => setUser(e.target.value)}></S.Input>
<S.Button type='button' onClick={handlePesquisa}>Pesquisar</S.Button>
</S.Container>
{
error ? <S.ErrorMsg>Ocorreu um erro. Tente novamente.</S.ErrorMsg> : ' '
}
</S.HomeContainer>
);
}
Top comments (1)
📚