Curso de React.js

Curso de React.js

Instruido por:
Richard Kaufman
Richard Kaufman
Básico
5 horas de contenido
Ver la ruta de aprendizaje
Platzi Badges
Proyecto del curso
Platzi Badges

Crearás una plataforma para llevar registro de los asistentes a la Platzi Conf, haciendo posible que cada usuario registrado pueda ingresar su información personal. Cada uno de ellos tendrá un rol diferente y esto se verá reflejado en su badge. Por último, crearás una página que permitirá listar a todos los participantes y filtrarlos por tipo de rol, o hacer búsqueda por nombre.

Curso de React.js

Curso de React.js

Progreso del curso:0/37contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/37contenidos(0%)

Introducción a React.js

Material Thumbnail

¿Qué es React.js?

06:25 min

Material Thumbnail

Pre-requisitos

02:43 min

Material Thumbnail

Herramientas que usaremos

04:07 min

Material Thumbnail

Create-react-app

05:39 min

Fundamentos

Material Thumbnail

Clonar el código de GitHub

02:12 min

Material Thumbnail

ReactDOM.render

06:00 min

Material Thumbnail

JSX

10:08 min

Creación y diseño de componentes

Material Thumbnail

¿Qué es un componente?

05:16 min

Material Thumbnail

Qué es y cómo funciona un componente en React.js

Material Thumbnail

Nuestro primer componente

09:42 min

Material Thumbnail

Cómo aplicar estilos

08:55 min

Material Thumbnail

Nuestra primera página

10:25 min

Material Thumbnail

Enlazando eventos

09:02 min

Material Thumbnail

Levantamiento del estado

11:26 min

Material Thumbnail

Listas de componentes

11:03 min

React Router

Material Thumbnail

Introducción a React Router

07:17 min

Material Thumbnail

División de la aplicación en rutas

09:18 min

Material Thumbnail

Mejorando la User Interface con un Layout

10:57 min

Component Lifecycle

Material Thumbnail

Introducción del ciclo de vida de un componente

06:21 min

Material Thumbnail

Práctica del ciclo de vida

09:36 min

Llamadas a un API

Material Thumbnail

Introducción llamadas a un API

03:30 min

Material Thumbnail

React.js: Cómo traer datos de un API en React

12:40 min

Material Thumbnail

Solicitando datos (GET)

12:12 min

Material Thumbnail

Mejorando la Experiencia de Usuario durante una petición

07:19 min

Material Thumbnail

Enviando datos (POST)

12:03 min

Material Thumbnail

Manejando los estados de la petición durante el POST

07:12 min

Material Thumbnail

Actualizando datos (PUT)

10:35 min

Material Thumbnail

Actualizaciones automáticas

07:27 min

Mejorando la UI

Material Thumbnail

Los detalles de un Badge

12:54 min

Material Thumbnail

UI Components y Container Components

06:01 min

Conclusion

nuevosmás votadossin responder
Nazareno Aznar Altamiranda
Nazareno Aznar Altamiranda
Estudiante

Consulto, ¿Hay alguna diferencia práctica o de velocidad al usar una funcion normal y una arrow function? en el caso de los métodos de una clase me parece más sencillo utilizar la forma tradicional metodoEjemplo() antes que una arrowFunction = () => y si bien eso es gusto de cada quien me gustaría saber si hay una razon práctica por la cual se prefiera usar arrow function dentro de una clase

0
Luis Felipe Silgado Cortazar
Luis Felipe Silgado Cortazar
Estudiante

De pura costumbre hice mi comparación de “loading” así:
if(loading){}
en lugar de:
if(loading===true)

Entiendo la diferencia entre ‘’ y '=’ pero, ¿Para este caso la sintaxis que tengo sería equivalente a ‘’ o a '=’?

0
Saul Alejandro Sanchez Garcia
Saul Alejandro Sanchez Garcia
Estudiante

Si quiero agregar un footer a todas mis paginas quedaria asi?
function Layout(props) {
return(<div>
<NavBar/>
{props.children}
<Footer/>
</div>)}

0
Sura Naileth Cedeño Lopez
Sura Naileth Cedeño Lopez
Estudiante

a uds les funciona la extensión de chrome de react dev tools porque a mi no:(

2
Fredy Gonzalez Garcia
Fredy Gonzalez Garcia
Estudiante

ayuda me sale un ERROR: “client” exited with 1.
que hago?? ayudaaaa

1
Alejandro Díaz Roque
Alejandro Díaz Roque
Estudiante

Podría usarse html semántico?

0
Isaías Fernández
Isaías Fernández
Estudiante

Hola, alguien sabe para qué sirve el método

this.fetchData()

Que utiliza Richard dentro del método?

componentDidMount (){
}
1
Alberto Castro Flores
Alberto Castro Flores
Estudiante

Que curso recomiendan para saber como hacer llamados a APIS con react?

0
Josue Alonso
Josue Alonso
Estudiante

Hola, y el pdf layout?

1
Alberto Castro Flores
Alberto Castro Flores
Estudiante

Me sucede algo extranio, me aparece este error en el navegador:

TypeError: Cannot read property 'firstName' of undefined
BadgeDetails.render
src/pages/BadgeDetails.js:52
  49 |             <imgsrc={confLogo}alt="Logo de la conferencia"/>
  50 |         </div>
  51 |         <divclassName="col-6 BadgeDetails__hero-attendant-name">
> 52 |             <h1>{this.state.data.firstName}{this.state.data.lastName}</h1>
     | ^  53 |         </div>
  54 |     </div>
  55 | </div>

pero cuando cambio data: undefined a data: {} me muestra la informacion normal, que esta pasando?

este es el codigo de BadgeDetails:

import React from"react"import confLogo from"../images/platziconf-logo.svg"import"./styles/BadgeDetail.css"import PageLoading from"../components/PageLoading"import PageError from"../components/PageError"import api from"../api"classBadgeDetailsextendsReact.Component{
    state = {
        loading: true,
        error: null,
        data: undefined
    };

    componentDidMount () {
        this.fetchData()
    }

    fetchData = async () => {
        this.setState({loading: true, error: null});

        try {
            const data = await api.badges.read(this.props.match.params.badgeId);
            this.setState({ loading: false, data: data});
        } catch (error) {
            this.setState({loading: false, error: error});
        }
    }

    
    render () {
        if (this.state.loading) {
            <PageLoading />
        }
        
        if (this.state.error) {
            <PageErrorerror={this.state.error}/>
        }

       // const badge = this.state.data;return (
            <div><divclassName="BadgeDetails__hero"><divclassName="container"><divclassName="row"><divclassName="col-6"><imgsrc={confLogo}alt="Logo de la conferencia"/></div><divclassName="col-6 BadgeDetails__hero-attendant-name"><h1>{this.state.data.firstName} {this.state.data.lastName}</h1></div></div></div></div></div>
        )
    }
}

exportdefault BadgeDetails;```
0