Изучение React — Основы


REACT

Ссылки

  • REACT

  • AXIOS

    • npm install axios
  • ROUTER

    • npm install react-router-dom
  • STYLED-COMPONENTS

    • npm install styled-components

Концепции

  • SPA — одностраничные приложения
  • JSX — html внутри JS
  • фрагмент — пустой тег

Первый проект

npx create-react-app <app-name>
Вход в полноэкранный режим Выход из полноэкранного режима
  • внутри проекта
npm start
Войти в полноэкранный режим Выход из полноэкранного режима

Свойства

  • синтаксис для введения
  <App message="Ola" user="Bob"/>
Вход в полноэкранный режим Выйти из полноэкранного режима
  • использование
function App(props) {
  return (
    <>
      <h1>{props.message} {props.user}</h1>
    </>
  );
}
Ввести полноэкранный режим Выход из полноэкранного режима

Состояния

  • хук useState
  • возвращает два элемента: [state, setState].
import React, { useState } from 'react';

function App(props) {
  const[user, setUser] = useState('BOB');
  return (
    <>
      <h1>Hello {user}</h1>
    </>
  );
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Управляемые компоненты

  • Использует состояние React Component в качестве источника истины.
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;
Вход в полноэкранный режим Выход из полноэкранного режима

РОУТЕР

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>
  );
}
Войти в полноэкранный режим Выход из полноэкранного режима
  • введение, по умолчанию используется компонент Home
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>
Войти в полноэкранный режим Выход из полноэкранного режима

Использование локального хранилища

  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);
          });
}
Войти в полноэкранный режим Выход из полноэкранного режима

Стилизованные компоненты

  • для стилизации элементов, например:
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>
  );
Войти в полноэкранный режим Выход из полноэкранного режима
  • стилизация в компонентах react
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;
`;
Вход в полноэкранный режим Выход из полноэкранного режима

Условный рендеринг

  • проверьте переменную ошибки ниже
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>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий