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

De Aulas
(Criou página com 'Afluentes: Desenvolvimento Front-end, Usabilidade, desenvolvimento web, mobile e jogos = Introdução = O React é uma biblioteca JavaScript criada pelo Facebook par...')
 
Linha 34: Linha 34:
 
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>.
  
−
== Criaçao de um aplicativo React ==
+
= 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.
 
Vimos que há uma certa simplicidade no exemplo acima, mas não é assim que criamos uma aplicação usando React.
  
−
=== NPM e Node.js ===
+
== NPM e Node.js ==
  
 
{{tip|No windows utilizar o Powershell}}
 
{{tip|No windows utilizar o Powershell}}
Linha 52: Linha 52:
 
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.
  
−
=== Criando uma aplicação ===
+
== Criando uma aplicação ==
  
 
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>.
Linha 64: Linha 64:
 
Assim criamos uma pasta chamada helloreactworld onde vai estar nosso primeiro projeto.
 
Assim criamos uma pasta chamada helloreactworld onde vai estar nosso primeiro projeto.
  
−
=== 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 você seguiu os passos certinho e sem erros, podemos executar nossa primeira aplicação. Primeiro entramos dentro da pasta

Edição das 13h18min de 27 de fevereiro de 2024

Afluentes: Desenvolvimento Front-end, 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.
Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=React.js:_Criação_de_um_aplicativo&oldid=8925”