React — Crear un proyecto básico en codesandbox.io
codesandbox.io es una herramienta de creación de prototipos e IDE instantánea para un rápido desarrollo web, donde tienen diferentes plantillas, que nos van a servir para crear proyectos de manera rápida online.
Nosotros vamos a aprovechar la plantilla de React, con la finalidad de irnos acostumbrando a importar múltiples archivos, así que explicare brevemente como crear un proyecto en React:
- Primero debemos iniciar sesión (vincular github)
- Después nos vamos a ir a la página principal[ref], dónde debemos ver algo así:
Nota: En caso de que no veas esa pantalla, solo da click en la imagen de tu perfil.
- El siguiente paso es crear un Sandbox de React, entonces le damos click donde dice “Create React Sandbox”
En caso de que no te salga crear una aplicación, arriba del lado derecho (al lado de su perfil, hay un +, dale click y luego busca React)
Y… así de fácil, nos ha creado un proyecto en React.
Ahora vamos a identificar los archivos:
Cuando creamos un nuevo componente (podemos crear componentes de clase o funcionales):
- Ir a la carpeta de src (generar una carpeta llamada components)
- Dentro de la carpeta components, darle click al icono de new File
- Poner el nombre de nuestro componente (ej. Form.js)
Al momento de crear nuestro componente, no debemos olvidar:
- Importar la biblioteca de React
- Exportar por default nuestro componente
Y por último importar el componente en donde se vaya a utilizar (en nuestro ejemplo lo importamos en App.js)
Si hemos hecho bien los pasos, vamos a poder visualizar en el lado derecho nuestra aplicación completa:
En la siguiente entrega vamos a ver React— Formularios con React.Component (Input, Textarea, Select, Radio, Checkbox)
La entrega pasada vimos React — map, filter y reduce
