React: Olá Mundo (Hello World)

Para desenvolver um projeto utilizando React, você não precisa necessariamente de nada, somente um editor de códigos, ou até mesmo o bloco de notas. Basta que você inclua no seu documento HTML as bibliotecas de javascript, e desenvolva seus componentes utilizando a sintaxe JSX padrão do React.

Então, um simples “Olá Mundo!” ficaria como a seguir.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Olá, Mundo!</h1>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

Veja o resultado: https://fabianocouto.github.io/blog/react/hello-world/

Mas isso não é recomendado para projetos um pouco mais complexos, além de comprometer a performance e a organização da aplicação.

Para desenvolver um projeto utilizando as práticas recomendas e utilizadas no mercado, você precisa ter o Node.js instalado em seu computador.

Acesse https://nodejs.org e instale versão mais atualizada.

Abra uma janela de comando (command prompt) e execute:

npm install -g create-react-app

Este comando vai instalar as dependências para criar uma aplicação em React. Isso pode demorar um puco.

Para criar uma aplicação, execute:

create-react-app hello-world

Isso também pode demorar uma pouco, mas ao terminar, você vai observar que foi criada uma pasta chamada “hello-world”, com os arquivos da aplicação.

Agora execute na sequência:

cd hello-world
npm start

Isso vai apontar a janela de comando para a pasta da aplicação, no caso o nome da pasta é “hello-world”, e vai inciar o servidor de desenvolvimento. Uma janela do navegador padrão deve se abrir automaticamente e mostrar a primeira página da aplicação sendo executada, mas caso isso não aconteça, abra uma janela do seu navegador e digite o endereço http://localhost:3000/.

Abra seu editor de códigos na pasta da aplicação, e altere o arquivo src/App.js, substituindo “Welcome to React” por “Hello World”, e verifique o efeito da mudança na janela do navegador.

Veja o resultado: https://fabianocouto.github.io/blog/react/hello-world/app/

No site https://reactjs.org/ você encontra toda documentação para o desenvolvimento de aplicações em React, além de tutoriais que você pode seguir e aumentar sua base de conhecimento.

Espero ter ajudado.

Fabiano Couto