veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.

Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.

Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.

Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.
Nesta aula, exploramos como criar componentes de formulário reutilizáveis em React Native, focando na tipagem segura e gestão eficiente de estado.
Utilizamos TypeScript para criar uma tipagem segura para nosso formulário de produtos:
1type IProductForm = Record<keyof Omit<IProduct, "_id">, string>;Esta abordagem:
_id que não precisamos no formulárioIProductstring (adequado para inputs)Configuramos o estado do formulário com valores iniciais:
1const [value, setValue] = useState<IProductForm>(initialForm);Onde initialForm contém:
1const initialForm: IProductForm = {
2 name: "",
3 description: "",
4 price: "",
5 // outros campos do produto
6}; Criamos um componente genérico com as seguintes props:
1interface InputTextProps {
2 label: string;
3 value: string;
4 onChangeText: (text: string) => void;
5 placeholder?: string;
6 secureTextEntry?: boolean;
7} Implementação básica:
1const InputText = ({ label, value, onChangeText, placeholder, secureTextEntry = false }: InputTextProps) => (
2 <View style={styles.container}>
3 <Text style={styles.label}>{label}</Text>
4 <TextInput style={styles.input}
5 value={value}
6 onChangeText={onChangeText}
7 placeholder={placeholder}
8 secureTextEntry={secureTextEntry} />
9 </View>
10);Como usar o InputText no formulário principal:
1<InputText label="Nome do Produto" value={value.name} onChangeText={(newValue) => {
2 const copy = {...value};
3 copy.name = newValue;
4 setValue(copy);
5}} placeholder="Digite o nome do produto" />Padrão importante:
Principais benefícios desta abordagem:
Para evoluir esta implementação: