Aprenda React JS em 5 minutos - Um tutorial para iniciantes
Este tutorial lhe dará uma compreensão básica do React ao construir um aplicativo muito simples. Vou deixar de fora tudo o que não considero essencial.
E se isso despertar seu interesse e você quiser aprender mais, você pode conferir o curso que nós indicamos. Clique no link abaixo e confira:
Mas, por enquanto, vamos nos concentrar nos fundamentos!
Configuração
Ao começar com o React, você deve usar a configuração mais simples possível: um arquivo HTML que importa as bibliotecas React e ReactDOM usando tags de script.
Fica assim:
<html>
<head>
<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">
/*
ADD REACT CODE HERE
*/
</script>
</body>
</html>
Também importamos o Babel, pois o React usa algo chamado JSX para escrever marcação. Precisaremos transformar o JSX em JavaScript puro para que o navegador possa entendê-lo.
Há mais duas coisas que quero que você observe:
- O
<div>com o id de#root. Este é o ponto de entrada para nosso aplicativo. É onde todo o nosso aplicativo irá residir. - A tag
<script type="text/babel">no corpo. É onde escreveremos nosso código React.
Se você quiser experimentar o código, confira este playground do Scrimba.
Componentes
Tudo no React é um componente, e esses geralmente têm a forma de classes JavaScript. Você cria um componente estendendo a classe React.Component. Vamos criar um componente chamado Hello conforme abaixo:
class Hello extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
Em seguida, você define os métodos para o componente. No nosso exemplo, temos apenas um método, chamado render().
Dentro do render(), você retornará uma descrição do que deseja que o React desenhe na página. No caso acima, queremos apenas exibir uma tag H1 com o texto "Hello world!" dentro dela.
Para fazer com que nosso pequeno aplicativo seja renderizado na tela, também precisamos usar ReactDOM.render():
ReactDOM.render(
<Hello />,
document.getElementById("root")
);
Portanto, é aqui que conectamos nosso componente Hello com o ponto de entrada do aplicativo <div id="root"></div>.
Isso resulta no seguinte:
A sintaxe semelhante a HTML que acabamos de ver (<h1> e <Hello/>) é o código JSX que mencionei anteriormente. Na verdade, não é HTML, é muito mais poderoso. No entanto, o que você escreve lá acaba sendo convertido em tags HTML no DOM.
O próximo passo é fazer com que nosso aplicativo manipule dados.
Manipulação de Dados
Existem dois tipos de dados no React: props (propriedades) e state (estado). A diferença entre os dois pode ser um pouco difícil de entender no início, então não se preocupe se achar um pouco confuso. Vai ficar mais fácil quando você começar a trabalhar com eles.
A diferença chave é que o estado é privado e pode ser alterado de dentro do próprio componente. As props são externas e não são controladas pelo próprio componente. Elas são passadas por componentes hierarquicamente superiores, que também controlam os dados.
Um componente pode alterar seu estado interno diretamente, mas não pode alterar suas props diretamente.
Vamos dar uma olhada mais de perto nas props primeiro.
Props
Nosso componente Hello é completamente estático. Ele renderiza a mesma mensagem, não importa o quê. No entanto, uma grande parte do React é a reutilização, ou seja, a capacidade de escrever um componente uma vez e reutilizá-lo em diferentes casos de uso. Por exemplo, para exibir mensagens diferentes.
Para alcançar esse tipo de reutilização, vamos adicionar props. É assim que você passa props para um componente:
ReactDOM.render(
<Hello message="my friend" />,
document.getElementById("root")
);
Essa prop é chamada de message e tem o valor "my friend". Podemos acessar essa prop dentro do componente Hello referenciando this.props.message, da seguinte forma:
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.message}!</h1>;
}
}
Como resultado, isso é renderizado na tela:
A razão pela qual escrevemos {this.props.message} com chaves é porque precisamos informar ao JSX que queremos adicionar uma expressão JavaScript. Isso é chamado de escapar.
Agora temos um componente reutilizável que pode renderizar qualquer mensagem que desejarmos na página. Uau!
No entanto, e se quisermos que o componente possa alterar seus próprios dados? Nesse caso, devemos usar o estado (state) em vez disso!
State
A outra maneira de armazenar dados no React é no estado (state) do componente. E ao contrário das props - que não podem ser alteradas diretamente pelo componente - o estado pode ser.
Portanto, se você deseja que os dados em seu aplicativo sejam alterados - por exemplo, com base em interações do usuário - eles devem ser armazenados no estado de um componente em algum lugar do aplicativo.
Inicializando o estado
Para inicializar o estado, basta definir this.state no método constructor() da classe. Nosso estado é um objeto que, no nosso caso, possui apenas uma chave chamada message.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
Antes de definirmos o estado, precisamos chamar super() no construtor. Isso ocorre porque this está indefinido antes que super() seja chamado.
Alterando o estado
Para modificar o estado, basta chamar this.setState(), passando o novo objeto de estado como argumento. Faremos isso dentro de um método que chamaremos de updateMessage.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
Manipuladores de Eventos
O próximo passo é criar um botão para clicar, para que possamos acionar o método updateMessage().
Então vamos adicionar um botão ao método render():
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
Aqui, estamos adicionando um ouvinte de eventos ao botão, ouvindo o evento onClick. Quando isso é acionado, chamamos o método updateMessage.
Aqui está o componente completo:
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
}
O método updateMessage então chama this.setState(), que altera o valor de this.state.message. E quando clicamos no botão, é assim que isso será executado:
Parabéns! Agora você tem um entendimento básico dos conceitos mais importantes do React.
Para mais informações acesse o link da documentação oficial do React a seguir: