Iniciando uma aplicação React

O que é React?

O React é uma biblioteca JavaScript para criar interfaces. Ele é mantido pelo Facebook e por uma comunidade de desenvolvedores e empresas individuais.

O React torna simples criar UIs interativas. Como ele é possível criar visualizações simples para cada estado no aplicativo. O React atualizará e renderizará de forma eficiênte os componentes corretos quando os dados forem modificados. Com o React é possível criar componentes encapsulados que gerenciam seu próprio estado.

Iniciando uma aplicação React

Requisitos:

• Node.js – https://nodejs.org/en/
• NPM – https://www.npmjs.com/
• NPX – https://www.npmjs.com/package/npx

1 – Criar a nova aplicação

Abra o terminal e acesse o diretório em que deseja criar a aplicação.

cd /home/anderson/Projetos/

Depois utilize o comando abaixo. Substitua o meu-aplicativo pelo nome da aplicação.

npx create-react-app meu-aplicativo

2 – Iniciar a aplicação em modo de desenvolvimento

Acesse o diretório raiz da aplicação, e utilize o comando abaixo para iniciar a aplicação em modo de desenvolvimento.

cd  meu-aplicativo/ 
npm start

3 – Realizar o build da aplicação para ambiente de produção

Acesse o diretório raiz da aplicação, e utilize o comando abaixo para realizar o build.

npm run build

Após isto o aplicativo otimizado para o ambiente de produção, estará dentro do diretório build. Basta mover o conteúdo deste diretório para seu servidor web de preferência.

4 – Organização do projeto

Ao criar o projeto React utilizando o comando create-react-app, ele cria uma estrutura padrão básica para o trabalho. Vamos trabalhar dentro do diretório src, eu utilizo a estrutura abaixo para organização do projeto:

• assets – Neste diretório, coloco os arquivos css e imagens que são compartilhados entre componentes e telas do projeto.
• components – Neste diretório, coloco os componentes do projeto.
• screens – Neste diretório, coloco as telas do projeto, que utilizam os componentes para serem formadas.