Construa um site de comércio eletrônico personalizado em React + Conceitos básicos de JavaScript

Construa um site de comércio eletrônico totalmente personalizado com categorias de produtos, carrinho de compras e página de checkout em React.

Este curso o guiará passo a passo pelo processo de construção de uma calculadora totalmente funcional em React. React, também conhecido como React JS, é uma poderosa biblioteca JavaScript usada para construir interfaces de usuário personalizadas e interativas usando componentes de interface do usuário. Alguns dos exemplos mais conhecidos de organizações que usam o React para o front-end incluem Netflix, Facebook e Airbnb. Desenvolvido e mantido pela Meta junto com uma comunidade de desenvolvedores independentes, o React continua sendo gratuito e de código aberto. O React é uma biblioteca baseada em componentes construída inteiramente em JavaScript, o que a torna perfeita para projetar interfaces de usuário complexas. Com o React, os desenvolvedores podem construir componentes encapsulados que gerenciam eficientemente seu próprio estado e renderizam atualizações de interface do usuário especificamente quando os dados mudam. Por exemplo, pense na função de atualização automática de conteúdo que você vê em um feed do Twitter ou no botão de curtir do Facebook. Aqui, o estado do componente de interface do usuário muda na página, sem precisar atualizar manualmente quando os dados são atualizados. Esta é apenas uma pequena, mas poderosa, funcionalidade do React. Através de um projeto prático completo, este curso ensinará todos os princípios fundamentais do React que você precisa conhecer para se tornar um desenvolvedor React proficiente. Começamos desde o básico, incluindo as ferramentas necessárias para começar. A partir daí, mergulhamos no JSX, componentes funcionais, props, callbacks e vários eventos OnClick. Nesta fase, a calculadora terá uma exibição visual completa, combinada com operações aritméticas funcionais. Os alunos então passam a passar parâmetros em funções de retorno de chamada, usando o React State Hook e depuração. Além do módulo prático do React, também oferecemos uma visão geral abrangente do JavaScript para aqueles que precisam de uma revisão. Aqui começamos apresentando aos alunos o modelo de objeto de documento (DOM), que define a estrutura lógica dos documentos HTML. A partir daí, mergulhamos no JavaScript para demonstrar vários métodos nos quais os elementos do DOM podem ser manipulados para adicionar interatividade a componentes estáticos. Começamos desde o básico, que inclui a colocação do JavaScript e a saída de dados. A partir daí, passamos para a declaração de variáveis, operações aritméticas, precedência de operadores, tipos de dados e objetos. Uma vez que as bases são cobertas, passamos para operações mais complexas usando Arrays, Declarações Condicionais, operadores de comparação JavaScript, booleanos e loops. Aqui, os alunos aprenderão a liberar o verdadeiro poder do JavaScript para renderizar resultados diferentes com base na interação do usuário. Exploraremos o uso de funções para lidar eficientemente com tarefas repetitivas e eventos JavaScript para lidar com a saída com base em ações e ocorrências. A seção será concluída com um projeto prático em que os alunos implementarão seus conhecimentos para construir uma galeria de fotos baseada na web e um trocador de cor de plano de fundo.

O que você aprenderá

- Introdução ao Modelo de Objeto de Documento (DOM) - Os fundamentos do JavaScript - Operações aritméticas em JavaScript - Trabalhando com Arrays, Funções e Loops em JavaScript - Variáveis, Eventos e Objetos em JavaScript - Prática de JavaScript - Construa uma galeria de fotos e um trocador de cor de plano de fundo - Fundamentos do React - Como estruturar um projeto React existente - Introdução ao JSON Server - Estilizando uma loja de comércio eletrônico em React e construindo as categorias da loja - Introdução ao Fetch API e React Router - O conceito de Contexto no React - Construindo um recurso de pesquisa em React - Validando formulários em React