Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¬ŅQu√© es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¬ŅQu√© son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports din√°micos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¬ŅQu√© es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Par√°metros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¬ŅQu√© es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la p√°gina

28

Creando la p√°gina Detail

29

Agregando un NavBar a nuestra app

30

Estilando las p√°ginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores pr√°cticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¬°Felicidades!

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de React Avanzado

Curso de React Avanzado

Miguel √Āngel Dur√°n

Miguel √Āngel Dur√°n

Estilando el formulario

34/50
Recursos

Aportes 16

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Así me quedo

Dise√Īando el Sign in y Sign up con validaci√≥n y efecto de rotaci√≥n de formulario ūüėÉ

Mi dise√Īo:

Styles.js

import styled from 'styled-components'

export const Form = styled.form`
  padding: 16px 0;
`

export const Input = styled.input`
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 8px;
  padding: 8px 4px;
  display: block;
  width: 100%;
`

export const Button = styled.button`
  background: #8d00ff;
  border-radius: 3px;
  color: #fff;
  height: 32px;
  display: block;
  width: 100%;
  text-align: center;
`

export const Title = styled.h2`
  font-size: 16px;
  font-weight: 500;
  padding: 8px 0;
` 

El mío quedo así

Me gusto demasiado que en este curso todo se hace en el momento y no traen cosas hechas que copian y pegan!. Experiencia de estudiante 1000 puntos!!!

Asi va quedando el login

Hago uso del hook useLocation de React Router DOM, para identificar si el usuario está en la pagina de registro o de login, y de acuerdo al pathname, se renderiza un texto para crear una cuenta o para iniciar sesión.
.

.

import { Fragment } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { FaRegUserCircle } from 'react-icons/fa'
import { Form, Input, Button, Title, FormWrapper, Text } from './styles'

import { useForm } from '../../hooks/useForm'

export const UserForm = ({ onSubmit, title }) => {
  let location = useLocation()
  const initialState = {
    email: '',
    password: ''
  }

  const [state, onChange] = useForm(initialState)
  const { email, password } = state

  const BottomText = () => (
    location.pathname === '/register'
      ? <Text>¬ŅYa tienes cuenta? <Link to='/login'>Inicia Sesi√≥n.</Link></Text>
      : <Text>¬ŅA√ļn no tienes cuenta? <Link to='/register'>Crea una cuenta.</Link></Text>
  )

  return (
    <Fragment>
      <FormWrapper>
        <Title><FaRegUserCircle /></Title>
        <Form onSubmit={onSubmit}>
          <Input
            type='text'
            placeholder='Email'
            name='email'
            value={email}
            onChange={onChange}
          />
          <Input
            type='Password'
            placeholder='Password'
            name='password'
            value={password}
            onChange={onChange}
          />
          <Button type='submit'>{title}</Button>
        </Form>
        <BottomText />
      </FormWrapper>
    </Fragment>
  )
}

Genial, ya quiero llegar a las bases de datos :3

como uso sass!!

Fragment

<>
code
</>

me arroja este error, alguien me puede ayudar?

WARNING in ./src/container/ListOfPhotoCards.js 3:30-40
"export 'withPhotos' was not found in '../hoc/withPhotos'
 @ ./src/pages/Home.js
 @ ./src/App.js
 @ ./src/index.js
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] /mnt/c/Users/SAMSUNG/Documents/PLATZI/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 535 bytes {HtmlWebpackPlugin_0} [built]
‚ĄĻ ÔĹĘwdmÔĹ£: Compiled with warnings.```

Así va hasta el momento:)

¬ŅSer√≠a una mala practica colocar el <h2> dentro del <Form> ? ūü§Ē

ni siquiera poniendo el video a 0.5 puedo seguir al profesor cuando escribe css xD

Hola, les dejo el avance de mi repositorio para este proyecto hecho en Nextjs:

https://github.com/danyel117/petgram-platzi/tree/userform