React Tutorial - Parte 1

Olá caros leitores,

Link do gitHub do projeto aqui!

Afim de aprimorar os estudos e praticar um pouco de tudo que venho aprendendo sobre React resolvi iniciar uma série de postagens em português e ir evoluindo uma aplicação do zero, implementando desde o básico até features mais avançadas sobre React.

Esta parte 1 ainda terá um pouco de conceitos mas a ideia é que seja prático e um guia para você que tem interesse em aprender esta linguagem.

O que veremos neste post: 

1. Requisitos básicos para criar um projeto
2. Criação de projeto básico.
3. Entendimento da estrutura do projeto 
4. Entendimento da estrutura de projeto atomico
5. Instalação de framework - React Bootstrap
6. Instalação de framework - PrimeReact (Primefaces)

1. Requisitos básicos para criar um projeto

1. NodeJS: https://nodejs.org/en/
2. Visual Code ( ou outro editor de sua preferência )

2. Criação de projeto básico

Vamos criar um projeto segundo o basico do site oficial (sempre olho primeiro nos sites oficiais)
https://reactjs.org/

Abra o prompt e execute o comando que cria um projeto básico e ja pronto para rodar:
npx create-react-app afs-react-tutorial
cd afs-react-tutorial\

Criando o projeto

Inicie a aplicação
npm start

Site rodando local

3. Entendimento da estrutura do projeto

Aqui falarei da estrutura básica de pastas do projeto react criado pelas instruções acima.


Falarei de 4 pontos básicos neste primeiro momento:

Node_modules:
Local onde ficam as libs instaladas ( as libs da criação do projeto e todas que instalar)

scr 
Pasta raiz dos nossos componentes. É dentro dela que são criados os componentes e a estrutura atômica

json.config
O arquivo de configuração do seu projeto (comandos e diretorios para rodar a aplicaçào, apontamentos para deploy, teste etc).

gitignore
Arquivo de configuração do GIT onde fica explícito quais arquivos e pastas não serão versionados.

Nota: Create não é a única forma de criar um projeto em react ( existem outras ). É bom saber que existe caso se depare com algum prjojeto com estruturas diferentes.

Mais sobre o comando create-react-app ( criado pelo Facebook) aqui!!

4. Entendimento da estrutura de projeto atomico

Design atômico usa a nomenclatura de átomo e mais 4 correlatos à ele para categorizar os grupos de componentes. São divisões separadas por pastas:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Todo componente simples seria um átomo , ex:

• Line ( <hr/>), Button, Imput, label

Moléculas seriam 2 ou mais átomos juntos no mesmo componente: 

• Caixa de texto com botão

 Organismos seriam mais de uma molécula:

• NavBAr

Templates seriam vários organismos em um único componente:

• NavBar + Section + Article 

Pages segue a ideia, seria uma página composta de 2 ou mais Templates

Crie as pastas com nomes dos átomos dentro da pasta src:

Link (em inglês) com mais detalhes!

5. Instalação de framework - React Bootstrap

A melhor adaptação do Boostrap para react.

Execute o comando:

• npm install react-bootstrap bootstrap

6. Instalação de framework - PrimeReact (Primefaces)

Execute os comandos:

• npm install primereact --save 
• npm install primeicons --save

Altere o arquivo index.js retirando a referencia ao css index.css e delete este css

Adicione os imports:

O arquivo index.js  final ficará assim:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.css';

import 'primereact/resources/themes/nova-light/theme.css';

import 'primereact/resources/primereact.min.css';

import 'primeicons/primeicons.css';

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

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

---

Feito isso vamos deixar o arquivo App.js limpo e colocar um botão do botstrap e um input do primereact.

Apague o arquivo App.css e deixei o arquivo App.js desta forma:

Pare a aplicação e a execute o comando npm start

No próximo parte partiremos para explicação de outros conceitos.

Nestes tutoriais tentarei mostrar os conceitos, ferramentas e abordagens mais utilizadas.

Próximos tópicos incluem: Componentes atômicos, rotas, styled components, lifecyle etc.


Dúvidas e sugestões ?