En este tutorial, presentaremos los conceptos básicos de React a los desarrolladores de Django. Puede utilizar React para crear interfaces de usuario utilizando componentes reutilizables que permiten la máxima reutilización y un DOM virtual que proporciona un mejor rendimiento.
En este tutorial, aprenderemos cómo incluir React en una plantilla de Django y aprenderemos sobre los conceptos básicos de React, como componentes, estado y accesorios .
Pero, ¿qué es el DOM virtual? Esta es la definición del sitio web oficial de React
El DOM virtual (VDOM) es un concepto de programación en el que una representación ideal o "virtual" de una interfaz de usuario se guarda en la memoria y se sincroniza con el DOM "real" mediante una biblioteca como ReactDOM. Este proceso se llama reconciliación.
React es hoy en día, 2018, la biblioteca front-end más popular para crear interfaces de usuario. A lo largo de este tutorial, veremos una comprensión básica de React.js creando una aplicación React desde cero y paso a paso. Nos centraremos en las características principales de React. Después de obtener los conceptos básicos, puede sumergirse en más aprendizaje de manera más cómoda.
Siguiendo este tutorial, aprenderá:
Cómo empezar con React usando una
<script>etiqueta;Cómo incluir React en una plantilla de Django;
¿Qué es un componente React?
Cómo crear componentes de React;
Cómo usar la
ReactDOMbiblioteca para montar su aplicación React en el DOM;Cómo manejar datos en React;
La diferencia entre accesorios y estado en React;
Cómo usar los accesorios;
Cómo utilizar el estado;
Cómo mutar o actualizar el estado en React, etc.
React proporciona un conjunto de características modernas como:
Una arquitectura basada en componentes;
Componentes reutilizables;
Componentes con estado y sin estado;
Y dom virtual.
Empezando con React
Dado que estamos comenzando con React, no vamos a utilizar herramientas complicadas como create-react-app(De hecho, esta herramienta fue creada para hacer que la creación de aplicaciones React sea menos compleja sin preocuparnos por Webpack y herramientas de front-end complejas), en su lugar usaremos un configuración simple, es decir, la forma antigua de usar bibliotecas en el desarrollo web front-end.
Empiece por crear una página HTML básica:
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
</body>
</html>
Ahora use la <script>etiqueta para incluir Reacty ReactDOMbibliotecas. En el <head>de su página HTML, agregue:
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
También debe incluir Babel:
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
Estamos usando el unpkg.comservicio que nos permite importar módulos NPM como scripts JavaScript normales sin usar npm y herramientas modernas relacionadas con el front-end para instalar y usar las dependencias.
Dado que React hace uso de características modernas de JavaScript, usamos Babel, que es un transpilador que transpila las características de ES6 a características de JavaScript que pueden ser intercambiadas por la mayoría de los navegadores existentes.
También usamos Babel para transformar plantillas JSX (utilizadas por React para incluir HTML en JavaScript) en JavaScript.
Estamos cargando React desde una <script>etiqueta, también puede usar herramientas modernas como npm y el sistema de importación / solicitud al crear aplicaciones complejas.
A continuación, necesitamos agregar una raíz <div>donde montaremos nuestra aplicación React.
Dentro del <body>elemento, agregue el siguiente HTML:
<div id="root"></div>
Además, dentro de la <body>etiqueta, agregue lo siguiente <script>donde vamos a agregar el código React:
<script type="text/babel">
/* React code */
</script>
En este paso, puede instalar un servidor http para que pueda ejecutar el ejemplo en su navegador o simplemente usar codepen .
Incluyendo React en las plantillas de Django
En esta sección, veremos cómo incluir React en las plantillas de Django. Django tiene un poderoso sistema de plantillas que hace uso de la herencia para reducir la repetición y aumentar la reutilización del código, así que comencemos creando la base.htmlplantilla dentro de la templatescarpeta y agreguemos el siguiente HTML:
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Django & React Tutorial</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<noscript>You need to enable JavaScript to continue with this application.</noscript>
<div id="root"></div>
{% block inner %}
{% endblock %}
</body>
</html>
Cree una index.htmlplantilla que amplíe la base.htmlplantilla y agregue el siguiente contenido:
{% extends "base.html" %}
{% block inner %}
<script type="text/babel">
/* React code here */
</script>
{% endblock %}
Reaccionar componentes
En React, construyes tu interfaz de usuario como una jerarquía de componentes. Un componente controla una parte de la interfaz de usuario y es simplemente una clase JavaScript / ES6 que extiende la base React.Component. Por ejemplo, este es un HelloWorldcomponente simple :
class HelloWorld extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
El componente simplemente representa a <h1>Hello World!</h1>. Usamos el render()método proporcionado por los padres React.Component. El render()método debería devolver lo que su componente necesita para representar en la pantalla .
En React, puede usar diferentes tipos de componentes, como componentes principales y secundarios . También utilizará componentes inteligentes y de volcado . Un componente inteligente mantiene el estado mientras que un componente de volcado no mantiene ningún estado .
Los componentes tienen muchos beneficios. El beneficio más importante para un desarrollador es la reutilización de código, es decir, puede reutilizar sus componentes en la misma aplicación o en varias aplicaciones.
Usando ReactDOM
Ahora que tenemos un componente React básico que muestra algo en la pantalla y una página HTML simple, necesitamos montar la aplicación React simple en el cuerpo HTML de nuestra página. Para este asunto, necesitamos usar la ReactDOMbiblioteca.
Antes de la </body>etiqueta de cierre , agregue el siguiente código dentro de una <script>etiqueta:
<script>
ReactDOM.render(
<HelloWorld />,
document.getElementById("root")
);
</script>
Usamos el render()método para montar nuestro único componente de nivel superior en la raíz <div>que tomamos usando el document.getElementById("root")método.
Esto será suficiente para montar nuestro componente React. Ahora debería ver un Hola mundo en la pantalla.
Manejo de datos en React
Puede hacer uso de datos en React usando dos formas: propsy state.
Los accesorios se utilizan para comunicar o pasar datos entre componentes y son externos al componente, mientras que el estado se utiliza para mantener el estado interno de un componente.
Un componente de React puede cambiar su estado interno directamente, pero no los accesorios.
Comprensión de los accesorios de React
Los accesorios le permiten pasar datos a un componente, lo que permite una máxima reutilización del componente.
Por ejemplo, cambiemos nuestro componente HelloWorld anterior para que sea más dinámico al representar un mensaje que se pasa a través de un accesorio en lugar de representar siempre Hello World .
Podemos pasar un mensaje prop al componente usando la siguiente sintaxis:
<HelloWorld message="Hello React" />
El accesorio se llama mensaje , puede usar cualquier nombre significativo para su accesorio. El prop del mensaje toma un valor de Hello React .
Ahora, necesitamos cambiar el componente para manejar el prop:
class HelloWorld extends React.Component {
render() {
return <h1> {this.props.message}</h1>;
}
}
Accedemos a los accesorios en nuestro componente usando el this.propsobjeto. Como se trata de código JavaScript, lo incluimos entre llaves que le indican a JSX que interprete y represente el resultado.
Como puede ver, esto nos permite usar el componente para representar diferentes mensajes en lugar de solo el mensaje Hello World .
Comprender el estado de reacción
Un componente en React puede mantener su propio estado interno usando un objeto de estado . El componente que mantiene un estado se llama componente inteligente .
Ahora agreguemos el estado a nuestro componente anterior:
class HelloWorld extends React.Component {
constructor(){
super();
this.state = {
message: "Hello React!"
};
}
render() {
return <p>{this.state.message}</p>;
}
}
En el constructor del componente, simplemente asignamos un objeto JavaScript this.statepara inicializarlo.
El mensaje ahora es parte del estado interno del componente.
Podemos acceder al estado usando this.state.
Estado mutante / cambiante en React
Para mutar o cambiar el estado en su componente React, simplemente necesita usar el this.setState()método. Por ejemplo:
this.setState({
message: "Hello Again"
});
Conclusión
En este tutorial, analizamos rápidamente los conceptos básicos de React.
0 Comentarios
Dejanos tu comentario para seguir mejorando!