Mudanças entre as edições de "React.js: Criação de um aplicativo"

De Aulas
Linha 105: Linha 105:
 
* Entre a linha 6 e 8, colocamos o código HTML que queremos retornar pelo comando <code>return</code> da linha 5.
 
* Entre a linha 6 e 8, colocamos o código HTML que queremos retornar pelo comando <code>return</code> da linha 5.
 
* Na linha 13, executamos a classe App.
 
* 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: <code>C:\React\Projetos\</code> ou no linux </code>/home/meu_usuario/react/projetos</code>. Lá, digite o comando para criar o projeto:
 +
 +
<syntaxhighlight lang=bash>
 +
$ npx create-react-app consumo_api
 +
</syntaxhighlight>
 +
 +
sendo que <code>consumo_api</code> é 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 <code>cd consumo_api</code> e digitar o comando:
 +
 +
<syntaxhighlight lang=bash>
 +
$ npm start
 +
</syntaxhighlight>
 +
 +
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:
 +
 +
<center>[[Image:Pastas_projeto_react.png]]</center>
 +
 +
Para esse exemplo, nem tudo vamos precisar, então vamos excluir alguns arquivos.
 +
 +
Da pasta <code>public</code>, vamos excluir:
 +
 +
* logo192.png
 +
* logo512.png
 +
* manifest.json
 +
* robots.txt
 +
 +
== index.html ==
 +
 +
Do arquivo <code>public/index.html</code> vamos limpar o código para deixar só o que vamos utilizar. Então o código vai ficar assim:
 +
 +
<syntaxhighlight lang=html line>
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="utf-8" />
 +
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 +
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 +
    <meta name="theme-color" content="#000000" />
 +
    <meta
 +
      name="description"
 +
      content="Web site created using create-react-app"
 +
    />
 +
    <title>React App</title>
 +
  </head>
 +
  <body>
 +
    <noscript>You need to enable JavaScript to run this app.</noscript>
 +
    <div id="root"></div>
 +
  </body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
Depois vamos excluir os arquivos que não preciamos da pasta <code>src</code>, 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 <code>src/index.js</code>. Então o arquivo vai ficar assim:
 +
 +
<syntaxhighlight lang=javascript line>
 +
import React from 'react';
 +
import ReactDOM from 'react-dom';
 +
import App from './App';
 +
 +
ReactDOM.render(
 +
  <React.StrictMode>
 +
    <App />
 +
  </React.StrictMode>,
 +
  document.getElementById('root')
 +
);
 +
</syntaxhighlight>
 +
 +
== App.js ==
 +
 +
Outro arquivo que vamos dar uma editada é o <code>src/App.js</code>, deixando-o da seguinte maneira:
 +
 +
<syntaxhighlight lang=javascript line>
 +
function App() {
 +
  return (
 +
    <div className="App">
 +
      <h1>Listar</h1>
 +
    </div>
 +
  );
 +
}
 +
export default App;
 +
</syntaxhighlight>
  
 
= Atividade =
 
= 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.
 
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.

Edição das 14h52min de 4 de março de 2024

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

Tplnote Bulbgraph.png

No windows utilizar o Powershell

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 return da 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:

Pastas projeto react.png

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.

Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=React.js:_Criação_de_um_aplicativo&oldid=9024”