Estructura del Header

Clase 15 de 29 • Curso Práctico de React JS 2019

Resumen

Vamos a usar el Proyecto Final del Curso de Frontend Developer para dividir la aplicación en componentes y agregar interactividad con React.

Jonatan Ariste

student•

Que bueno porfin arrancamos a meter componentes y darle forma <3 muy interesante la configuración, es increíble que pasamos 13 videos para hacer a mano lo que hace create-react-app sin duda es necesario saberlo pero fue duro jejejeje

Oscar Barajas Tavares

Team Platzi•

Aprender a trabajar sin "Create React App" te da mejor contexto del tu proyecto, entiendes como esta construido y hacia donde puedes crecer tu aplicación.

Cesar Augusto Barco de Gouveia

student•

Pero también puedes editar la herramienta create-react-app a tu gusto.

Guillermo Loza Hernandez

student•

Github de curso-frontend-escuelajs: ++https://github.com/platzi/curso-frontend-escuelajs++

Carlos Mauricio Cuellar Rodriguez

student•

Gracias

Fernando Robles

student•

Windows Select all occurrances Ctrl+Shift+L

Emanuel De Freitas

student•

Gracias buen hombre.. te acabas de ganar una cerveza

Bernardo Aguayo Ortega

student•

thanks!

Cristian Córdova

student•

La primera vez que utilice CSS Grid en un proyecto hace 6 meses me voló la cabeza. Hoy crear mi primer componente "real" me ha hecho sentir muy feliz. Gracias Platzi <3

Bernardo Aguayo Ortega

student•

venga bro!

Ricardo Celis

teacher•

Puedes obtener los archivos del curso en el siguiente enlace: https://github.com/platzi/escuela-js/tree/feature/react

Bernardo Aguayo Ortega

student•

thanks prof!

Guillermo Loza Hernandez

student•

Extensión para vscode que ahorra mucho tiempo para hacer: imports, exports, etc. ++https://github.com/skyran1278/js-jsx-snippets++

Juan Luis Rojas León

student•

Js-Jsx Snippets

Camilo José Mezú Mina

student•

Les comparto el codigo del Header para que no lo tengan que buscar

import React from 'react'

const Header = () => {
    return(
        <header className="header">
            <img className="header__img" src="../assets/logo-platzi-video-BW2.png" alt="Platzi Video"/>
                <div className="header__menu">
                    <div className="header__menu--profile">
                        <img src="../assets/user-icon.png" alt=""/>
                            <p>Perfil</p>
                    </div>
                    <ul>
                        <li><a href="/">Cuenta</a></li>
                        <li><a href="/">Cerrar Sesión</a></li>
                    </ul>
                </div>
        </header>
    )
}

export default Header;

Tatiana Karina Valencia Hernández

student•

Thank U!

Gabriel Rodriguez

student•

Me siento más cómodo usando create-react-app y prepros. Sufrí demasiado intentando instalar node-sass y no pude porque el curso es viejo y se están empleando dependencias desactualizadas. Pero anyway, sigamos!

Enmanuel Castillo

student•

Me empieza a gustar React, porque lo empiezo a entender :0 jaja

Luis Felipe Medina Rodriguez

student•

Cristian Orozco Benjumea

student•

Wow GENIAL, ya veo la luz de cómo se mezcla html, css y JS en ReactJS. Además que también puedo crear los archivos en sass y hacerlos modulares igualmente.

Oscar Barajas Tavares

Team Platzi•

Esa es la finalidad de este curso, entender el proceso para unificar un proyecto en React

Ulises Lodi

student•

¿Alguien me ayuda con este error de consola al tratar de ejecutar? Ya intenté volver a instalar webpack y me fije en config pero no veo el error. Gracias

C:\Users\ulodi\OneDrive\Documentos\Ulises\Proyectos\React\PlatziVideo>npm run start

PlatziVideo@1.0.0 start C:\Users\ulodi\OneDrive\Documentos\Ulises\Proyectos\React\PlatziVideo webpack-dev-server --open --mode development

"webpack-dev-server" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! PlatziVideo@1.0.0 start: webpack-dev-server --open --mode development npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the PlatziVideo@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ulodi\AppData\Roaming\npm-cache_logs\2020-02-06T18_50_07_555Z-debug.log

Juan Castro

teacher•

Antes tienes que instalar webpack-dev-server con npm install --save webpack-dev-server.

Nicolás Neira Navarrete

student•

Una crítica constructiva sin ánimo de atacar ni nada... Dentro del curso se hace el cambio de plano muchas veces al profesor mientras explica, se da mucho enfásis en eso, a mi opinión sería mejor no hacer un cambio tan brusco y constante sino, quizás ubicarlo en un cuadro dentro de la imágen del editor de código ya que muchas veces cuando se hace el cambio no se termina de escribir el código o bien aunque se haya terminado de escribir sería bueno ver el código mientras el profesor explica.

Por lo demás el curso está excelente, Óscar es de mis profesores favoritos de Platzi,

Saludos!

Luis Ardani Ramírez Morales

student•

Pensé exactamente lo mismo, mientras uno trata de leer y analizar el código este tipo de cambio causa una mala sensación. La opción de acomodar la toma cámara en un extremo de la pantalla me parece una buena idea,

Christian Perez

student•

Al fin! Ya no veo create-react-app como si fuese magia oscura.

Edgar Bautista Cabrera

student•

Instalé esta extensión:

Simple React Snippets

Ayuda con algunos shortcuts, por ejemplo:

imr -> import React from 'react'; imrc -> import React { Component } from 'react'; ccc -> Crea una clase con constructor

espero que les sirva

Laura Camila Pregonero

student•

Este es mi codigo!! ............

................................

Julio Manuel Valdés Alcántara

student•

Hola, ¿Me podrías compartir que tema de color usas en Visual Estudio Code?

José Ocando

student•

las reglas de eslint me dan muchos problemas, de esa manera se usan en la industria?

Javier Armando Vargas Vega

student•

Me ocurre lo mismo. Debe haber algún error en la configuración.

Enrique Mejía Cano

student•

Me sucede lo mismo.

Karl Behrens Gil

student•

El primer paso a un gran proyecto

Saul Felipe Ramirez

student•

Siempre que vaya a desarrollar en React ¿es necesario o es buena practica primero hacer el html fuera del proyecto como un proyecto de html y css. O en ocasiones se hace directamente desde acá?

Oscar Barajas Tavares

Team Platzi•

Ambas funcionan, según el proyecto, en lo personal yo construyo primero la estructura de componentes y al final el CSS.

Depende mucho del proyecto, equipo y como se establecen los lineamientos de trabajo.

Pero una buena o mala práctica no es.

Óscar Jesús Luna Hernández

student•

Por si a alguien le da problemas el poner "" en los atributos de las etiquetas en los jsx, pueden modificar la regla en el archivo .eslintrc, primero buscan el valor prefer-single de jsx-quotes y cambiarlo por prefer-double

"jsx-quotes": [
        2,
        "prefer-double"
      ],```

Geovanny Álvarez

student•

A alguien más le pasa que al utilizar la extensión jsx no me deja enviar el componente sin un return()

Estructura del Header

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue