Aprenda React | Demo Hello World | Tutoriais LabEx

Introdução

🧑‍💻 Novo no Linux ou no LabEx? Recomendamos começar com o curso Quick Start with Linux.

Olá, bem-vindo ao LabEx! Neste primeiro laboratório, você aprenderá o clássico programa "Hello, World!" em React.

Clique no botão Continuar abaixo para iniciar o laboratório.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível intermediário com uma taxa de conclusão de 67%. Recebeu uma taxa de avaliações positivas de 99% dos estudantes.

Olá React

Pré-requisitos

Antes de começarmos, precisamos garantir que o Node.js e o npm estejam instalados na VM do LabEx.

Abra o terminal ou prompt de comando e execute os seguintes comandos:

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

Captura de tela do terminal de instalação do Nodejs

Inicialização do React

Vamos tentar iniciar uma demonstração "Hello World" em React.

Abra seu terminal ou prompt de comando e execute o seguinte comando para criar um novo projeto React:

cd ~/project
npx create-react-app hello-world-demo

Aguarde a conclusão da instalação.

Atualizar o App React

Em seguida, vamos atualizar o aplicativo React padrão para exibir uma mensagem "Hello, World!".

Abra o arquivo src/App.js no seu editor de código preferido e substitua o conteúdo pelo seguinte código:

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

Por padrão, o servidor de desenvolvimento React usa a porta 3000. Para alterá-lo para a porta 8080, abra o arquivo package.json no seu editor de código.

Localize a seção scripts e atualize o script start para incluir a variável de ambiente PORT:

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
  ...
}

Finalmente, execute o seguinte comando para iniciar o servidor de desenvolvimento React:

cd hello-world-demo
npm start

É isso! Você iniciou com sucesso uma demonstração "Hello World" em React no seu servidor local usando a porta 8080.

Agora, você pode mudar para a aba Web 8080 e clicar no botão de atualização para ver a página web.

Resumo

Parabéns! Você concluiu seu primeiro laboratório LabEx.

Se você quiser saber mais sobre o LabEx e como usá-lo, pode visitar nosso Centro de Suporte. Ou você pode assistir ao vídeo para aprender mais sobre o LabEx.

Programar é uma longa jornada, mas o Próximo Laboratório está a apenas um clique de distância. Vamos nessa!

Seu Primeiro Laboratório React