INTRODUCCION AL CURSO DE REACT AVANZADO - REACT AVANZADO VIDEO 01

hola cibernauta te habla javier martínez

estamos dando inicio a nuestro curso de

react y es nivel avanzado donde vamos a

realizar dos proyectos prácticos creados

en www.vimeo.com bien said en auto

entonces este curso será la continuación

de nuestro curso que hicimos en el

pasado mes de julio del año pasado 2018

estamos comenzando el año y bueno y

bueno va a ser el complemento de ese

curso básico para tomar el avanzado

necesitas las bases que ya vimos

en el curso básico eso sí

vamos a saltar algunos puntos que ya se

vieron en ese curso se va a dar por

sentado que ya existe es ese curso

y que conoces lo suficiente como para

crear nuestro primer proyecto en riad

durante este curso de react avanzado

vamos a realizar dos proyectos el primer

proyecto va a ser un dashboard

un tablero donde vamos a ver la

plantilla donde vamos a consumir datos a

través de web

ap y recuerde que en el mes de diciembre

realizamos un curso especial de s&p

punto net web y con la intención de

poder consumir esos datos que están

alojados en un servidor web por lo

general

y que son devueltos a la página web oa

dispositivos móviles a través de

consumir los servicios vía restful muy

bien vamos a crear nuestro primer

proyecto para ello necesito que interese

en la carpeta curso carlos que es donde

estamos realizando todos nuestros cursos

o en la carpeta donde tengas tus cursos

y coloques una carpeta que se llame

react guión avanzado como lo tengo aquí

en pantalla

y luego nos vamos a ir al símbolo del

sistema

en el símbolo del sistema vamos

directamente al directorio es decir se

de slash

cursos carlos

que slash riad

avanzado

llegados a este punto se supone que ya

conoces lo que es n pm porque lo vimos

en el curso básico entonces tenemos que

pasar obligatoriamente a crear nuestro

proyecto nuestro primer proyecto en

react utilizando n pm

para ello vamos a valernos de la

instrucción create guión react

guión app y ahora viene el nombre del

proyecto en este caso sería tablero

riad

así

o si quiere le colocas das work como

mejor te parezca le damos a enter

como ya tenemos instalado el 110

puedes darte cuenta que desde el símbolo

del sistema caen n pm arrancó n pm y

puedes darte cuenta de que ya se creó

una carpeta que se llama tablero guión

react ahora se van a instalar las

librerías react react y hondón y react

jon scripts esperamos entonces

muy bien luego de haber finalizado este

proceso vas a darte cuenta cuáles son

las librerías que se han instalado en

este caso real 16 puntos 7.0 el react

scripts y el react con 16.7 ok y te dice

el tiempo de instalación luego te dará

algunas instrucciones como el n pm

starts

n pm est n pm round y check

y te da

cuáles son los comandos te sugiere

cuáles son los comandos que deberías

utilizar acá en el símbolo del sistema

para comenzar tu aplicación

que acabas de crear

en este caso recuérdate que nuestra

aplicación se llama

tablero react como lo vemos aquí en

nuestra carpeta donde va a recibir la

aplicación entonces debemos pasarnos

aquí con el cd tablero

guión react y luego levantamos el

servidor al levantar el servidor

utilizando n pm start vamos a ver una

página en el navegador web firefox que

es mi navegador web por defecto donde

debería salir la página de bienvenida de

react le damos a enter npm start

si te sale este mensaje del firewall de

windows le das aceptar el mensaje que

genera el no 10 cuando intenta crear la

aplicación web read

a través de n pm

aquí tenemos entonces react app nota

si es el curso básico y vez este curso

nota cómo ha cambiado

la página principal que tenemos

localhost

3000 que es la puerta por defecto

edith src app punto j s guardarlo y

recargarlo es decir debemos editar este

archivo pero dentro de la aplicación

para poder modificar esta página de

inicio nos regresamos al símbolo del

sistema y vemos que nos sale un mensaje

en verde que nos muestra que la

aplicación ha sido compilada

exitosamente y te dice bueno

qué

tu aplicación está en local en el local

host puerto 3000 y en tu red en esta

dirección

10 127 127.1 la dirección ip y 3000

ahora

como vamos a editar

la aplicación para tratar de modificar

esta pantalla de inicio tenemos que

detener el servidor

ok entonces le damos control se puede

decir si desea terminar el trabajo por

lotes le digo que sí

nuevamente caigo acá en lo que es

tablero react que es donde reside sé a

dónde ir voy a ver la lista de archivos

y carpetas que ha creado de directorios

que ha creado

y a los que yo debo acceder utilizando

visual studio code para arrancar

directamente y que se nos muestre esta

carpeta tablero guión react en el visual

studio code colocó code y un puntito le

doy a enter

nota que ya se me abre el visual studio

code aquí me van a salir unos warnings

que tienen que ver con las

actualizaciones yo le voy a dar ignorar

a todo es ok

aquí esto lo cerramos

aquí también

sobre el git esta consola la podemos

cerrar

y la pantalla de bienvenido también

enfoquémonos entonces aquí en lo que es

la parte de la carpeta del contenido de

la carpeta tiene algunos archivos que no

vamos a utilizar como el git ignore

pequeño blog

jason pequeño jason y el ritmo md y

también tenemos tres carpetas que serán

los módulos

que donde están todos los módulos de 110

incluyendo las librerías de react

eso lo dejamos sin tocar tenemos la

carpeta pública donde vemos el index

html lo vemos

a quitar acá al index.html y nos vamos a

ir directamente donde dice title

y le vamos a cambiar el título de riad

app por

proyecto

the word

y servicios

webb ap

y guardamos

y lo último que vamos a hacer podemos

cerrar esto podemos ver

que es el src tenemos el app

js archivo clave

donde aparece

esta información que ves aquí esto

aparece en el app 10

y tenemos también el index y es otro

archivo llave script que es el que va a

renderizar

todo lo que hagamos

el app y es entonces teniendo ya la

estructura de directorios hecha y

nuestra aplicación pasaremos a instalar

bus trap en la versión 4 para darle

diseño responsive diseño responsivo a lo

que es nuestra aplicación a partir del

vídeo número 2 de esta serie un abrazo y

hasta entonces