React

O React é uma framework de Javascript criada pelo Facebook. Esta framework permite criar interfaces de utilizador dinâmicas com grande facilidade.

Para além da vertente web o React permite criar aplicações mobile programadas em Javascript. É ainda possível renderizar estas interfaces de Javascript em server side.

A configuração inicial de qualquer protejo baseado em React é bastante simples. O create-react-app é um utilitário que facilita a criação do protejo base. Este utilitário consiste num boilerplate com várias funcionalidades:

  • Ambiente de desenvolvimento
  • Ambiente de produção
  • Testes integrados
  • Hot reload
  • Suporte para JSX, ES6 e Flow
  • Service Workers
  • Auto prefixo de regras CSS para os diferentes browsers

Entre muitas outras…

Instalação

Para começarmos a utilizar o React, temos de ter instalado na nossa máquina o NodeJS e o npm:

Após a instalação do NodeJS vamos instalar o create-react-app. Com o seguinte comando no terminal/linha de comandos:

npm install -g create-react-app

Este processo levará alguns minutos, no fim o create-react-app encontra-se pronto a utilizar. Assim sendo basta agora, numa pasta à nossa escolha, correr:

create-react-app novo-projeto

O nome do protejo pode ser qualquer um à vossa escolha. Dentro da nova pasta criada devem de ter a seguinte estrutura de ficheiros:

novo-projeto
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Com o boilerplate inicial criado vamos iniciar o ambiente de desenvolvimento. Para isso corremos o seguinte comando dentro da pasta do projeto:

npm start

Em poucos segundos deverá de ser apresentado o protejo numa nova janela do browser:

Qualquer alteração feita neste modo será apresentada logo de imediato no browser.

Para se criar um protejo pronto a ser utilizado online temos de correr o seguinte comando:

npm run build

Este comando irá criar uma nova pasta com o nome build. Esta pasta contém todos os ficheiros necessários para o correr o protejo.

 

There are currently no comments.

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.