Criar um novo projeto React

create-react-app.md

React

1. Criar um novo projeto React

npx create-react-app <nome-projeto>

2. Apagar todos arquivos

3. Recriar o index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <h1>React Works!</h1>
  </React.StrictMode>,
  document.getElementById('root')
);

4. Criar o component App

export default function App() {
    return (
        <div>
            <h1>React Works!</h1>
        </div>
    );
}

5. Importar o App.js no index e trocar o h1 pelo componente

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

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

6. Criar a pasta componentes e um component para o Título

export default function Titulo() {
    return (
        <h1>React Works!</h1>
    );
}

7. Importar o Titulo no App e substituir pelo H1

import Titulo from './components/Titulo';

export default function App() {
    return (
        <div>
            <Titulo />
        </div>
    );
}

8. Receber propriedades no componente

export default function Titulo(props) {
    return (
        <h1>{ props.texto }</h1>
    );
}

9. Alterar App para enviar a prop

import Titulo from './components/Titulo';

export default function App() {
    return (
        <div>
            <Titulo texto="Título React" />
        </div>
    );
}

10. Criar um nova página Home

import Titulo from '../../components/Titulo';

export default function Home() {
    document.title = 'Home';
    return (
        <div>
            <Titulo texto="Home do Site" />
        </div>
    );
}

11. Instalar biblioteca de rotas

yarn add react-router-dom

12. Criar o arquivo de Rotas

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';

export default function Routes() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={Home} />
            </Switch>
        </BrowserRouter>
    );
}

13. Alterar o App para utilizar as rotas

import Routes from './routes';

export default function App() {
    return <Routes/>;    
};

14. Criar uma página para navegação

import Titulo from '../../components/Titulo';

export default function About() {
    document.title = 'About';
    return (
        <div>
            <Titulo texto="Sobre mim" />
        </div>
    );
}

15. Criar link na home para a nova página

import { Link } from 'react-router-dom';
import Titulo from '../../components/Titulo';

export default function Home() {
    document.title = 'Home';
    return (
        <div>
            <Titulo texto="Home do Site" />

            <Link to="/about">About</Link>
        </div>
    );
}

16. Alterar rotas para adicionar a nova

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

export default function Routes() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" exact component={About} />
            </Switch>
        </BrowserRouter>
    );
}

17. Alterar About para voltar para a home

import { Link } from 'react-router-dom';
import Titulo from '../../components/Titulo';

export default function About() {
    document.title = 'About';
    return (
        <div>
            <Titulo texto="Sobre mim" />

            <Link to="/">Home</Link>
        </div>
    );
}