Pré-Requisitos: Node, Npm, Yarn, Npm install -g create-react-app (globalmente) (Já

vem com a transpilação e a última versão do ECMA Script já configurados) (Não é

necessário preocupar-se com babel, webpack etc.)
create-react-app "nome do projeto"
para iniciar use npm start (demora um pouco e o navegador deverá abrir
automaticamente no servidor de desenvolvimento localhost:3000)
se estiver tudo ok prossiga
abra o projeto no code e na pasta src delete os seguintes arquivos (App.css,
App.test.js, logo.svg, index.css) (Deixe apenas App.js, index.js e
registerServiceWorker - O arquivo registerServiceWorker só é necessário caso
trabalhemos com PWA, portanto ele é opcional. Mas não há problema em deixá-lo no
SRC mesmo que não o utilizemos)
no index.js remova a instrução para importar o css "import './index.css'
no app.js remova a importação da logo "import logo from './logo.svg' e o do app em
'./app.css'
ainda no app.js no html delete tudo que está dentro da div app se quiser pode
colocar um h1 para testar (o live reload já deverá estar configurado)
Pronto o ambiente já está devidamente configurado
===================================================================================
===================================================================================
=========
Conceitos sobre react
Componentização:

A aplicação react sempre inicaliza pelo arquivo index.js.

Note que a importação do React é feita, apesar da variável React nunca ser
utilizada diretamente na aplicação, ela é necessária no contexto sempre que
utilizarmos "sintaxe html"(JSX) EX: <App/>

A importação do ReactDOM é utilizada para acessar o método render que é utilizada

uma única vez na aplicação. Ela renderiza o primeiro componente (<App /> e coloca
na div root do index.html localizado em public)

O <App /> é uma classe, que extende a classe Component, assim ele é um componente.
Um componente é sempre um código que encapsula três elementos: parte estrutural
(HTML) + estilização (CSS) + parte funcional (JavaScript).
Em suma um componente é sempre um pedaço de estrutura + estilização + lógica ->
(HTML + CSS +JS)
Obrigatoriamente um componente sempre chama um método render() que, basicamente,
retorna um conteúdo JSX (que é o "html").
A "única" diferença da sintaxe JSX pro html é o className ao invés do class pois a
keyword class é uma palavra reservada do JavaScript.

A sintaxe tradicional de um componente react é

import React, { Component } from "react"

class App extends Component{

render() {
return(
<div className="App">
CONTEÚDO JSX
</div>
);
}
}

export default App;

Com as novas versões do ECMA Script, a sintaxe de um componente foi enxuta para:

import React from 'react';

function App() {
return (
<div className="App">
CONTEÚDO JSX
</div>
);
}

export default App;

Componentes são módulos da Programação Modular, é uma boa prática criar a pasta
components dentro de src e criar os componentes dentro dela

É uma boa prática criar o componente como uma pasta dentro da pasta componentes e,
dentro da pasta do componente criado, cria-se o arquivo index.js que contém o
código do componente

Exemplo do primeiro componente de uma aplicação (Header):

./src/componentes/Header/index.js

Sintaxe tradicional para o Header (NECESSÁRIA AO UTILIZAR ESTADOS - COMPONENTES

DINÂMICOS)

import React, { Component } from "react"

class Header extends Component {

render(){
return(
<Header id="main-header">CONTEÚDO</header>
);
}
}

export default Header;

Sintaxe exuta para o Header - Stateless Component (Componentização através de

funções com arrow functions) (COMPONENTES ESTÁTICOS)

import React from 'react';

const Header = () => <Header id="main-header">CONTEÚDO</header>;

export default Header;

No App.js fazemos a importação e a chamada via JSX

import Header from './components/Header';

const App = () => (

<div className="App">
<Header />
</div>
);
export default Header;

Note que agora, podemos estilizar o Header. Daí a importância de ter criado o
Header como uma pasta pois, dentro dela, podemos ter um css (styles.css) que é
específico para o Header.
Note também que algumas estilizações-padrão já vêm com o html. Assim, é importante
criar um arquivo de estilização global para a aplicação, que deve estar na raiz de
src. Este arquivo styles além de remover configurações-padrão de css também define
configurações-padrão da nossa aplicação. Exemplo de configuração do styles.css
(global)

/* Remove as configurações padrão */

* {

margin: 0;
padding: 0;
outline: 0;
/* Faz com que o padding não aumente o width e o height dos elementos */
box-sizing: border-box;

/* Define estilos global para a aplicação */

body {

font-family: Arial, Helvetica, sans-serif;

background: #fafafa;
color: #333;

Temos que importar esse estilo via JavaScript lá no SRC. Então no App.js fazemos

import './styles.css'

Já o styles.css do Header contém a estilização específica para o Header. Poderia

ser algo do tipo:

header#main-header{
/* Ocupa toda a largura */
width: 100%;
/* Ocupa 60px de altura */
height: 60px;
/* Cor do fundo */
background: #da552f
/* Tamanho da fonte */
font-size: 18px;
/* Fonte em Negrito */
font-weight: bold;
/* Cor da fonte */
color: #fff;
/* DISPLAY: - Referência aqui https://css-
tricks.com/almanac/properties/d/display/ */
/* Permite utilizar flexbox - Referência aqui https://css-
tricks.com/snippets/css/a-guide-to-flexbox/ */
/* This defines a flex container; inline or block depending on the given
value. It enables a flex context for all its direct children. */
display: flex; /* também pode ser inline-flex */
/* Centraliza totalmente o conteúdo do flexitem */
justify-content: center;
align-items: center;
}

Agora temos que importar esse estilo via JavaScript lá no SRC. Então no index.js do
Header fazemos:
import './styles.css';