O que é React.js?

Uma descrição simples extraída do site https://pt-br.reactjs.org diz que o React é “uma biblioteca JavaScript para criar interfaces de usuário”.

O que preciso para iniciar um projeto React.js?

Para iniciar um projeto React é necessário um editor de texto, recomendo o Visual Studio Code, e ter o Node.Js instalado no seu computador.

Como instalar o node.js?

Para instalar o Node.js acesse https://nodejs.org/en/ e baixe a versão disponível para o seu sistema operacional.

Como criar uma aplicação React.js?

Para criar a aplicação é necessário que o node.js já esteja instalado no computador. No exemplo será usado a ferramenta npx para criar a aplicação.

npx create-react-app my-app

Com o aplicativo criado navegue até a pasta:

cd my-app

Para testar se tudo está ok use o comando:

npm start

É esperado que a aplicação inicie e exiba um tela como na imagem abaixo.

Como criar um componente?

Para saber mais sobre componentes do react acesse https://pt-br.reactjs.org/docs/components-and-props.html.

Abra o projeto com o visual code e crie uma pasta chamada components dentro da pasta src.

Dentro da pasta components crie um arquivo como o nome Title.js com o seguinte conteúdo:

import React from "react";

const Title = (props) => {
  return <h1>{props.title}</h1>;
};

export default Title;

Agora já temos o nosso primeiro componente, ele é responsável por criar um <h1> com o valor que for passado via props.

Como usar componentes no React.js?

Para demonstração vamos usar o componente criado no exemplo acima Title.js, abra o arquivo App.js no Visual Code e importe o componente.

import Title from './components/Title';

Depois de importado vamos adicionar a chamada do componente no corpo do App.

<Title title="Meu primeiro componente em React.js" />

O resultado deve ser algo como a imagem abaixo.

Agora já temos nossa primeira aplicação React.js e o nosso primeiro componente.

Se você deseja saber mais sobre React.js e aprender mais sobre o seu funcionamento acesse https://reactjs.org/tutorial/tutorial.html e siga o tutorial introdutório.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *