Instalación y configuración de entorno

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

Resumen

Iniciar un repositorio en GIT:

git init

Iniciar un proyecto de Node.js:

npm init -y
```

Instalar React:

```bash
npm install --save react react-dom

Francisco Lopez Campos

student•

Mas cursos "PRÁCTICOS" como este, genial la forma en que lo explica.

Sebastian Duran

student•

Totalmente de acuerdo, creo que estos corresponden a los cursos medios y avanzados, pero son muy necesarios los cursos con proyectos incluso en los cursos basicos y de introduccion

Bernardo Aguayo Ortega

student•

Y unos aprendemos mejor viendo y haciendo!

Luis Martinez

student•

Me cae muy bien este mastero :D

Oscar Barajas Tavares

Team Platzi•

Gracias, es un honor poder enseñarles.

Jessie Buckland Pérez

student•

Me parece muy bien como explica, pero sigo sin entender porque este video es el nº8 en lugar del primero....

Ismael López

student•

Pienso que es porque aquí el profe Oscar comenzo el proyecto desde 0, aunque si podría haber sido una introducción general a React

Jose Daniel Molina

student•

Pasa que lo primero que el profesor quiso hacer es mostrarnos lo facil que es trabajar con react, mediante la plantilla que nos proporciona create-react-app. Ahora vamos a aprender a configurar el entorno desde 0 y a nuestra conveniencia.

Kevin Martello Mayorga Cleveland

student•

Es interesante no depender del create react app

Alessandri Fonseca

student•

por ultimo se debería colocar un .gitignore para no subir la carpeta node modules

Jhon Carlos Colorado Angulo

student•

Exacto falto explicarlo.

Jose Dario Paez Perez

student•

completamente de acuerdo pero con el comando qeu crea el proyecto completo ya si se crea ese archiv

Cesar Augusto Barco de Gouveia

student•

Acá está la recolección de notas e información conseguida en Internet para complementar este curso.

Documento completo
Aportar o editar en github

Si ayudas a agregar información o investigación extra estaría genial.

Git init

git-init: crea un repositorio de Git vacío o reinicializa uno existente

SINOPSIS

_git init_ [-q | --quiet] [--bare] [--template = <template_directory>] [--separate-git-dir <git dir>]  [--shared [= <permissions>]] [directorio]

DESCRIPCIÓN

Este comando crea un repositorio vacío de Git - básicamente un .git directorio con subdirectorios para objects, refs/heads, refs/tags, y los archivos de plantilla. HEADTambién se crea un archivo inicial que hace referencia al HEAD de la rama maestra.

Si se establece la $GIT_DIRvariable de entorno, especifica una ruta a utilizar en lugar de ./.gitpara la base del repositorio.

Si el directorio de almacenamiento de objetos se especifica a través de la $GIT_OBJECT_DIRECTORYvariable de entorno, los directorios sha1 se crean debajo; de lo contrario $GIT_DIR/objects , se utiliza el directorio predeterminado .

Ejecutar git init en un repositorio existente es seguro. No sobrescribirá las cosas que ya están allí. La razón principal para volver a ejecutar git init es recoger plantillas recién agregadas (o mover el repositorio a otro lugar si se da --separate-git-dir).

EJEMPLOS

Inicie un nuevo repositorio Git para una base de código existente

$ cd / ruta / a / my / codebase $ git init **(1)** $ git add. **(2)** $ git commit **(3)**

Cree un directorio /path/to/my/codebase/.git.
Agregue todos los archivos existentes al índice.
Registre el estado prístino como el primer compromiso en la historia.

npm-init

Crea un archivo package.json

SINOPSIS

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)

EJEMPLOS

Cree un nuevo proyecto basado en React usando create-react-app:

$ npm init react-app ./my-react-app

Cree un nuevo esmpaquete compatible con create-esm:

$ mkdir my-esm-lib && cd my-esm-lib
$ npm init esm --yes

Genere un paquete antiguo simple.json usando init heredado:

$ mkdir my-npm-pkg && cd my-npm-pkg
$ git init
$ npm init

Generarlo sin tener que hacer preguntas:

$ npm init -y

DESCRIPCIÓN

npm init <initializer> se puede usar para configurar un paquete npm nuevo o existente.

initializeren este caso, se llama un paquete npm create-<initializer>, que será instalado por , y luego se ejecutará su bin principal, presumiblemente creando o actualizando y ejecutando cualquier otra operación relacionada con la inicialización.npx``package.json

El comando init se transforma en una npxoperación correspondiente de la siguiente manera:

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

Cualquier opción adicional se pasará directamente al comando, por lo que se npm init foo --helloasignará a npx create-foo --hello.

Si se omite el inicializador (simplemente llamando npm init), init recurrirá al comportamiento init heredado. Le hará un montón de preguntas y luego escribirá un package.json para usted. Intentará hacer conjeturas razonables basadas en los campos existentes, las dependencias y las opciones seleccionadas. Es estrictamente aditivo, por lo que mantendrá todos los campos y valores que ya se hayan establecido. También puede usar -y/ --yespara omitir el cuestionario por completo. Si aprueba --scope, creará un paquete con ámbito.

Estructura de directorios estandar

!enter image description here

Mario Alejandro Crespo Reyes

student•

Este aporte es de otro mundo

Tatiana Karina Valencia Hernández

student•

Buen aporte, gracias por compartirlo

Didier Zúñiga

student•

He visto anteriormente otros cursos de React, pero la manera como lo esta explicando Oscar hasta ahora es genial, también por el hecho de tener un orden en nuestros proyectos para hacerlo escalable. Gracias

Oscar Barajas Tavares

Team Platzi•

Tener un proyecto, te permite enfocar el aprendizaje y llevarlo al siguiente nivel avanzando con la construcción del mismo.

Maria Jaramillo

student•

cuando es mas recomendado usar create-react-App y cuando es mas conveniente crear el proyecto desde cero?

Carlos Gerardo Pérez Horta

student•

Puedes usar create-react-app para empezar en el desarrollo con react y darte una idea de como se estructura tu proyecto, pero después seria conveniente que aprendas a hacerlo desde cero para que aprendas mas sobre la configuración de un proyecto y puedas manipularlo mas fácil y corregir posibles errores que salgan en un futuro.

Juan Castro

teacher•

Estos otros comentarios de la clase te pueden ayudar:

Luis Rodriguez

student•

A mi pasó que no me funcionaba en mi terminal el comando para abrir VSC desde la terminal

code .

Si te pasa eso, en Visual Studio Code, abre tus configuraciones, selecciona "Shell Command: Install 'code' command in PATH. Y listo! Deberías de poder abrir VSC desde tu terminal.

Guillermo Loza Hernandez

student•

src —> source --> fuente (nuestro código fuente)
dist --> distribution --> distribución (se refiere a la versión final que se distribuye )

Ricardo Lugo Recillas

student•

- Inicializa el proyecto: npm init -y, se incializa el proyecto (se genera el package.json).
- Esta es la Estructura del proyecto
		- src
		- public
		- src\components
		- src\index.js
		- public\index.html
- Se instala react y react-dom
		- npm i --save react react-dom

Jhonatan David Ibarra Lavado

student•

estupendo, oscar le coloca una magia a este curso

Oscar Barajas Tavares

Team Platzi•

Gracias, Todo sea por que sigan aprendiendo.

Filiberto Santillán

student•

Estructura básica: .

public/
	|-index.html
src/
	|-Components/
	|-index.js
package.json

Jesús Daniel Michel Corona

student•

Alguna razón para no seguir con el entorno de create-react-app?

Oscar Barajas Tavares

Team Platzi•

Te enseño como crear tu propio entorno personalizado, esto nos permite tener total control sobre el proyecto, y conforme veas los cursos de escuela de javascript entenderas que podemos adaptar nuestro proyecto a la necesidad real.

create-react-app no es malo, pero no te permite entender cómo construyes tu proyecto e instala muchas librerías y recursos que no necesitas o utilizas.

