Aprenda React From Scratch – Curso React com projetos

Corujão Cursos Online

CURSOS POPULARESOUTROS CURSOS



Aprenda o básico do React neste curso do zero. Você criará quatro projetos passo a passo e aprenderá os fundamentos para começar a criar aplicações web interativas com React. ✏️Curso criado por: Estefania Cassingena Navone. Siga-a no Twitter https://twitter.com/EstefaniaCassN. . . . 💻 Código no GitHub: 🔗 Projeto 1: https://github.com/estefaniacn/testimonios-freecodecamp
🔗 Projeto 2: https://github.com/estefaniacn/contador-de-clics-freecodecamp
🔗 Projeto 3: https://github.com/estefaniacn/calculadora-react-freecodecamp
🔗 Projeto 4: https://github.com/estefaniacn/aplicacion-tareas-react
🔗 Componentes da aula do Projeto 1:https://github.com/estefaniacn/testimonios-freecodecamp-clase
🔗 Componentes da aula do Projeto 2: https://github.com/estefaniacn/contador-de-clics-clase

📌 Aprenda a programar gratuitamente com freeCodeCamp: https://www.freecodecamp.org/espanol/

💡 Cursos: HTML e CSS: https://www.youtube.com/watch?v=XqFR2lqBYPs
JavaScript: https://www.youtube.com/watch?v=ivdTnPl1ND0

⭐️ Conteúdo ⭐️ 00:00:00 Introdução 00:00:36 Projetos 00:02:20 Estrutura do curso 00:04:05 Conhecimento prévio necessário para o curso 00:04:45 O que é React? Vantagens do React 00:07:49 Conceitos básicos do React 00:23:52 Baixe e instale o Node.js 00:28:58 Documentação oficial do React 🔹 Introdução ao JSX 00:29:35 O que é JSX? 00:34:18 Elemento no React 00:34:51 Diferenças entre elemento e componente 00:36:19 Introdução ao react-dom e DOM 00:38:09 Elementos HTML que podem ser usados ​​00:39:05 Como reconhecer elementos e componentes 00:40:09 Atributos 00:47:45 Estrutura JSX com elementos aninhados 00:49:01 Como renderizar componentes e elementos 00:52:47 Tags de fechamento automático 00:53:59 Inserir JavaScript em JSX 🔹 Estrutura inicial 00: 56:59 Crie a estrutura básica com create-react-app. 🔹 Projeto 1: Clone de Depoimentos do freeCodeCamp 01:26:22 Início do Projeto 01:26:55 Crie a Estrutura Inicial 01:29:27 Identifique os Componentes 01:32:04 Crie um Componente 01:42:28 Prepare o Projeto 01 :50:17 Mostrar um componente 01:53:14 Importar um componente 01:54:40 Exportar um componente 01:58:28 React Tools 01:59:16 Exportação nomeada 02:01:26 Atribuir estilos com CSS 02: 21: 01 Receber adereços em um componente 02:25:59 Passar adereços para um componente 02:29:32 Personalizar a imagem 02:36:56 Texto em negrito 02:42:07 Revisão final e ferramentas de reação 🔹 Projeto 2: Contador de cliques 02: 49:19 Início do projeto 02:50:56 Criação da aplicação 02:53:32 Preparação do projeto 02:55:58 Importação de imagens 03:00:06 Atribuição de estilos com CSS 03:05:07 Criação do botão 03:06 :45 Adereços de botão 03:07:21 Sintaxe de desestruturação 03:08:31 Classe baseada em condição 03:11:46 Atribuir ouvinte de evento 03:14:50 Criar botões 03:17:39 Definir função em um componente 03:20:15 Passar funcionar como suporte 03:24:36 Funções de teste 03:25:28 Estilos para botões 03:31:04 Componente de contador 03:33:40 Adicionar contador 03:39:05 Ferramentas React 03:39:37 Atualizar o contador 03:49 :29 Desafios e Comentários Finais 🔹 Projeto 3: Calculadora Interativa 03:52:03 Início 03:53:32 Criação da aplicação 03:55:30 Adaptação do projeto 03:58:25 Início do projeto 04:05:23 Container principal 04 :08:16 Estrutura da calculadora 04:09:43 Crie os componentes 04:11:27 props.children 04:15:20 Atributos do botão 04:19:15 Defina uma função 04:21:06 Teste o botão 04:24:11 Estilo para o botão 04:29:03 Crie os botões 04:33:37 Componente da tela 04:38:37 Estilo para a tela 04:43:06 Botão Limpar 04 :46:56 Estilo para o botão Limpar 04:51:08 Mostrar entrada na tela 04:55:31 Atribuir ouvinte de evento 05:02:44 Ouvinte de evento para o botão limpar 05:06:38 Calcular o resultado 05:13: 52 Lidar com entrada vazia 05:17:48 Desafios e comentários finais 🔹 Projeto 4: Aplicação de Tarefas 05:26:43 Início do Projeto 05:28:22 Criação da aplicação 05:30:44 Adaptação do projeto 05:33:22 Logotipo e cor de fundo 05:37:02 Estilo inicial 05:41 :38 Lista de tarefas 05:45:09 Confirmar família de fontes 05:46:10 Componente de tarefa 05:50:00 Estilo para tarefa 05:55:59 ícones de reação 06:03:18 adereços concluídos 06:05:23 Estilo para tarefa concluído 06:07:09 Componente do formulário 06:10:30 Estilo do formulário 06:14:12 Adicionar um formulário 06:15:42 Componente da lista de tarefas 06 :17:07 Trechos 06:19:11 Estilo da lista de tarefas 06:21 :51 Status da lista de tarefas 06:23:30 Mostrar lista de tarefas 06:26:28 Novos adereços para tarefa 06:30:32 Adicionar tarefa 06:34:22 Gerenciar alterações 06:39:59 Gerenciar envio 06:43:29 Gerar IDs para tarefas 06:52:39 Chave para cada tarefa 06:54:47 Cores para tarefas 06:56:27 Atualização automática 06:57:29 Excluir tarefa 07:00:37 Tarefa concluída 07:04:56 Desafios e comentários finais 🔹 Componentes da aula 07:11:58 Introdução aos componentes da classe 07:29:25 Projeto de depoimentos do FreeCodeCamp com componentes da classe 07:42:34 Projeto de contador de cliques com componentes da classe 08:10:16 Fim do curso

