Ahora, en este curso de actualización, Module Yeater no escribirá una aplicación de reacción compleja porque esa no es
la idea de este módulo.
Escribiremos una aplicación realista en el módulo principal más adelante este curso después de este módulo aquí donde trabajaremos en
el proyecto del curso.
Así que eso es solo un repaso aquí.
Y me enfoco en los elementos centrales de reacción, Stael, para y no en construir una aplicación increíble.
Por lo tanto, REACT se trata de componentes y, por lo tanto, generalmente dividimos nuestra aplicación en componentes.
Ahora comencemos sin dividirlo, sin embargo.
Y en lugar de generar H one tech aquí, una aplicación, usaré un div, digamos en ese div.
Agreguemos más código h html.
Estoy diciendo h html aquí, por supuesto, es J es X, pero aún se traduce a dos notas de HCM Altidore.
Derecha.
Pero es J es X.
Entonces, aquí podríamos tener H para etiquetar dónde decimos objetivos de causa y debajo de eso queremos tener una lista o agregar una lista
de los objetivos de nuestro curso.
Y son un objetivo.
Podría ser.
Papá, queremos terminar el curso.
Que queremos aprender todo sobre el curso.
Tema principal y que queremos, digamos, ayuda.
Nuestros alumnos en el curso, CU y.
Una sección, y eso podría ser algo de oro.
Ahora, una aplicación muy trivial.
Ahora, no tengo ningún estilo espectacular especial aquí, por eso guardamos eso y lo sacamos.
Pero ahora agregaré un poco de estilo y para eso agregaré una aplicación, el archivo de Sears aquí e importaré Deadfall en
el archivo JavaScript.
Esto, por supuesto, no es posible en Manila, JavaScript, pero debido a eso bajo las herramientas del
capó, Nien analiza nuestros archivos y luego transforma el código.
Esto es posible y esto simplemente se transforma para inyectar este código CSX en el H.
Archivo de tiempo también.
Ahora aquí, le daré a esto una C como clase.
Y hay una cosa especial.
El atributo de clase como este no existe y J es X porque la clase es una palabra clave en JavaScript.
Entonces es el nombre de la clase.
Y así es como se agregan clases de siestas a elementos y J es X.
Todo esto, por supuesto, es una especie de prueba o le recuerda el hecho de que esto no es H Tim.
Pero H Tim.
Sintaxis de aspecto Owlish, todos nombrados como lista de objetivos de clase aquí y ahora aquí, podemos.
Define algunos estilos para el Gollust aquí, y simplemente estableceré la lista de estilos como no aquí, eliminaré un margen
o le daré un margen de dos ram arriba y abajo y un relleno de cero.
Y en cada elemento de la lista de objetivos, agregaré un margen de una habitación superior e inferior cero dos a la izquierda y a la derecha,
y luego simplemente un borde de un píxel sólido.
Y luego este color grisáceo aquí y un relleno de un carnero.
Este es un estilo muy, muy simple porque no quiero dedicar mucho tiempo a escribir
aquí.
Ahora, tal vez un ajuste.
Vamos a dar a la lista un margen de dos cintas en todas las direcciones.
Ahora tenemos esta lista de nuestros objetivos para ajustar los objetivos del curso aquí en la parte superior.
Yo tambien.
Dale a este d'Hiv un nombre de clase, por supuesto, calaveras.
Y luego en D. C. como archivo de EE. UU.
Tal vez en la parte superior, podemos retrasar los objetivos del curso y su d. h para etiquetar y alinear en el centro.
Así.
Ahora de nuevo, muy objetivos Euge.
Pero eso está bien para el discurso aquí.
Solo estamos practicando reaccionar.
Así que tenemos estos objetivos del curso aquí.
Increíble.
Esto, por supuesto, es un marcado muy simple.
Ahora, lo que a menudo hace reacciona, ya que dividiría esto en más componentes,
por ejemplo, externalizaría esta lista en un componente separado para mantener cada componente por sí solo relativamente delgado
y enfocado en una tarea.
Para eso, podemos agregar una carpeta sup de componentes aquí en la carpeta fuente.
Y allí agregaré una lista de objetivos J. S. Expediente.
Esto mantendrá mi componente de la lista de objetivos.
Ahora, para crear un componente tan nuevo, primero tenemos que importar, reaccionar desde reaccionar.
De lo contrario, no podemos usar este J como X Syntex.
Y luego mencioné muerto.
Un componente es una función.
Y, por cierto, también puede crear con la palabra clave de función o.
Con una expresión de función o.
Con el texto de la función Flecha que usé antes, era solo un somático que usaré aquí, pero eso no
es algo que deba hacer.
Y luego aquí exporto mi lista de objetivos de esta manera.
Y ahora aquí, regreso.
Esta lista desordenada, salt, córtela aquí y luego agregue, aquí hay un valor de retorno y, si
se realiza una reforma, verá automáticamente que estos paréntesis se agregan a su alrededor para que pueda formatearse bien
en varias líneas.
De lo contrario, esto no sería JavaScript válido.
Así es con los paréntesis.
Es porque entonces JavaScript sabe que este bloque pertenece juntos.
Así que ahora tenemos la lista de objetivos aquí y una aplicación.
Sí, ahora podemos importar nuestro componente de lista de objetivos.
Puedes nombrarlo aquí como quieras.
No tiene que ser el mismo nombre con el que lo exporta aquí.
Lo único importante es que tiene que comenzar con un carácter en mayúscula aquí en Abcess y una importación desde la carpeta
de componentes y son de la lista de objetivos.
Y como mencioné anteriormente, puedes omitir D. extensión de archivo aquí.
No es requerido
Y luego aquí usas go list como un J. normal S. Elemento X, como un elemento H tim L normal, se podría
decir.
Pero dado que no tenemos contenido entre la etiqueta de apertura y cierre, podemos y tenemos que escribir una etiqueta de cierre
automático aquí.
Esto no estaría permitido.
Siempre debes cerrar tax y jazz x.
Entonces este sería mi componente de la lista de objetivos.
Y por lo tanto, si tenemos seguridad, vemos la misma salida que antes.
También obtenemos el mismo estilo porque los estilos aquí siempre se aplican globalmente, incluso si los importa a un
archivo de componente específico.
Y aún así, es una buena práctica configurar los estilos en el archivo CSX junto al componente al que pertenecen.
Por lo tanto, agregaré una lista de objetivos C como archivo s.
Agregar mi lista de objetivos Stollsteimer e importar esa lista de objetivos.
CSX cae en el archivo JavaScript de la lista de objetivos.
Esto no es obligatorio, pero facilita la búsqueda de los estilos que pertenecen a este componente.
Tenga en cuenta que los estilos no tienen un alcance automático para un componente, aunque las reglas normales
como se aplican porque todo este C es el siguiente, sin importar dónde los importe, se aplican globalmente a
toda su página.
Con eso, sin embargo, volvemos al mismo resultado que antes.
Entonces, ¿por qué hicimos eso?
¿Y por qué dividimos esto si tenemos el mismo resultado que antes?