Pablo Verduzco

student•

Excelente manera de comenzar nuestro proyecto, gracias Oscar.

Oscar Barajas Tavares

Team Platzi•

Sin duda es la forma que te permitirá tener una arquitectura de Frontend pensada en escalar.

Pablo Verduzco

student•

Totalmente de acuerdo Oscar, pocos tutores enseñan este tipo de utilidades, realmente gracias.

Sergio Andres Rios Pabon

student•

cual es la diferencia en utilizar "npm install reac react-dom" o "npx create-react-app", muchas gracias.

Juan Castro

teacher•

Con create-react-app tienes un muy buen entorno de desarrollo listo para trabajar. El problema es que no es muy flexible.

Tienes que hacerlo a mano si quieres empezar a practicar o implementar configuración personalizada (por ejemplo, para Server Side Rendering).

Oscar Barajas Tavares

Team Platzi•

NPM

Con este comando instalamos como un recurso de tu sistema "Create-React-App" y podemos utilizarlo cada que sea necesario con el comando:

create-react-app

Esto significa que tenemos instalado de forma local el recurso.

NPX

Con NPX no es necesario tener instalado el recurso en nuestro entorno local, primero comprueba si existe el el sistema y en caso contrario va al recurso en internet y lo crea en el directorio o entorno de trabajo que tengas.

Su principal ventaja es ejecutar un paquete o binario que no tengas instalado previamente y solo utilizarlo en este proyecto sin la necesidad de tenerlo disponible en todo tu equipo.

Jonathan Duarte

student•

No olviden meter los node_modules dentro del .gitignore para evitar subirlos al repositorio

Alejandro González Reyes

student•

Me gusta tener el control de las cosas

Oscar Barajas Tavares

Team Platzi•

Te da mas flexibilidad, a su vez te permite preparar tu proyecto para ser escalable.

Carlos Vallejo

student•

Genial! pude entender varias de las carpetas y archivos que npx crea automáticamente. Gracias :D

JESUS ALMIRCAR CASTELLANOS

student•

/*Instalación y configuración de entorno*/
	Iniciar un repositorio en GIT:
	git init
	Iniciar un proyecto de Node.js:

	npm init -y
	```

	Instalar React:

	```bash
	npm install --save react react-dom

	1. Crear rempo mkdir: platziVideo.
	2. git init
	3. Inicializar el proyecto: npm init -y (la bandera -y indica que va a preconfigurar el proyecto y luego va a crear automaticamente.)
	4. Crear "Estructura del proyecto":
		--> Carpeta: src
		--> Carpeta: public
		--> Carpeta: src\components
		--> Archivo: src\index.js
		--> Archivo: public\index.html
	5. Instalar React:
		sudo npm install react-dom
                "react":"^16.10.2",
	        "react-dom": "^16.10.2"
	

/*Instalación y configuración de entorno*/```

- Inicializa el proyecto: npm init -y, se incializa el proyecto (se genera el package.json).
- Esta es la Estructura del proyecto
		- src
		- public
		- src\components
		- src\index.js
		- public\index.html
- Se instala react y react-dom
		- npm i --save react react-dom	

/*Instalación y configuración de entorno*/
	Iniciar un repositorio en GIT:
	git init
	Iniciar un proyecto de Node.js:

	npm init -y
	```

	Instalar React:

	```bash
	npm install --save react react-dom

	1. Crear rempo mkdir: platziVideo.
	2. git init
	3. Inicializar el proyecto: npm init -y (la bandera -y indica que va a preconfigurar el proyecto y luego va a crear automaticamente.)
	4. Crear "Estructura del proyecto":
		--> Carpeta: src
		--> Carpeta: public
		--> Carpeta: src\components
		--> Archivo: src\index.js
		--> Archivo: public\index.html
	5. Instalar React:
		sudo npm install react-dom
                "react":"^16.10.2",
	        "react-dom": "^16.10.2"
	

/*Instalación y configuración de entorno*/```

Instalación y configuración de entorno

¿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