source

cursos

44 comentários em “Aprenda React From Scratch – Curso React com projetos”

  2. 📌 En el min 6:47:11 no entiendo lo siguiente:

    Sé que los props se pasan usando <p>Edad: {props.edad}</p>, pero en este curso se muestra un uso como el siguiente manejarSubmit(nuevaTarea); dentro del código js. Lo que vemos es que un prop se está usando como una función al que se le pasa un argumento y estos datos se van al componente padre. Esto me confunde porque vi que solo los padres pueden enviar información a un componente hijo usando props. 😬

    Responder

  7. Acabo de terminar el curso, esta genial, el reto de almacenar las tareas de manera que cuando el usuario vuelva a la web me interesa bastante. Alguien me podría guiar un poco? (Si puedes tú Estef jajaj) Se tendría que guardar la ip de quien a ingresado en la página o como?? Muchas gracias de antemano

    Responder

  10. ¿Que es react? 4:50
    Biblioteca: 5:30
    Ventajas: 6:30
    Conceptos Básicos: 8:00
    Componentes: 8:00
    Componentes funcionales: 10:20
    Características de componentes funcionales: 11:40
    Props: 12:45
    Componente de clase: 15:30
    Estado: 18:30
    ¿Por que componentes de clases? 19:50
    Hooks: 20:40
    Event listener: 22:20
    Conceptos mas importantes: 23:15
    Instalación node.js: 24:10
    JSX: 29:50
    Elementos en JSX: 34:20
    reactDOOM: 36:50
    Sintaxis componentes vs elementos: 39:20
    Atributos: 40:10
    class y className: 41:30
    styles: 42:30
    Atributos del DOM: 47:30
    Estructura de un componente: 47:50
    Renderizar componentes: 49:00
    Self-Closing TAGs: 52:50
    Crear una aplicación de react: 57:00
    Iniciar una aplicación inicial de React: 1:00:00
    Node_modules: 1:07:40
    Public: 1:08:10
    manifest.json 1:12:30
    robots.txt 1:13:20
    .gitignore 1:13:50
    packaga_lock.json 1:14:30
    json 1:14:30
    packaga.json 1:15:40
    readme. md 1:16:10
    SRC 1:16:40
    App.js 1:19:00
    App.test.js 1:20:28
    Primer Proyecto (Testimonios): 1:26:28
    Identificar los componentes: 1:29:27
    Herramientas de React 1:58:29
    Exportación nombrada 1:59:18
    Asignar estilos con CSS 2:01:26
    02:21:01 Recibir props en un Componente

    02:25:59 Pasar props a un Componente
    02:29:32 Personalizar la Imagen
    02:36:56 Texto en Negrita
    02:42:07 Revisión Final y Herramientas de React

    Segundo proyecto (Contador de clicks) 2:49:20
    Check: 2:53:29

    Responder

  11. Wow!! Termine el curso, gracias a Estefanía y toda la comunidad de freeCodeCamp a la cual me sumo. El video es sumamente práctico y bien explicado, lo recomiendo. Hice los proyectos y algunos retos, pero lo más importante fue que aprendí mucho 😄

    Responder

  13. una pregunta estoy usando react cuando hago unos de tus programas de Hook marca error y cuando cancelo el servidor del mismo corre muy bien aque se deve eso ? esta es el error Line 11:43: React Hook "useState" is called in function "contador" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

    Search for the keywords to learn more about each error. te presento tu codigo const [numeroclick, setNumeroClick] = useState(0);

    const manejarClick =() => {

    setNumeroClick(numeroclick + 1);

    };

    const reiniciarContador = () => {

    setNumeroClick(0);

    };

    return(

    <Fragment>

    <div className="logo-contador">

    <img

    className="logo-imagen"

    src={"imagen/victoiria.png"}

    >

    </img>

    <div className="contenedor-contador">

    <Conteo numeroclick = {numeroclick} ></Conteo>

    <Boton texto='Clic'

    esBotonDeClic={true}

    manejarClic={manejarClick}>

    </Boton>

    <Boton

    texto='Reinicial'

    esBotonDeClic={false}

    manejarClic={reiniciarContador} >

    </Boton>

    </div>

    </div>

    </Fragment>

    Responder

  20. Estefania, este curso es fabuloso, nada que ver con otros cursos que he visto. Te agradezco enormemente el esfuerzo que has realizado, necesitaba aprender React y tu lo has conseguido. Me encanta tu dicción y tu capacidad de sintetizar los conceptos justo en el punto exacto. Muchas, muchas, muchas gracias.

    Responder

  26. en el parte onSubmit 6:47:45 en el proyecto 4 me sale que props.onSubmit is not a function nose porque si lo hice igual que la persona del video e incluso me meti al github y copie el trabajo desde ahi y me sale lo mismo la verdad nose que sea por si me pueden ayudar gracias 🙂

    Responder

  28. Hola Estef, sabes que me quedo una duda que no logro discernir; ya que tu dices que los props se heredan solo de padre a hijo, pero en el caso del 'Mostrar input por pantalla de la calculadora', el padre vuelve a llamar a una subfuncion para levantar el valor desde el hijo con props.children y setearlo por concatenación en el input. Eso no esta mal?

    Responder

  29. Buenísimo!!! a la calculadora le agregué dos cosas, una transition cuando presiona cualquier botón hace el efecto de hundirse con el hover :active y le agregue un botón más con la función de borrar el último carácter que puse, por las dudas que haya cometido el error de apretar el botón y no tener que hacer Clear y borrar todo si el error ha sido pequeño. Muchas gracias por estos cursos!!!

    Responder

  32. Hola me sale este error colocando este comando npm create-react-app my-app
    Error al ejecutar el programa 'npm.cmd': El sistema no puede encontrar el archivo

    especificadoEn línea: 1 Carácter: 1

    + npm create-react-app my-app

    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~.

    En línea: 1 Carácter: 1

    + npm create-react-app my-app

    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~

    + CategoryInfo : ResourceUnavailable: (:) [], ApplicationFailedException

    + FullyQualifiedErrorId : NativeCommandFailed
    ya no se que hacer para solucionarlo

    Responder

  37. Ya el npx create-react-app no funciona, hay que utilizar framework externos, un poco complicado para quiénes no tengan algún conocimiento, pero en otros vídeos te explican de forma detallada como utilizarlos, yo en especial estoy utilizando Vite, cambia un poco la sintaxis de los elementos que te exporta por defecto, pero siguen siendo lo mismo.

    Responder

  43. alguien me podría explicar como hacer para ver en nuestro navegador la app que hayamos creado en react ? porque antes, utilizando htm css y javascript, hacíamos click en el index de la carpeta y podíamos ver la creación, pero con react, no se….

    Responder

Deixe um comentário

Somos o Corujão Cursos Online, um site de divulgação gratuita de cursos online ou comumente chamado de EAD “A distancia.” Nossa ligação com as vagas de cursos aqui divulgado livre e não temos ligação direta com as respectivas empresas que oferecem os curso. Nossa missão é levar ate você a informação de que os cursos encontram-se disponiveis para matricula. Em caso de uma empresa parceira; nossa ligção será somente para tirar duvidas e em caso de não está a nossa alçada encaminharemos para o site ou empresa parceira.

© Corujão Cursos Online

Política de Privacidade Termos de Uso