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.
Criaçao de um aplicativo React
Vimos que há uma certa simplicidade no exemplo acima, mas não é assim que criamos uma aplicação usando React.
NPM e Node.js
|
Primeiro de tudo você precisa instalar o NPM e o Node.js no seu computador. Na verdade, quando instalamos o Note.js, ele já instala o NPM.
Tendo o NPM e o Node.js instalados e configurados, então podemos instalar o create-react-app que é o programa para construir a árvore do nosso projeto.
$ npm install -g create-react-app
No linux você precisa usar o sudo porque é necessário ter privilégios de administrador para poder instalar.
Criando uma aplicação
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:
$ npx create-react-app helloreactworld
Assim criamos uma pasta chamada helloreactworld onde vai estar nosso primeiro projeto.
Executando a aplicação
Se você seguiu os passos certinho e sem erros, podemos executar nossa primeira aplicação. Primeiro entramos dentro da pasta
$ cd helloreactworld
E executamos nossa aplicação
$ npm start
Uma janela do browser vai abrir e mostrar a aplicação criada. Se não abrir automaticamente, abra o seguinte link em um browser: localhost:3000
Veja que você é informado que para trabalhar na sua aplicação, você deve começar pelo arquivo src/App.js, que é onde está o seu hello world.
Agora vamos alterar nosso arquivo App.js 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, executamos a classe App.
Criando a Aplicação
Para criar a aplicação, vamos seguir os mesmos procedimentos da criação de aplicação normal em React.js. Para isso, abra um terminal e vá para a pasta onde você quer alocar o projeto, por exemplo: C:\React\Projetos\ ou no linux /home/meu_usuario/react/projetos. Lá, digite o comando para criar o projeto:
$ npx create-react-app consumo_api
sendo que consumo_api é o nome do nosso projeto. Observe que o comando cria uma pasta com o nome do projeto.
Para rodar o projeto, basta entrar na pasta com cd consumo_api e digitar o comando:
$ npm start
O terminal vai ficar preso à esso comando, e abrirá um navegador ou aba com a aplicação rodando.
Para desenvolver o projeto, você pode abrir ele no seu editor ou IDE preferidos. Eu utilizo o Visual Studio Code, abrindo a pasta do projeto na IDE.
Observe que teremos a seguinte estrutura de pastas e arquivos no projeto:
Para esse exemplo, nem tudo vamos precisar, então vamos excluir alguns arquivos.
Da pasta public, vamos excluir:
- logo192.png
- logo512.png
- manifest.json
- robots.txt
index.html
Do arquivo public/index.html vamos limpar o código para deixar só o que vamos utilizar. Então o código vai ficar assim:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta name="theme-color" content="#000000" />
8 <meta
9 name="description"
10 content="Web site created using create-react-app"
11 />
12 <title>React App</title>
13 </head>
14 <body>
15 <noscript>You need to enable JavaScript to run this app.</noscript>
16 <div id="root"></div>
17 </body>
18</html>
Depois vamos excluir os arquivos que não preciamos da pasta src, que são eles:
- App.css
- App.test.js
- index.css
- logo.svg
- serviceWorker.js
- setupTest.js
index.js
E vamos limpar as coisas que também não precisaremos do src/index.js. Então o arquivo vai ficar assim:
1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4
5ReactDOM.render(
6 <React.StrictMode>
7 <App />
8 </React.StrictMode>,
9 document.getElementById('root')
10);
App.js
Outro arquivo que vamos dar uma editada é o src/App.js, deixando-o da seguinte maneira:
1function App() {
2 return (
3 <div className="App">
4 <h1>Listar</h1>
5 </div>
6 );
7}
8export default App;
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.
