Skip to main content

Introdução ao React

Referência: Curso da Udemy

Aplicação: GitCollection

Minha App GitCollection Online

Aplicação simples em React que salva no localstorage os repositórios do github e possibilita ter mais detalhes.

Fontes da minha aplicação https://gitlab.com/farnetani/gitcollection-correto

Fontes do curso https://github.com/aluiziodeveloper/curso-reactjs-instalacao-app-gitcollection

Criando o Projeto​

# Instalar o create-react-app
npm i -g create-react-app

# Criar a aplicação
create-react-app gitcollection --template=typescript

Vscode em preferências, não esquecer de verificar se as configurações abaixas existem:

...
"emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
...

React-Router-Dom​

npm i react-router-dom
npm i -D @types/react-router-dom

Refactoring​

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Olá</h1>
    </div>
  );
}

export default App;

React-Router (rotas)​

Overview: React-Router v6

exact = se não usarmos para o “/” tudo que começar com isso será redirecionado pra essa rota.

Dicas​

Usar ou não usar export default​

O App exige que a exportação seja default, porém para os outros componentes é interessante tirar isso.

import React from 'react';

export const Routes: React.FC = () => {
  return (
      <h1>Olá</h1>
  );
}

Agora quando tivermos que importar, deveremos sempre usar o mesmo nome = Routes

Nomes para componentes​

Para componentes, devemos sempre criar uma estrutura com o nome maíscula, como exemplo:

pages/Dashboard/index.tsx