Establecer un entorno React, Parte 2

Si eres nuevo en Reaccionar, entonces, es comprensible, solo quieres programar y jugar con algunos componentes simples para ver cómo funciona React. Realmente no desea tener que atravesar un largo proceso de configuración en primera instancia.

En este tutorial, te mostraré cómo comenzar a codificar con React en segundos, ¡eliminando casi por completo el proceso de configuración! Utilizará CodePen, un editor de código en línea, que le permite comenzar a escribir React code al instante..

Un efecto secundario útil del uso de editores de código en línea es que puede compartir fácilmente su trabajo con otros a través de una URL única. Cualquier cosa que crees también puede ser buscada por otros desarrolladores que buscan ejemplos basados ​​en React..

Echemos un vistazo a CodePen y veamos lo fácil que es configurar React y comenzar a codificar su primera aplicación.!

CodePen

CodePen le da acceso a tres ventanas para editar HTML, CSS y JavaScript, además de otra ventana para generar resultados. Puede usar CodePen completamente gratis, y ni siquiera necesita registrarse para una cuenta para compartir su trabajo. Sin embargo, si usa el servicio con regularidad, puede considerar abrir una cuenta para poder completar un perfil y comenzar a construir una cartera.

Cada nueva creación en CodePen se llama "pluma". Ir a la página de inicio y haga clic en el gran Crear botón en la parte superior derecha de la pantalla, y luego Nueva pluma desde el menú desplegable.

Dependiendo de sus configuraciones predeterminadas, los tres editores estarán en el lado izquierdo / derecho de la ventana principal o se ubicarán en la parte superior en una sola fila.

La ventana de salida de CodePen se actualiza automáticamente cada vez que escribe en cualquiera de las ventanas del editor. Esto es opcional y se puede desactivar a través de la configuración del lápiz..

Configurando las Configuraciones

Antes de que podamos escribir cualquier código React, debemos importar los scripts de biblioteca necesarios y configurar nuestro procesador de JavaScript. Usaremos JSX dentro de nuestros componentes React, así como algunas características de ES6, por lo que, para asegurarnos de que el editor de JavaScript CodePen pueda interpretar nuestro código, necesitamos una herramienta que tome nuestro código JSX y ES6 y lo compile de forma estándar. JavaScript que todos los navegadores pueden ejecutar.

Usaremos Babel como nuestro compilador de JavaScript, por lo que podrá usar de forma segura las últimas funciones de JavaScript sin tener que preocuparse por la compatibilidad del navegador. El soporte adicional para la compilación JSX es un bono real, ya que significa que solo necesitamos usar una herramienta.

Para habilitar Babel en CodePen, debemos configurar los ajustes de nuestro lápiz. Haga clic en el Ajustes botón en el menú superior derecho, y luego en JavaScript en el Ajustes de la pluma cuadro de diálogo que aparece. También podemos agregar aquí las bibliotecas React requeridas..

Haga clic en el Adición rápida desplegable y seleccione Reaccionar de la lista. Observe que React se agrega al primer cuadro de entrada con la ruta completa a la biblioteca especificada. Haga clic en el menú desplegable de nuevo para agregar Reaccionar DOM. Esto es necesario ya que estamos renderizando nuestros componentes React al DOM del navegador.

Finalmente, bajo el Preprocesador de JavaScript desplegable, seleccione Babel. Tu Ajustes de la pluma El diálogo ahora debería verse similar a esto:

Las versiones exactas de los guiones React y React DOM pueden ser ligeramente diferentes en su pantalla, ya que CodePen inevitablemente se actualizará a la última versión de vez en cuando.

Hacer clic Cerrar para volver a la interfaz principal de CodePen. Note que al lado de la JS etiqueta en la ventana del editor de JavaScript, un adicional (Babel) Se ha agregado la etiqueta como recordatorio de que el JavaScript se pasará a través del compilador de Babel antes de que se ejecute en el navegador..

Nuestra primera aplicación React

En la ventana del editor HTML CodePen, agregue un solo 

 elemento. Esto sirve como un marcador de posición vacío que nuestra aplicación React puede usar para representar nuestro componente.

No necesitamos agregar mucho HTML manualmente ya que React se encarga de agregar y actualizar elementos DOM para nosotros. Tampoco agregaremos CSS a nuestra pluma, así que siéntase libre de reorganizar las ventanas para que el editor de JavaScript y la ventana de salida tengan más espacio disponible.

