Criando meu primeiro APP com React JS

development Abr 07, 2021

Está se tornando uma boa prática os frameworks possuírem um cli (client) para ajudar na sua utilização e nos poupar de todo o serviço maçante de configuração. Assim como os outros o React também adotou esse padrão e criou o famoso create-react-app. Com ele conseguimos criar uma aplicação em React rapidamente e  focar mais no aprendizado e desenvolvimento.

Você pode instalar o cli do React com o yarn ou com o npm:

$ yarn global add create-react-app

ou

$ npm install -g create-react-app

ou ainda, como eu, usar o create-react-app sem instalá-lo usando o npx.

Criando o app com o cli do React

Podemos finalmente criar a nossa app, o processo pode ser feito de duas maneiras diferentes: com o create-react-app ou npx. A única diferença é que com o create-react-app precisamos tê-lo instalado em nossa máquina, agora o npx irá executar o create-react-app sem instalá-lo na máquina local.

Para criarmos a aplicação, em uma nova pasta apenas rodamos o create-react-app seguido pelo nome da aplicação:

$ create-react-app meu-primeiro-app

ou

$ npx create-react-app meu-primeiro-app

Subindo nosso app

Com a nossa aplicação criada, podemos subi-la de duas maneiras, através do yarn ou npm, isso vai depender da sua preferência ou gosto por um desses gerenciadores de pacote.

$ yarn start

ou

$ npm start

Em ambos os casos, assim que nossa app subir, o navegador será automaticamente aberto com uma página principal padrão (default) do React, parecida com essa:

Hello World com React

Para fazer o famoso Hello World abra o arquivo App.js que fica dentro de src (localizada na raiz da aplicação).

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

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>
    );
  }
}

export default App;

Aqui podemos ver o código padrão (default) do React, vamos trocar todo o conteúdo da div que tem a classe App para um simples h1 com nosso Hello World:

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello World</h1>
      </div>
    );
  }
}

export default App;

Voltando ao nosso navegador veja que a página já foi recarregada graças ao live reloading do React:

Pronto, já temos o nosso Hello World com React.

SIM, isso foi muito básico, se você quer entender melhor e construir aplicações mais completas com React, tem um longo caminho pela frente. Se você e aceitar uma recomendação, tem um curso bem completo sobre criação de aplicativos utilizando React Native chamado fabricadeaplicativos do Matheus Fraga (Sujeito Programador) que vale muito a pena, confere aqui.

Diego Bruning

Mais de 5 anos de experiência em desenvolvimento de Software, minha principal qualidade é o envolvimento e o compromisso com os projetos.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.