Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial básico de React para desarrolladores de Django

 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 ReactReactDOMbibliotecas. 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.ComponentPor 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.ComponentEl 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: propsstate.

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.


Publicar un comentario

0 Comentarios