En la ventana del editor de JavaScript, ingrese el siguiente código para agregar nuestro primer componente.

la clase MyFirstComponent extiende React.Component render () return ( 
Hola de React!
 )

Esta es prácticamente la versión más básica de un componente posible en React. Utilizamos una clase ES6 para ampliar la clase de componente React principal, que implementa un hacer() Método y devuelve un elemento HTML.

Para mostrar nuestro componente, necesitamos llamar al ReactDOM.render () método:

ReactDOM.render ( , document.querySelector ('#app'));

El primer argumento es el componente React que desea representar, y el segundo especifica a qué elemento DOM se debe representar..

Ahora vamos a crear otro par de componentes React. Primero, agregue este fragmento a la ventana HTML:

Ahora agregue otra definición de componente a la ventana de JavaScript:

la clase MySecondComponent extiende React.Component render () return ( 
Mi segundo componente reactivo.
 )

El segundo componente es muy similar al primero, y lo hacemos a la div elemento con carné de identidad de app2 con otra llamada a ReactDOM.render ().

ReactDOM.render ( , document.querySelector ('# app2'));

Sin embargo, no es muy eficiente representar componentes individuales de esta manera. El enfoque actualmente aceptado es definir un componente de nivel superior como , que contiene todos los demás componentes en su aplicación React. Entonces, todo lo que necesitas es una sola llamada a RenderDOM.render (), en lugar de una llamada separada para cada componente.

Así que vamos a refactorizar nuestra aplicación React muy simple para hacer uso de este enfoque de componentes de alto nivel.

En primer lugar, retire el

Ahora, ¿y si quisiéramos agregar alguna información a  y  ¿Pero no quería necesariamente especificarlo dentro de las definiciones de componentes? Podemos hacer esto transmitiendo información a los componentes secundarios de los componentes principales utilizando un atributo HTML como la sintaxis. Esto se conoce como accesorios en React..

Demostremos esto pasando información de numeración a nuestros dos componentes anidados. Cambiar el definición para ser:

La aplicación de clase extiende React.Component render () return ( 
 
Mis primeros componentes reaccionan!
   
 )

Hemos añadido dos número accesorios que se transmitirán a cada componente secundario y estarán disponibles a través de un objeto JavaScript. Dentro de las definiciones de componentes, podemos acceder a los accesorios a través de la accesorios objeto de la siguiente manera:

la clase MyFirstComponent extiende React.Component render () return ( 
this.props.number: Hola de React!
 )

la clase MySecondComponent extiende React.Component render () return ( 
this.props.number: My Second React Component.
 )

Recapitulemos rápidamente lo fácil que fue comenzar a codificar con React usando CodePen.

En primer lugar, abrimos un nuevo lápiz y configuramos las configuraciones para agregar las dependencias de guiones React y ReactDOM. También agregamos el preprocesador Babel de JavaScript para compilar nuestros códigos JSX y ES6 a JavaScript estándar.

Entonces, fue solo un caso simple de agregar nuestros componentes React al editor de JavaScript. Finalmente, para que nuestros componentes se muestren en la ventana de salida, insertamos un

Elemento como punto de montaje para nuestra aplicación React en la ventana del editor HTML.

Conclusión

¡Con CodePen, puede obtener un componente React en la pantalla en solo unos minutos! Sin embargo, tiene algunas limitaciones..

Las mejores prácticas de React modernas para el desarrollo de React recomiendan un enfoque modular, con cada componente en un archivo separado. No puedes hacer esto con la versión básica de CodePen.

Además, como la ventana de salida de CodePen está incrustada dentro de un elemento iframe, no tiene acceso a las herramientas de desarrollador React del navegador, lo cual es una consideración importante a medida que sus aplicaciones se vuelven más complejas..

Sin embargo, para los principiantes y para probar rápidamente nuevas ideas para aplicaciones simples, CodePen es una gran herramienta para el desarrollo React. También puede usarlo para crear una cartera en línea o como su propia mini biblioteca de componentes React listos para pegar en otros proyectos. Hay muchos otros editores de código en línea similares a CodePen, como JSFiddle, JS Bin y muchos otros..

En el siguiente tutorial, nos centraremos en configurar las aplicaciones React localmente.

Código