Instalar e executar o React; Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React por CDN (Link) e CLI (Linha de comando)
É uma ferramenta declarativa e assim baseada em componentes e por ter uma sintaxe única você consegue aproveitar todo conhecimento adquirido ao desenvolver aplicações web para o desenvolvimento mobile.React Native
React e ReactDom
O React é uma biblioteca assim 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:Copiar
<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.Copiar
<!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, assim utilizando os objetos do React, com os métodos necessários para criar um componente.Copiar
<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 acima.
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 assim ele irá renderizar os elementos React no DOM, ou seja, primeiramente 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 então são os filhos do elemento.
JSX
JSX é usado 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 precisara assim 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.Copiar
<!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 assim executar JSX em vez de JavaScript para criar os componentes.
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. Aliás atrás dos panos será utilizado o Babel e o webpack.
Agora basta que pelo terminal assim acessem a raiz do projeto criado e executar npm run start. Este comando irá iniciar um novo servidor local em http://localhost:3000.
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.
React, React Hooks, Redux, Laravel e Mercado Pago
Clique Aqui!
👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
Leia nosso artigo “Desenvolvimento Ágil“