Como Criar uma Aplicação React.js em 5 Minutos: Guia Detalhado (2023)

O React.js é um dos frameworks front-end mais populares atualmente, oferecendo uma abordagem eficiente para o desenvolvimento web. Neste guia prático, vamos explorar como criar uma aplicação React.js em apenas 5 minutos, passo a passo. Este tutorial assume que você já possui conhecimentos básicos de React.js, Javascript, HTML e CSS, além de ter o Node.js e npm instalados em seu computador.

1. Instale a ferramenta create-react-app

O primeiro passo é instalar a ferramenta create-react-app, fornecida pelos criadores do React.js. Execute o seguinte comando no terminal:

npm install -g create-react-app

Após a conclusão bem-sucedida, a ferramenta estará instalada e pronta para uso. Vamos agora criar nossa aplicação.

2. Crie a aplicação

Utilizando o comando abaixo, crie sua aplicação React.js. Substitua "nomedaapp" pelo nome desejado para sua aplicação:

npx create-react-app nomedaapp

Com a conclusão bem-sucedida, sua estrutura de aplicativo estará pronta. Agora, iniciemos a aplicação.

3. Inicie a aplicação

Para iniciar a aplicação, utilize os seguintes comandos:

cd nomedaapp
npm start

O primeiro comando entra no diretório da aplicação, enquanto o segundo inicia a aplicação. Por padrão, a aplicação estará disponível em localhost:3000.

Após o início, a janela do navegador abrirá automaticamente, exibindo a página inicial.

4. Realize uma Chamada à API

Vamos agora abrir o código da aplicação e modificar o componente principal App.js. Primeiramente, transformaremos o componente em uma classe para maior conveniência. Substitua o conteúdo do App.js pelo seguinte:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { posts: [] }
  }

  componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url)
      .then(response => response.json())
      .then(json => this.setState({ posts: json }))
  }

  render() {
    return (
      <p>Hello world!</p>
    );
  }
}

export default App;

Agora, implementamos uma chamada à API utilizando o método fetch do Javascript. Esta chamada obtém dados da API da JSONPlaceholder.

5. Exibição dos Dados

Com os dados obtidos, vamos agora exibi-los de forma atraente. Adicionaremos o Bootstrap à nossa aplicação para melhorar o layout. Adicione o seguinte trecho ao arquivo ./public/index.html:

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>React App</title>

Agora, podemos estruturar o JSX para exibir os dados da seguinte maneira:

// ... (código anterior)

render() {
  const { posts } = this.state;
  return (
    <div className="container">
      <div class="jumbotron">
        <h1 class="display-4">Blog posts</h1>
      </div>
      {posts.map((post) => (
        <div className="card" key={post.id}>
          <div className="card-header">
            #{post.id} {post.title}
          </div>
          <div className="card-body">
            <p className="card-text">{post.body}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

// ... (código posterior)

Agora, os dados obtidos da API são exibidos de forma organizada em cards Bootstrap.

6. Adição de Estilo

Para aprimorar a aparência da aplicação, adicionaremos um arquivo App.css com estilos simples:

.app {
  padding: 10px;
}

.app .jumbotron {
  text-align: center;
}

.app .card {
  margin-bottom: 10px;
}

.app .card-header {
  color: white;
  font-weight: bold;
}

Pronto! Com essas adições de estilo, nossa aplicação está visualmente mais atraente.

Conclusão

Neste artigo, criamos uma aplicação React.js simples, incorporando a busca de dados de uma API REST. Utilizamos o create-react-app para configurar facilmente a aplicação React.js e o Bootstrap para estilização. Esperamos que este tutorial seja útil como base para seus primeiros passos no desenvolvimento React.js. Para aprofundar seus conhecimentos, explore o curso React.js em duomly.com.

Tenha uma ótima experiência codificando!

Obrigado por ler!