Instalação e Configuração

Para entender exemplos práticos, você precisa antes preparar o ambiente para executar o código React. Porque React é apenas um módulo node, há muitas maneiras de instalar um projeto React.

Nós podemos incluir React em projetos que já existem utilizando o npm ou yarn. Se você está começando um novo projeto, nós recomendamos utilizar o pacote create-react-app.

Isso é um comando feito na interface de linha de comando (CLI – command-line interface) criado pelo Facebook que criar uma estrutura básica para o React app e cuida do ES7 + tradução pelo Babel e Webpack.

Você não precisa focar na configuração, e sim focar em escrever código React. Você pode encontrar mais detalhes sobre esse módulo na página oficial do npm. Se você tiver interesse, pode ver a documentação no github: https://www.npmjs.com/package/create-react-app

Vamos simplesmente instalar o ambiente de desenvolvimento com o seguinte código:

npm install -g create-react-app

Esse comando instala globalmente o creat-react-app. Se você utiliza múltiplas versões de nodes na mesma máquina, você pode utilizar o nvm: https://github.com/nvm-sh/nvm

 Agora que instalamos o create-react-app globalmente, vá até uma pasta no seu pc para criar um projeto com o seguinte comando:

create-react-app <nome do projeto >

Nós precisamos utilizar o nome de convenções do npm, então o nome da aplicação deve ser tudo em letra minúscula e não pode começar com ponto ou underscore.

Temos tudo pronto para começar a trabalhar com o React, mas antes de criarmos nosso primeiro app, precisamos instalar o React Developer Tools, é uma extensão do Chrome que permite você inspecionar a hierarquia dos componentes do React no browser.

Essa ferramenta, pode ajudar na sua produtividade. Para instalar esse extensão, procure por React Developer Tools no Chrome app ou abre o seguinte link: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Criando uma Aplicação Hello World

Vamos criar o projeto Hello World. Esse comando irá instalar os pacotes necessários para o seu projeto.

create-react-app hello-world

Eu não tenho o yarn instalado, então vou instalar com o comando.

npm install -g yarn

Vamos iniciar o projeto com o comando:

yarn start

O browser irá abrir automaticamente o http://localhost:3000/ e essa é a sua primeira aplicação React.

O yarn é um manipulador de pacote como o npm. Você escolhe qual utilizar o yarn ou o npm.

Uma das vantagens do yarn sobre o npm é que o npm sempre precisa está conectado ao Internet, já o yarn pode utilizar offline. Yarn é muito rápido para instalar pacotes, que economiza bastante tempo.

Fonte: React Native for Mobile Development: Harness the Power of React Native to Create Stunning iOS and Android Applications