freeCodeCamp

2.9 KiB

Raw Blame History

title	localeTitle
Your first React App	Seu primeiro aplicativo React

Seu primeiro aplicativo React

Instalação

Conforme especificado no artigo anterior (Instalação), execute a ferramenta Create React App . Depois de tudo ter terminado, cd para a pasta do seu aplicativo e executá npm start . Isso iniciará um servidor de desenvolvimento e você está pronto para começar a desenvolver seu aplicativo!

npm install -g react-create-app 
 create-react-app my-first-app 
 
 cd my-first-app 
 npm start

Editando o código

Inicie o seu editor ou IDE de escolha e edite o arquivo App.js na pasta src . Quando criado com a ferramenta react-create-app , já haverá algum código nesse arquivo.

O código consistirá dessas partes:

importações

import React, { Component } from 'react'; 
 import logo from './logo.svg'; 
 import './App.css';

Isso é usado pelo webpack para importar todos os módulos necessários para que seu código possa usá-los. Este código importa 3 módulos: 1) React e Component , que nos permitem usar Reagir como deveria ser usado. (Com componentes) 2) logo , o que nos permite usar logo.svg neste arquivo. 3) ./App.css , que importa a folha de estilo para este arquivo.

classes / componentes

class App extends Component { 
  render() { 
    return ( 
      <div className="App"> 
        <header className="App-header"> 
          <img src={logo} className="App-logo" alt="logo" /> 
          <h1 className="App-title">Welcome to React</h1> 
        </header> 
        <p className="App-intro"> 
          To get started, edit <code>src/App.js</code> and save to reload. 
        </p> 
      </div> 
    ); 
  } 
 }

O React é uma biblioteca que faz uso dos Componentes, que permitem dividir sua interface do usuário em partes independentes e reutilizáveis e pensar em cada parte isoladamente. Já existe 1 componente criado, o componente App . Se você usou a ferramenta create-react-app , esse componente é o componente principal do projeto e você deve construir em torno dessa classe central.

Vamos ver os componentes mais detalhados nos próximos capítulos.

exportações

Ao criar uma classe no reagir, você deve exportá-los após a declaração, o que permite usar o componente em outro arquivo usando a palavra-chave import . Você pode usar o default após a palavra-chave export para informar ao React que esta é a classe principal desse arquivo.

export default App;

Veja os resultados!

Quando você iniciar o servidor de desenvolvimento, emitindo o comando npm start , poderá visualizar as alterações adicionadas ao seu projeto ao vivo em seu navegador. Depois de emitir o comando, o npm deve abrir um navegador exibindo automaticamente seu aplicativo.

Fontes

1. Reagir documentação

2.9 KiB Raw Blame History Unescape Escape