React.js: Criação de um aplicativo
Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos
Introdução
O React é uma biblioteca JavaScript criada pelo Facebook para construir interfaces do usuário. Ele é usado para a construção de uma aplicação em uma única página e permite a criação de componentes UI (User Interface reutilizáveis). Essa aula é baseada no conteúdo de react da w3schools.
A seguir vemos um exemplo Hello World usando React.
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>
</body>
</html>
O exemplo acima cria uma classe chamada Hello que extende a classe React.Component do React e renderiza o texto um texto HTML por meio da chamada ReactDOM.render na tag de id mydiv.
Hello World no ReactJS
Vimos que há uma certa simplicidade no exemplo acima, mas não é assim que criamos uma aplicação usando React. Normalmente é legal termos uma estrutura padronizada na criação das nossas aplicações. Para facilitar isso, existem algumas ferramentas que geram para nós uma estrutura pronta com um exemplo básico da qual podemos usar como partida para criar nossa aplicação. No nosso caso, vamos usar a ferramenta Vite.
NPM e Node.js
Tendo o NPM e o Node.js instalados e configurados, então podemos criar um projeto usando o vite uma estrutura de projeto legal pra gente.
$ npm create vite@latest
No linux você precisa usar o sudo porque é necessário ter privilégios de administrador para poder instalar.
|
Criando uma aplicação
Primeiro de tudo você precisa instalar o NPM e o Node.js no seu computador. Na verdade, quando instalamos o Note.js, ele já vem junto o NPM.
Depois podemos criar nossa primeira aplicação. Imagine que vamos criá-la dentro da nossa pasta de projetos, por exemplo C:\React ou no caso do linux /home/meu_usuario/react.
Lá dentro da pasta a gente digita:
$ npm create vite@latest helloreactworld -- --template react
$ cd hello
$ npm install
Se você seguiu os passos certinho e sem erros, podemos terminar nossa instalação dentro da pasta. Então entre na pasta do projeto criado e digite npm install.
$ cd helloreactworld
$ npm install
Assim criamos nosso primeiro projeto chamado helloreactworld que vai estar na pasta com o mesmo nome.
Executando a aplicação
Se tudo deu certo, podemos executar nossa aplicação com o comando abaixo dentro da pasta raiz do projeto:
$ npm run dev
Em caso de sucesso, você verá informações parecidas com o que está mostrado abaixo.
VITE v6.2.3 ready in 206 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Usando a tecla CTRL pressionada e com um clique do o botão esquerdo do mouse em cima de http://localhost:5173 uma janela do browser vai abrir e mostrar a aplicação criada.
Veja que você é informado que para trabalhar na sua aplicação, você deve começar pelo arquivo src/App.jsx, que é onde está o seu hello world.
Agora vamos alterar nosso arquivo App.jsx para deixá-lo mais simples para nosso Hello World.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello React World!</h1>
</div>
);
}
}
export default App;
- Na linha 1 importamos a biblioteca básica do react;
- Na linha 3 criamos uma classe para nossa aplicação que extende a classe
Component. - Na linha 4 implementamos o método
render. Esse método vai ser chamado para abrir nossa aplicação. - Entre a linha 6 e 8, colocamos o código HTML que queremos retornar pelo comando
returnda linha 5. - Na linha 13, exportamos a classe App para ser usada pelo main.jsx que é o componente que renderiza nossa aplicação no navegador.
Atividade
Agora, como atividade, vamos pegar aquelas nossas atividades anteriores, do conteúdo de React.js Render HTML, e vamos tentar fazer funcionar agora como aplicativo.
