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

De Aulas
Linha 1: Linha 1:
 +
  
  
Linha 32: Linha 33:
 
</html>
 
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
−
 
  
 
O exemplo acima cria uma classe chamada <code>Hello</code> que extende a classe <code>React.Component</code> do React e renderiza o texto um texto HTML por meio da chamada <code>ReactDOM.render</code> na tag de id <code>mydiv</code>.
 
O exemplo acima cria uma classe chamada <code>Hello</code> que extende a classe <code>React.Component</code> do React e renderiza o texto um texto HTML por meio da chamada <code>ReactDOM.render</code> na tag de id <code>mydiv</code>.
Linha 38: Linha 38:
 
= Hello World no ReactJS =
 
= Hello World no ReactJS =
  
−
Vimos que há uma certa simplicidade no exemplo acima, mas não é assim que criamos uma aplicação usando React.
+
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 [https://vite.dev/ Vite].
  
 
== NPM e Node.js ==
 
== NPM e Node.js ==
  
−
{{tip|No windows utilizar o Powershell}}
 
  
−
Primeiro de tudo você precisa instalar o [https://www.npmjs.com/get-npm NPM] e o [https://nodejs.org/en/ 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 criar um projeto usando o <code>vite</code> uma estrutura de projeto legal pra gente.
  
−
Tendo o NPM e o Node.js instalados e configurados, então podemos instalar o <code>create-react-app</code> que é o programa para construir a árvore do nosso projeto.
+
<syntaxhighlight lang="bash">
−
 
+
$ npm create vite@latest
−
<syntaxhighlight lang=bash>
 
−
$ npm install -g create-react-app
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
No linux você precisa usar o <code>sudo</code> porque é necessário ter privilégios de administrador para poder instalar.
 
No linux você precisa usar o <code>sudo</code> porque é necessário ter privilégios de administrador para poder instalar.
 +
 +
{{tip|No windows utilizar o Powershell}}
  
 
== Criando uma aplicação ==
 
== Criando uma aplicação ==
 +
 +
Primeiro de tudo você precisa instalar o [https://www.npmjs.com/get-npm NPM] e o [https://nodejs.org/en/ 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 <code>C:\React</code> ou no caso do linux <code>/home/meu_usuario/react</code>.
 
Depois podemos criar nossa primeira aplicação. Imagine que vamos criá-la dentro da nossa pasta de projetos, por exemplo <code>C:\React</code> ou no caso do linux <code>/home/meu_usuario/react</code>.
−
 
−
Vamos utilizar o vite para criar nosso projeto (site: https://vite.dev/guide/)
 
  
 
Lá dentro da pasta a gente digita:
 
Lá dentro da pasta a gente digita:
  
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
−
$ npm create vite@latest hello -- --template react
+
$ npm create vite@latest helloreactworld -- --template react
 
$ cd hello
 
$ cd hello
 
$ npm install
 
$ npm install
−
$ npm run dev
 
  
 +
</syntaxhighlight>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 <code>npm install</code>.<syntaxhighlight lang="bash">
 +
$ cd helloreactworld
 +
$ npm install
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
Assim criamos uma pasta chamada helloreactworld onde vai estar nosso primeiro projeto.
+
Assim criamos nosso primeiro projeto chamado helloreactworld que vai estar na pasta com o mesmo nome.
  
 
== Executando a aplicação ==
 
== Executando a aplicação ==
  
−
Se você seguiu os passos certinho e sem erros, podemos executar nossa primeira aplicação. Primeiro entramos dentro da pasta
+
Se tudo deu certo, podemos executar nossa aplicação com o comando abaixo dentro da pasta raiz do projeto:
  
−
<syntaxhighlight lang=bash>
+
<syntaxhighlight lang="bash">
−
$ cd helloreactworld
+
$ npm run dev
−
</syntaxhighlight>
+
</syntaxhighlight>Em caso de sucesso, você verá informações parecidas com o que está mostrado abaixo.<syntaxhighlight lang="bash">
−
 
+
  VITE v6.2.3  ready in 206 ms
−
E executamos nossa aplicação
 
  
−
<syntaxhighlight lang=bash>
+
  ➜  Local:  http://localhost:5173/
−
$ npm start
+
  ➜  Network: use --host to expose
−
</syntaxhighlight>
+
  ➜  press h + enter to show help
  
−
Uma janela do browser vai abrir e mostrar a aplicação criada. Se não abrir automaticamente, abra o seguinte link em um browser: <code>localhost:3000</code>
+
</syntaxhighlight>Usando a tecla <code>CTRL</code> pressionada e com um clique do o botão esquerdo do mouse em cima de <code>http://localhost:5173</code> 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 <code>src/App.js</code>, que é onde está o seu hello world.
+
Veja que você é informado que para trabalhar na sua aplicação, você deve começar pelo arquivo <code>src/App.jsx</code>, que é onde está o seu ''hello world''.
  
−
Agora vamos alterar nosso arquivo App.js para deixá-lo mais simples para nosso Hello World.
+
Agora vamos alterar nosso arquivo App.jsx para deixá-lo mais simples para nosso Hello World.
  
 
<syntaxhighlight lang=javascript>
 
<syntaxhighlight lang=javascript>
Linha 112: Linha 112:
 
* Na linha 4 implementamos o método <code>render</code>. Esse método vai ser chamado para abrir nossa aplicação.
 
* Na linha 4 implementamos o método <code>render</code>. 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 <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, exportamos a classe App para ser usada pelo main.jsx que é o componente que renderiza nossa aplicação no navegador.
  
 
<!--
 
<!--

Edição das 11h56min de 28 de março de 2025


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.


Tplnote Bulbgraph.png

No windows utilizar o Powershell

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

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