El autor del artículo, cuya traducción estamos publicando, cree que, desafortunadamente, la mayoría de las guías React existentes no prestan la debida atención a las valiosas técnicas de desarrollo práctico. Estas guías no siempre brindan a los involucrados en ellas una comprensión de cuál es el "enfoque correcto" para trabajar con React.
Este tutorial, que está dirigido a desarrolladores principiantes con conocimientos de HTML, JavaScript y CSS, cubrirá los conceptos básicos de React y los errores más comunes que puede encontrar un programador que use esta biblioteca.
¿Por qué los desarrolladores web eligen React?
Antes de comenzar a trabajar, digamos algunas palabras sobre por qué React puede considerarse la mejor alternativa entre las herramientas para desarrollar interfaces web. Hay muchos marcos de interfaz de usuario. ¿Por qué elegir reaccionar? Para responder a esta pregunta, comparemos las dos herramientas de desarrollo de interfaz más populares: React y Angular. Cabe señalar que el marco Vue.js, que está ganando popularidad, podría incluirse en esta comparación, pero nos limitaremos a React y Angular.
Approach Enfoque declarativo para la descripción de interfaces
El desarrollo de React consiste en describir lo que se debe mostrar en la página (y no en compilar instrucciones para el navegador sobre cómo hacerlo). Esto, entre otras cosas, significa una reducción significativa en la cantidad de código repetitivo.
Angular, por otro lado, tiene herramientas de línea de comandos que generan código repetitivo de componentes. ¿Esto parece un poco diferente de lo que puede esperar de las herramientas modernas de desarrollo de interfaz? De hecho, estamos hablando del hecho de que hay tanto código de plantilla en Angular que, para generarlo, incluso se ha creado una herramienta especial.
En React, comenzando a desarrollarse, comienzan a escribir código. No hay código de componente repetitivo que deba generarse de alguna manera. Por supuesto, se necesita cierta preparación antes del desarrollo, pero cuando se trata de componentes, pueden describirse como funciones puras.
▍ Borrar sintaxis
El código angular usa directivas como
ng-model ,
ngIf y
ngFor . Este código parece bastante engorroso. React, por otro lado, utiliza la sintaxis JSX, que se percibe como HTML normal, es decir, para iniciar el desarrollo de React, no es necesario que aprenda cosas fundamentalmente nuevas. Así es como se ve:
const Greetings = ({ firstName }) => ( <div>Hi, {firstName}</div> );
▍ Curva de aprendizaje correcta
La curva de aprendizaje es un factor importante a tener en cuenta al elegir un marco de IU. A este respecto, debe tenerse en cuenta que hay menos abstracciones en React que en Angular. Si conoce JavaScript, entonces probablemente pueda aprender a escribir aplicaciones React literalmente en un día. Por supuesto, para aprender cómo hacerlo bien, tomará algún tiempo, pero puede ponerse a trabajar muy, muy rápidamente.
Si analiza Angular, resulta que si decide dominar este marco, tendrá que aprender un nuevo lenguaje (Angular usa TypeScript), así como aprender a usar las herramientas de línea de comandos Angular y acostumbrarse a trabajar con directivas.
▍ Características del mecanismo de enlace de datos
Angular tiene un sistema de enlace de datos bidireccional. Esto, por ejemplo, se expresa en el hecho de que los cambios en la forma de un elemento conducen a la actualización automática del estado de la aplicación. Esto complica la depuración y es una gran desventaja de este marco. Con este enfoque, si algo sale mal, el programador no puede saber exactamente qué causó exactamente el cambio de estado de la aplicación.
React, por otro lado, utiliza el enlace de datos unidireccional. Esta es una gran ventaja de esta biblioteca, ya que se expresa en el hecho de que el programador siempre sabe exactamente qué condujo al cambio en el estado de la aplicación. Este enfoque de enlace de datos simplifica enormemente la depuración de aplicaciones.
Approach Enfoque funcional del desarrollo
Creo que uno de los puntos fuertes de React es el hecho de que esta biblioteca no obliga al desarrollador a usar clases. En Angular, todos los componentes deben implementarse como clases. Esto conduce a una complejidad de código excesiva, sin dar ninguna ventaja.
En React, todos los componentes de la interfaz de usuario pueden expresarse como conjuntos de funciones puras. El uso de funciones puras para formar una interfaz de usuario se puede comparar con un soplo de aire limpio.
Ahora que hemos examinado las razones de la popularidad de React, que posiblemente lo inclinará hacia esta biblioteca en particular al elegir herramientas para desarrollar interfaces de usuario, pasemos a la práctica.
Reaccionar la práctica de desarrollo de aplicaciones
▍Node.js
Node.js es una plataforma de servidor que admite la ejecución de código JavaScript, cuyas capacidades son útiles para el desarrollo de React. Si aún no ha instalado esta plataforma, ahora es el momento de
arreglarla .
▍Preparación del proyecto
Aquí usaremos el paquete
create-react-app de Facebook para crear el núcleo de la aplicación React. Este es probablemente el enfoque más popular para configurar un entorno de trabajo, que le permite comenzar el desarrollo. Gracias a la aplicación
create-react-app programador pone a su disposición muchas herramientas necesarias, lo que elimina la necesidad de seleccionarlas usted mismo.
Para instalar
create-react-app , use este comando:
npm i -g create-react-app
Luego, para crear la plantilla de la aplicación, ejecute el siguiente comando:
create-react-app react-intro
Esta preparación preliminar se completa. Para iniciar la aplicación, ejecute los siguientes comandos:
cd react-intro npm start
Aquí vamos a la carpeta del proyecto e iniciamos el servidor de desarrollo, que le permite abrir una nueva aplicación React yendo al navegador en
http: // localhost: 3000 / .
▍ Estructura del proyecto
Veamos cómo funciona la aplicación React. Para hacer esto, abra el proyecto que acaba de crear con su IDE (recomiendo
Visual Studio Code ).
Archivo Index.html
En la carpeta del proyecto, abra el archivo ubicado en
public/index.html . Esto es lo que verá al hacer esto.
Archivo Index.htmlAquí estamos particularmente interesados en la línea
<div id="root"> . Aquí es donde se ubicará nuestra aplicación React. Todo este elemento será reemplazado con el código de la aplicación, y todo lo demás permanecerá sin cambios.
Archivo Index.js
Ahora abra el
src/index.js . Este archivo es el que implementa la aplicación React. Y, por cierto, el código fuente de la aplicación se colocará en el directorio
src .
Archivo Index.jsAquí está la línea de código que es responsable de generar lo que llamamos una "aplicación React" en la página:
ReactDOM.render(<App />, document.getElementById('root'));
Esta línea le dice a React que debemos tomar el componente de la
App (hablaremos de él muy pronto) y colocarlo en el
div root , que se definió en el archivo
index.html que acabamos de examinar.
Ahora nos ocuparemos de la construcción
<App /> . Es muy similar al código HTML, pero es una muestra de código JSX, que es una sintaxis JavaScript especial utilizada por React. Tenga en cuenta que esta construcción comienza con una letra mayúscula
A , que es exactamente
<App /> , y no
<app /> . Esto se debe a la convención de nomenclatura de entidades utilizada en React. Este enfoque permite al sistema distinguir entre etiquetas HTML normales y componentes React. Si los nombres de los componentes no están en mayúscula, React no podrá mostrarlos en la página.
Si planea usar JSX en un determinado archivo
.js , debe importar React allí usando el siguiente comando:
import React from 'react';
App.js File
Ahora estamos listos para echar un vistazo al código de nuestro primer componente. Para hacer esto, abra el
src/App.jsApp.js FilePara crear un componente React, primero debe crear una clase que sea descendiente de
React.Component . Esto es exactamente lo que la
class App extends Component línea de
class App extends Component resuelve. Todos los componentes de React deben contener una implementación del método de
render , en el que, como puede adivinar por su nombre, el componente se representa y se genera una descripción de su representación visual. Este método debería devolver el marcado HTML para la salida a la página.
Tenga en cuenta que el atributo
className es el equivalente del atributo de
class en HTML. Se utiliza para asignar clases CSS a elementos para darles estilo. La
class palabra clave JavaScript está reservada y no se puede usar como un nombre de atributo.
Repitamos lo que acabamos de descubrir sobre los componentes:
- Sus nombres comienzan con una letra mayúscula (
A en la App ). - Extienden la clase
React.Component . - Deben implementar un método de
render que devuelva el marcado.
Ahora hablemos sobre qué evitar al desarrollar aplicaciones React.
▍Recomendación No. 1: no es necesario usar clases de componentes en todas partes
Los componentes en React se pueden crear utilizando dos enfoques. El primero es usar clases de componentes (Componente de clase), el segundo es usar componentes funcionales (Componente funcional). Como habrás notado, el ejemplo anterior usa clases. Desafortunadamente, la mayoría de los tutoriales para principiantes de React sugieren usarlos.
¿Qué tiene de malo describir componentes usando el mecanismo de clase? El hecho es que dichos componentes son difíciles de probar y tienden a crecer en exceso. Estos componentes están sujetos al problema de la separación de responsabilidades de baja calidad, la combinación de lógica y presentación visual (y esto complica la depuración y prueba de las aplicaciones). En general, el uso de clases de componentes lleva al hecho de que el programador, en sentido figurado, "se dispara en el pie". Por lo tanto, especialmente cuando se trata de programadores novatos, recomendaría que no usen clases de componentes.
Entonces, descubrimos que usar clases para describir componentes no es una buena idea. ¿Qué alternativas tenemos? La respuesta a esta pregunta son los componentes funcionales. Si el componente creado usando la clase no tiene más que el método de
render , entonces es un excelente candidato para procesarlo en un componente funcional. Armados con esta idea, pensemos en cómo mejorar el componente de la
App creado por la herramienta
create-react-app :
function App() { return ( <div className="App"> ... </div> ); } export default App;
¿Ves lo que hicimos aquí? Es decir, eliminamos la clase y reemplazamos el método de
render con una construcción de la
function App() {...} . Si usamos la sintaxis de la función de flecha ES6 aquí, nuestro código se verá aún mejor:
const App = () => ( <div className="App"> ... </div> ); export default App;
Convertimos la clase en una función que devuelve el marcado que debe mostrarse en la página.
Considera esto. Una función que devuelve marcado no tiene código repetitivo. Esto es casi puro marcado. ¿No es eso perfecto?
El código de los componentes funcionales es mucho más fácil de leer, al trabajar con ellos, los diseños estándar deben distraerlo mucho menos.
Cabe señalar aquí que aunque acabamos de decir que los componentes funcionales son preferibles a las clases de componentes, en este artículo usaremos principalmente clases, ya que el código de las clases de componentes es más claro para los principiantes, se basa en menos abstracciones, con Es más fácil demostrar conceptos clave de React. Pero cuando esté suficientemente familiarizado con el desarrollo de las aplicaciones React, se recomienda tener en cuenta, al desarrollar proyectos reales, lo que se dijo anteriormente. Para comprender mejor los componentes funcionales, eche un vistazo a
este material .
▍ Conocimiento de propiedades
Propiedades (accesorios) es uno de los conceptos centrales de React. ¿Qué son las "propiedades"? Para entender esto, recuerde los parámetros que se pasan a las funciones. En esencia, las propiedades son los parámetros que se pasan a los componentes. Considere el siguiente código:
const Greetings = (props) => <div>Hey you! {props.firstName} {props.lastName}!</div>; const App = () => ( <div> <Greetings firstName="John" lastName="Smith" /> </div> );
Aquí creamos el componente
Greetings y lo usamos para saludar a un hombre llamado
John Smith desde el componente
App . Todo este código dará como resultado el siguiente marcado HTML:
<div> <div>Hey you! John Smith!</div> </div>
Las llaves en expresiones como
{props.name} se usan para resaltar el código JavaScript. Se pasa el componente
Greetings , en forma de parámetros, las
firstName y
lastName . Trabajamos con ellos, haciendo referencia a las propiedades del objeto de
props .
Tenga en cuenta que se
props un único objeto de
props , no dos valores que representan las
firstName y
lastName .
El código se puede simplificar aprovechando la capacidad de ES6 para reestructurar objetos:
const Greetings = ({ firstName, lastName }) => <div>Hey you! {firstName} {lastName}!</div>;
Como puede ver, aquí la construcción
(props) sido reemplazada por
({ firstName, lastName }) . Con este reemplazo, le decimos al sistema que solo estamos interesados en dos propiedades del objeto
props . Y esto, a su vez, nos permite acceder directamente a los valores de
firstName y
lastName sin especificar explícitamente propiedades de objeto como
props.firstName .
¿Qué pasaría si, para resolver el mismo problema, en lugar de componentes funcionales, usáramos componentes basados en clases? En este caso, el código del componente
Greetings se vería así:
class Greetings extends React.Component { render() { return ( <div>Hey you! {this.props.firstName} {this.props.lastName}!</div> ); } }
No sé qué sensaciones te causa este código, pero me parece sobrecargado de mecanismos auxiliares. Aquí, en particular, para acceder a las propiedades, debe usar construcciones de la forma
this.props .
▍ principio de responsabilidad única
El Principio de Responsabilidad Única (SRP) es uno de los principios de programación más importantes a cumplir. Nos dice que el módulo debe resolver un solo problema y que debe hacerlo de manera de calidad. Si desarrolla un proyecto sin seguir este principio solo, el código para dicho proyecto puede convertirse en un diseño de pesadilla que no puede ser compatible.
¿Cómo se puede violar el principio de responsabilidad exclusiva? Esto ocurre con mayor frecuencia cuando los mecanismos no relacionados entre sí se colocan en los mismos archivos. En este material a menudo nos referiremos a este principio.
Los principiantes suelen colocar muchos componentes en un archivo. Por ejemplo, tenemos el código para los componentes
Greetings y
App en el mismo archivo. En la práctica, esto no debe hacerse, ya que esto viola el SRP.
Incluso los componentes muy pequeños (como nuestro componente
Greetings ) deben colocarse en archivos separados.
Coloque el código del componente
Greetings en un archivo separado:
import React from "react"; const Greetings = ({ firstName, lastName }) => ( <div> Hey you! {firstName} {lastName}! </div> ); export default Greetings;
Luego use este componente en el componente
App :
import Greetings from "./Greetings"; const App = () => ( ... );
Tenga en cuenta que el nombre del archivo debe coincidir con el nombre del componente. Es decir, el código del componente de la
App debe colocarse en el archivo
App.js , el código del componente
Greetings en el archivo
Greetings , y así sucesivamente.
▍ Familiaridad con el estado de la aplicación
El estado es otro concepto central en React. Aquí es donde se almacenan los datos de la aplicación, es decir, qué puede cambiar. ¿Necesita guardar algo ingresado en el campo de formulario? Estado de uso ¿Necesitas guardar los puntos anotados por un jugador en un juego de navegador? Para hacer esto, debe usar el estado de la aplicación.
Creemos un formulario simple con el que el usuario pueda ingresar su nombre. Tenga en cuenta que aquí utilizo intencionalmente una clase para describir el componente, ya que esto hace que sea más fácil demostrar el concepto en cuestión. Puede leer acerca de cómo convertir un componente creado usando una clase en un componente funcional
aquí .
import React from "react"; class SimpleForm extends React.Component { render() { return ( <div> <input type="text" name="firstName" /> <Greetings firstName="John" /> </div> ); } } const App = () => ( <div> <SimpleForm /> </div> );
El usuario puede ingresar algo en el campo de formulario, y eso es bueno. Sin embargo, si lee cuidadosamente este código, puede notar que
John siempre se usa como nombre de usuario en la salida de la página de bienvenida. ¿Qué pasa si no todos nuestros usuarios se llaman así? Si es así, nos colocamos en una posición no muy cómoda.
¿Cómo usar el valor ingresado en el campo? React no se basa en elementos DOM directamente. Los controladores de eventos y el estado de la aplicación nos ayudarán a resolver este problema.
class SimpleForm extends React.Component { state = { firstName: "", }; onFirstNameChange = event => this.setState({ firstName: event.target.value }); render() { return ( <div> <input type="text" name="firstName" onChange={this.onFirstNameChange} /> <Greetings firstName={this.state.firstName} /> </div> ); } }
Puede imaginar un estado como un simple objeto JavaScript, que, en forma de propiedad, se almacena en la clase del componente
SimpleForm . En este objeto, agregamos la propiedad
firstName .
Aquí equipamos el campo
firstName con un controlador de eventos. Comienza cada vez que un usuario ingresa al menos un carácter en un campo. En la clase, la propiedad
onChange es responsable de procesar el
onFirstNameChange onChange , en el que se ejecuta el siguiente comando:
this.setState(...)
Aquí es donde se actualiza el estado del componente. El estado del componente no se actualiza directamente. Esto solo se hace usando el método
setState . Para escribir un nuevo valor en la propiedad
firstName , simplemente pasamos a este método un objeto que contiene lo que debe escribirse en el estado:
{ firstName: event.target.value }
En este caso,
event.target.value es lo que el usuario ingresó en el campo del formulario, es decir, su nombre.
Tenga en cuenta que no declaramos
onFirstNameChange como método. Es muy importante que tales cosas se declaren en forma de propiedades de clase que contengan funciones de flecha, y no en forma de métodos. Si declara una función similar como método, entonces estará vinculada al elemento de formulario que llama a este método, y no a la clase, como podríamos esperar. Esta pequeña cosa a menudo es confusa para los principiantes. Esta es una de las razones para recomendar el uso de componentes funcionales en lugar de clases de componentes.
▍Compruebe los datos ingresados en el formulario
Implementamos un sistema simple para verificar los datos ingresados en el formulario utilizando expresiones regulares. Decidamos que un nombre debe constar de al menos tres caracteres y solo puede contener letras.
Agregue el controlador de eventos
onBlur al componente, que se llama cuando el usuario abandona el campo de entrada. Agregue otra propiedad al estado de la aplicación:
firstNameError . Si ocurrió un error al ingresar el nombre, mostraremos un mensaje sobre esto en el campo.
Analicemos este código.
class SimpleForm extends React.Component { state = { firstName: "", firstNameError: "", }; validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name) ? "The name must contain at least three letters. Numbers and special characters are not allowed." : ""; }; onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); }; onFirstNameChange = event => this.setState({ firstName: event.target.value }); render() { const { firstNameError, firstName } = this.state; return ( <div> <div> <label> First name: <input type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div>{firstNameError}</div>} </label> </div> <Greetings firstName={firstName} /> </div> ); } }
Estado de la solicitud
Desarrollando un sistema de verificación de entrada, nosotros, para empezar, agregamos una nueva propiedad al estado:
firstNameError :
state = { ... firstNameError: "", };
Función de validación de datos
La validación de datos se realiza en la función de flecha
validateName . Valida el nombre ingresado con una expresión regular:
validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name) ? "The name must contain at least three letters..." : ""; }
Si la verificación falla, devolvemos un mensaje de error de la función. Si el nombre pasó la prueba, devolvemos una cadena vacía que indica que no se encontraron errores durante la verificación del nombre. Aquí, en aras de la brevedad, utilizamos el operador ternario JavaScript.
Controlador de eventos OnBlur
onBlur vistazo al
onBlur eventos
onBlur , que se llama cuando el usuario abandona el campo de entrada:
onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); };
Aquí extraemos la propiedad
firstName del estado, aprovechando la capacidad de ES6 para destruir objetos. La primera línea de este código es equivalente a esto:
const firstName = this.state.firstName;
Luego llamamos a la función de verificación de datos descrita anteriormente, pasándole
firstName y escribimos en la propiedad de estado
firstNameError lo que devuelve esta función. Si la verificación falla, se enviará un mensaje de error a esta propiedad. Si tiene éxito, se escribirá una línea vacía allí.
Método de procesamiento
Considere el método
render() del componente:
render() { const { firstNameError, firstName} = this.state; ... }
.
<input ... onBlur={this.onFirstNameBlur} />
onFirstNameBlur onBlur .
{firstNameError && <div>{firstNameError}</div>}
JavaScript.
div , , ,
firstNameError true .
▍
, , , . , :
render() { const { firstNameError, firstName } = this.state; return ( <div style={{ margin: 50, padding: 10, width: 300, border: "1px solid black", backgroundColor: "black", color: "white" }} > <div style={{marginBottom: 10}}> <label> First name: <input style={{backgroundColor: '#EFEFFF', marginLeft: 10}} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div style={{color: 'red', margin: 5}}>{firstNameError}</div>} </label> </div> <Greetings firstName={firstName} /> </div> ); }
React
style .
, , , , , . , .
▍ №2:
, , React-. , , —
render , , . ? , . , , .
? , .
style , . . ,
style.js :
// style.js: const style = { form: { margin: 50, padding: 10, width: 300, border: "1px solid black", backgroundColor: "black", color: "white" }, inputGroup: { marginBottom: 10 }, input: { backgroundColor: "#EFEFFF", marginLeft: 10 }, error: { color: "red", margin: 5 } }; export default style;
, ,
SimpleComponent :
import style from './style'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName } = this.state; return ( <div style={style.form}> <div style={style.inputGroup}> <label> First name: <input style={style.input} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && ( <div style={style.error}>{firstNameError}</div> )} </label> </div> <Greetings firstName={firstName} /> </div> ); } } export default SimpleForm;
, . .
▍
, :
class SimpleForm extends React.Component { state = { ... lastName: "", lastNameError: "" }; validateName = ...; onFirstNameBlur = ...; onFirstNameChange = ...; onLastNameBlur = () => { const { lastName } = this.state; const lastNameError = this.validateName(lastName); return this.setState({ lastNameError }); }; onLastNameChange = event => this.setState({ lastName: event.target.value }); render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <div style={style.inputGroup}> <label> First name: <input style={style.input} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div style={style.error}>{firstNameError}</div>} </label> </div> <div style={style.inputGroup}> <label> Last name: <input style={style.input} type="text" name="lastName" onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} /> {lastNameError && <div style={style.error}>{lastNameError}</div>} </label> </div> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } } export default SimpleForm;
— ,
firstName .
«»? — , .
▍ №3:
, , , , , . , ,
render . .
, , , .
TextField , .
import React from 'react' import style from "./style"; const TextField = ({name, onChange, onBlur, error, label}) => ( <div style={style.inputGroup}> <label> {label} <input style={style.input} type="text" name={name} onChange={onChange} onBlur={onBlur} /> {error && <div style={style.error}>{error}</div>} </label> </div> ); export default TextField;
, ,
render . , , .
SimpleForm :
... import TextField from './TextField'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <TextField name="firstName" label="First name:" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} error={firstNameError} /> <TextField name="lastName" label="Last name:" onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} error={lastNameError} /> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } }
, . ,
TextField .
FirstNameField :
import React from 'react'; import TextField from './TextField'; const FirstNameField = ({...rest}) => ( <TextField name="firstName" label="First name:" {...rest} /> ); export default FirstNameField;
, .
({...rest}) ( rest, ). , , ,
rest . , ,
TextField , « », spread (,
{...rest} , ).
rest , ,
TextField .
, : ,
FirstNameField TextField .
LastNameField :
:
... import FirstNameField from './FirstNameField'; import LastNameField from './LastNameField'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <FirstNameField onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} error={firstNameError} /> <LastNameField onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} error={lastNameError} /> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } }
.
▍
, , , :
- , , , .
- . , , , , 1000 ( ).
- , . , , .
- , , , . . , , . , , , .
- , , , , .
this , .
Resumen
, React- . , , , , . , , , React, , , , UI-.
→ , ,
Estimados lectores! , , React-, .
