Como instalar e executar o React

Neste artigo vou falar sobre como instalar e executar o React.

Como vimos no artigo: Conheça o React, biblioteca para desenvolvimento Web, ele é uma biblioteca criada pelo facebook em 2013.

É uma ferramenta declarativa, Baseada em componentes e por ter uma sintaxe única você consegue aproveitar todo conhecimento adquirido ao desenvolver aplicações web para o desenvolvimento mobile com React Native

React e ReactDom

O React é uma biblioteca, dividida em várias outras bibliotecas para funcionar em diversos ambientes.

Então, para criarmos uma aplicação web, nós precisamos basicamente de duas bibliotecas, o React e o ReactDom.

Instalação via CDN

Para utilizar o React, podemos fazer a instalação por CDN. Basta utilizar os seguintes links:

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

Com isso, basta adicionar esses dois links ao projeto HTML.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="APP"></div>
  </body>
  <script
    crossorigin
    src="https://unpkg.com/react@17/umd/react.development.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
  ></script>
</html>

Agora podemos criar o primeiro componente React. Para isso, basta criar um script JavaScript, utilizando os objetos do React, com os métodos necessários para criar um componente.

    <script>
        ReactDOM.render(
            React.createElement("h1", null, "Olá Mundo"),
            document.getElementById("APP")
        );
    </script>

Vamos detalhar um pouco mais o que faz cada um dos objetos mostrados no exemplo a cima.

Curso React - Fundamentos

Conhecer o curso

ReactDOM

O objeto ReactDOM tem métodos específicos para o DOM

O método utilizado é o render(), ele recebe dois parâmetros onde o primeiro é o elemento React que será renderizado na tela, por exemplo, um h1. O segundo é onde iremos passar o elemento HTML de referência para adicionar todos os elementos criados pelo React, por exemplo o elemento div contendo a propriedade id.

<div id='APP'>
</div>

Então ele irá renderizar os elementos React no DOM, ou seja, irá renderizar os elementos criados com o React no HTML, tudo isso via JavaScript.

React

O objeto React contém os métodos para se manipular um componente.

O método utilizado é o createElement(). Esse método tem três parâmetros onde o primeiro é o tipo do elemento que deve ser renderizado, como uma div ou h1, o segundo são as propriedades, como um id ou className, já o terceiro, são os filhos do elemento.

JSX

Nós podemos utilizar o JSX para descrever como sua UI (interface do usuário) deve ser construída. Cada elemento JSX é somente uma alternativa de utilizar o React.createElement(). No geral você não vai utilizar os métodos demostrados nos exemplos anteriores, caso esteja utilizando JSX.

Para utilizar JSX nós iremos precisar do Babel, ele vai fazer uma tradução do JSX para o JavaScript Vanilla.

Então, no HTML, basta colocar o Babel via CDN e adicionar na tag script a propriedade type="text/babel", para que os scripts possam ser transpilados pelo Babel.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div id="APP"></div>
    </body>
	// CDN REACT
    <script
        crossorigin
        src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
        crossorigin
        src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
	// CDN BABEL
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  	<script type="text/babel">
        ReactDOM.render(
		<h1>Olá Mundo</h1>, 
		document.getElementById("APP"));
    </script>
</html>

Com isso feito, podemos executar JSX em vez de JavaScript para criar os componentes.

Podemos ver com mais detalhes como o JSX se comporta a partir da versão 17 do React no artigo: React 17 - Conheça o que vai mudar no JSX

Formação Desenvolvedor React - Funcional

Conhecer a formação

Instalação via CLI

Para começar, teremos que ter instalado o Node.js na máquina. O processo de instalação você consegue ver neste artigo: Instalação do Node.js - Windows, Mac e Linux

Com o Node.js instalado, basta executar no terminal o seguinte comando:

npx create-react-app my-app

Esse comando é um pipeline build para front-end. Atrás dos panos será utilizado o Babel e o webpack.

Agora basta, pelo terminal, acessar a raiz do projeto criado e executar npm run start. Este comando irá iniciar um novo servidor local em http://localhost:3000.

react-web

Conclusão

Vimos que o React é uma biblioteca que envolve muita tecnologia e conseguimos executá-lo tanto em um projeto simples, utilizando HTML, CSS e JavaScript e até utilizando somente JSX para criarmos os nossos primeiros componentes.

Veja quais são os tópicos abordados durante o curso de React Fundamentos: