O que criamos com React?

1. Criar código reutilizáveis e mais organizados.
2. Criar páginas que o usuário consegue interagir.
3. Criar páginas que recebem valores, processam e devolvem um resultado para o usuário

Códigos reutizáveis e mais organizados

Até agora quando você precisa de um mesmo elemento em diferentes páginas do site, você replica esse código, ex: caso você tenha duas páginas com o mesmo cabeçalho, quando for preciso alterar esse cabeçalho, tem que fazer isso nas duas páginas. Com um site de duas páginas isso é simples porém conforme o site vai crescendo isso vai se tornando muito trabalhoso.

Vamos ver como podemos separar a página em códigos menores e a ultizar a importação para reaproveitar um código.

Aplicação do conceito

Existe duas formas de aplicar os conceitos vistos:

1. Utilizando apenas HTML, CSS e JavaScript
2. Utilizando uma biblioteca ou framework
3. Aplicar os novos conceitos utilizando apenas HTML, CSS e JavaScript é possível porém é muito trabalhoso, isso por que você terá que criar o código do zero. Utilizando apenas HTML, CSS e JavaScript para aplicar os novos conceitos demanda muito tempo de codificação, por isso, não é a melhor solução.
4. Utilizando uma biblioteca ou framework que o mercado existem diversas ferramentas que aceleram a construção de código front-end. Essas ferramentas possuem soluções prontas para: criar telas, permitem ao usuário clicar em um botão, receber dados digitados por um usuário, e muito mais. Elas são chamadas de bibliotecas ou frameworks, e atualmente são as melhores opções para criar páginas front-end. Isso por que os frameworks ou bibliotecas foram criados por grandes equipes e já estão no mercado faz um bom tempo.

Criando uma aplicação

1º Acesse a pasta que vai esta seu projeto 2º Execute o comando npx create-react-app ______ no lugar do sublinhado o nome da aplicação ex: npx create-react-app minha-pagina. Esse comando sempre tem que ser executado quando for criar uma nova aplicação React JS. 3º Loco após executar o comando, a aplicação é criada em uma pasta com nome do projeto. Ex: React\minha-pagina onde react e a pasta onde executamos o comando para criar a aplicação e minha-pagina é a pasta do projeto criada pelo Node

A pasta do projeto possui a seguinte estrutura. de arquivos e pastas:

A aplicação criada através do comando npx create-react possui uma estrutura inicial que se parece com a imagem abaixo.

Para testar a aplicação criada o primeiro passo é acessar a pasta do projeto no terminal.

Para isso, utilize o comando cd e navegue até a pasta do projeto que nosso caso e cd minha-pagina. Com a pasta aberta no terminal execute o comando npm start. Ao fazer isso o Node vai iniciar um servidor web local e automaticamente a aplicação será aberta no navegador.

Criação de arquivos / .js e .css /

1º Utilizaremos o arquivos App.js para adicionar elementos html na nossa aplicação. OBS: Todos os elementos dentro do arquivo .js tem que esta dentro de um elemento pai, se não o JS vai nos retornar um erro. Pode ser Div, Header, Nav, Ul, mas que todos o resto esteja dentro de um único elemento pai.

function App(){
  return (
    <div>
      <h1>Hello World</h1>
      <p>Com React Js</p>
      <p>Criado por Maxwell Moura</p>
    </div>
  );
}

export default App;

2º Utilizando arquivos App.css para estilizar o arquivo App.js, para que os estilos criados no arquivo App.css sejam utilizados é necessario que o App.js o importe. ou seja colocar no arquivo App.js o import ‘./App.css’; e assim a estilização do arquivo vai acontecer. 3º Ultima coisa pra usar e como criar uma CLASSE nos arquivos .js agora utilizando o React nao utilizamos mais a class=”exemplo” e sim className=”exemplo”

Exportando componentes

import React from 'react';

function Header() {
  return (
    <header>Trabalhando com componentes</header>
  );
}

export default Header;