DEV Community

Ana Beatriz
Ana Beatriz

Posted on • Edited on

25 11

Uma rápida introdução sobre React.js em 5min.

Esse tutorial é inteiramente traduzido e adaptado por mim, então o conteúdo não é inteiramente meu!!! Mas como eu achei muito interessante, resolvi deixar no meu site (https://anabneri.com.br/), porque me ajudou e creio que pode ajudar mais pessoas! ENJOY DUDES

A configuração

Ao começar a utilizar 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, como esta:

Alt Text

Também importamos Babel, já que o React usa algo chamado JSX para escrever marcações. Vamos precisar transformar esse JSX em JavaScript simples, para que o navegador possa entendê-lo.

Há mais duas coisas que vocês precisam observar:

  1. a <div> com o ID de #root. Este é o ponto de entrada para o nosso aplicativo. Este é o lugar onde todo o nosso aplicativo vai viver.
  2. o < script type = "texto/babel " > tag no corpo. É aqui que escreveremos o nosso código React. js.

Se você quiser experimentar com o código, confira este playground Scrimba.

Componentes/ Components

Tudo em REACT é um componente, e estes geralmente tomam a forma de classes JavaScript. Você cria um componente estendendo-se sobre a classe react-component. Vamos criar um componente chamado Eai rapaziada.

Alt Text

Então é aqui que conectamos nosso componente Hello com o ponto de entrada para o aplicativo (<div id="root"></div>). Isso resulta:

Alt Text

A sintaxe de HTML'ish que apenas olhou para (<h1> e <Hello/>) é o código JSX que mencionei anteriormente. Não é realmente HTML, embora o que você escreve lá acaba como Tags HTML no DOM.

O próximo passo é obter o nosso aplicativo para manipular dados.

Manipulação de dados

Existem dois tipos de dados no React: props e State. A diferença entre os dois é um pouco complicado de entender no início, por isso não se preocupe se você encontrá-lo um pouco confuso. Vai se tornar mais fácil quando você começar a trabalhar com eles.

A principal diferença é que o estado é privado e pode ser alterado de dentro do próprio componente. Os adereços são externos e não são controlados pelo próprio componente. Ele é passado de componentes acima da hierarquia, que também controlam os dados.
"um componente pode alterar seu estado interno diretamente. Ele não pode mudar seus adereços diretamente."

Vamos dar uma olhada mais de perto em props/adereços primeiro.

Props/ Adereços

Nosso componente Hello é muito estático e renderiza a mesma mensagem independentemente. Uma grande parte do REACT é a reutilização, o que significa a capacidade de escrever um componente uma vez e, em seguida, reutilizá-la em casos de uso diferentes — por exemplo, para exibir mensagens diferentes.

Para alcançar esse tipo de reutilização, adicionaremos adereços. É assim que você passa adereços para um componente:

Alt Text

Este prop é chamado de message e tem o valor "my friend". Podemos acessar este prop dentro do componente Hello referenciando this. props. Message, assim:

Alt Text

Como resultado, isso é renderizado na tela:

Alt Text

A razão pela qual estamos escrevendo {this. props. Message} com chavetas é porque precisamos informar ao JSX que queremos adicionar uma expressão JavaScript. Isto é chamado * * escapando * *.

Então agora temos um componente reutilizável que pode renderizar qualquer mensagem que quisermos na página. Woohoo!

...

Continue lendo no meu site Reactjs em 5 minutos completo

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay