React Native: Uma Aventura no Mundo dos Componentes

Por /

React Native é uma das bibliotecas mais populares para construir interfaces móveis de maneira eficiente! Ele permite que desenvolvedores usem JavaScript e React para criar aplicativos nativos tanto para Android quanto para iOS. Hoje, vamos embarcar em uma jornada pelos conceitos fundamentais do React Native:

✅ Components – Os blocos de construção da interface
✅ JSX – A mágica que mistura JavaScript com HTML
✅ Props – A comunicação entre componentes
✅ State – O motor que dá vida ao app

É recomendável que já se obtenha uma boa base em programação geral para uma melhor leitura desse post. Preparado? 🎉

🏗️ Components

Os Components são como blocos de LEGO 🧱 cada peça tem uma função e, juntas, elas formam uma interface.

📌 Criando Nosso Primeiro Componente

Vamos supor que queremos criar um component que exiba uma mensagem de boas-vindas. Podemos definir isso da seguinte forma:


import { Text } from 'react-native';

const Hello = () => {
return <Text>Olá, mundo! 🌍</Text>;
};
export default Hello;

🤔 O que está acontecendo aqui?
✅ Importamos o component Text do React Native para exibir texto na tela.
✅ Criamos um component funcional chamado Hello.
✅ Retornamos um elemento JSX que exibe o texto “Olá, mundo! 🌍”.
✅ Exportamos o Hello para usá-lo em outros arquivos.

E pronto! Criamos nosso primeiro bloco de construção. Fácil, né? 😃

🎨 JSX

JSX é como um superpoder que permite escrever HTML dentro do JavaScript! Isso facilita muito a criação de interfaces.

💡 Veja a diferença entre escrever com JSX e sem JSX:

✅ Com JSX (Fácil e Bonito)


<Text>Hello, World! 🌍</Text>

❌ Sem JSX (Mais Complicado)


React.createElement('Text', null, 'Hello, World! 🌍');

Usar JSX é como escrever na língua dos computadores, só que de um jeito mais natural! 💬💻

📦 Props

As Props são como pacotes de informação 📦 que enviamos para os componentes. Elas permitem personalizar a interface.

Imagine o component Hello. Agora queremos que ele exiba um nome diferente para cada usuário. Podemos fazer isso com Props!


const Hello = (props) => {
return <Text>Olá, {props.name}! 👋</Text>;
};

const App = () => {
return (
<View>
<Hello name="Alice" />
<Hello name="Bob" />
</View>
);
};

export default App;

✨ O que está acontecendo?
✅ props.name recebe o valor passado para o componente (Alice ou Bob).
✅ O texto é renderizado dinamicamente para cada usuário.

Agora, sempre que chamarmos Hello com um nome diferente, o componente exibirá uma mensagem personalizada!

🏛️ State

O State é o que dá vida ao nosso componente! Ele representa o estado interno da interface e pode mudar ao longo do tempo, geralmente em resposta às interações do usuário.

📌 Imagine que temos uma lista de amigos e queremos permitir que o usuário curta cada um quantas vezes quiser. Para isso, vamos criar um botão de “Curtir” para cada nome, e sempre que ele for pressionado, o número de curtidas será atualizado!


import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Friend = ({ name }) => {
const [likes, setLikes] = useState(0);

return (
<View style={{ marginBottom: 10 }}>
<Text>{name} recebeu {likes} curtidas! ❤️</Text>
<Button title="Curtir 👍" onPress={() => setLikes(likes + 1)} />
</View>
);
};

const App = () => {
return (
<View>
<Friend name="Alice" />
<Friend name="Bob" />
<Friend name="Charlie" />
</View>
);
};

export default App;

🧐 O que está acontecendo aqui?
1️⃣ Criamos um component Friend, que recebe um nome (name) como propriedade.
2️⃣ Dentro do Friend, usamos o useState(0) para definir o número inicial de curtidas como zero.
3️⃣ Criamos um botão “Curtir 👍” que, ao ser pressionado, atualiza o estado (likes), somando +1.
4️⃣ No App, chamamos o component Friend três vezes, cada um com um nome diferente.

Agora, toda vez que o usuário curtir um amigo, a contagem será atualizada apenas para aquele amigo, mostrando como cada component gerencia seu próprio estado! 🥳

🚀 Conclusão

E aí, gostou de ficar antenado sobre a base do React Native? 🎢

Com os conceitos de ✅Components, ✅JSX, ✅Props e ✅State, você já pode começar a se arriscar e rabiscar algumas interfaces com o Expo de forma online.
Cadastre-se e começa a se divertir codando.🚀 Programação só se aprende praticando!🔥

Nos próximos posts explorararemos mais o vasto mundo do React Native!😃

Eu estou sempre em construção e você?

Rolar para cima