REACCIONAR - ¿El componente de introducción simple no se reproduce?

Una de las mejores cosas de React es su sistema de componentes flexible. Una vez que lo domine, puede dividir su aplicación en componentes reutilizables e incluirlos en todo su proyecto.

El problema es que hay algunas trampas que dificultan el trabajo con componentes para los nuevos en React.

Por ejemplo, digamos que tiene el siguiente componente mainIntro.js:

const mainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default mainIntro;

Y desea importarlo a App.js:

import mainIntro from './components' class App extends React.Component{ render(){ return(  ); } } const mainNode = document.getElementById("quoter"); ReactDOM.render(,mainNode);

Pero mainIntrono se carga por alguna razón. Echemos un vistazo más de cerca a lo que está sucediendo.

Nombrar sus componentes

Para cualquiera que esté familiarizado con la programación orientada a objetos, es una convención común nombrar cada clase con una letra mayúscula. Por ejemplo, una clase para describir a una persona se llamaría Personpara indicar que es una clase.

En React, que usa JSX en lugar de JavaScript simple, la primera letra de una etiqueta indica qué tipo de elemento es. Los primeros caracteres en mayúsculas se utilizan para especificar componentes de React, por lo mainIntroque en su lugar deberían llamarse MainIntro:

const MainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default MainIntro;

Si bien el nombre del archivo aún puede serlo mainIntro.js, también es una buena idea poner en mayúscula el primer carácter. Más tarde, cuando escanee el contenido del directorio, podrá identificar rápidamente que MainIntro.jscontiene un componente.

Ahora App.jsdebería verse así:

import MainIntro from './components/MainIntro.js'; class App extends React.Component{ render(){ return(  ); } } const mainNode = document.getElementById("quoter"); ReactDOM.render(,mainNode);

¿Cómo se instala React?

Hay dos formas principales de usar React. Primero, instálelo y configúrelo localmente, probablemente a través de create-react-app. En segundo lugar, a través de un CDN.

Es posible que haya notado anteriormente que los fragmentos de código en realidad no incluyen React en el proyecto con import React from'react';. Esto arrojará un error si está trabajando con React localmente.

Sin embargo, si está usando un CDN para cargar React, está disponible globalmente y no necesita importarlo como se indicó anteriormente.

Funciones de flecha

Antes de sumergirse en React, es importante tener un conocimiento sólido de JavaScript, particularmente la sintaxis de ES6.

Eche otro vistazo al MainIntrocomponente:

const MainIntro = props => ( 

Hunter x Hunter Quotes

"When I say it doesn't hurt me, that means I can bear it." - Killua Zoldyck Next Quote Tweet this quote ) export default MainIntro;

Si observa detenidamente la primera línea, notará un error de sintaxis:

const MainIntro = props => (

Está escribiendo un componente funcional, que normalmente son funciones simples de JavaScript que pueden aceptar props como argumento y devolver JSX válido. Por supuesto, la sintaxis debe ser correcta para que regrese correctamente.

Las funciones de flecha se pueden escribir de muchas maneras, pero para este ejemplo, deberá agregar las llaves ( {}) y asegurarse de devolver JSX desde el propio componente:

const MainIntro = props => { return ( //... rest of the code ); }

Después de implementar todos los cambios mencionados anteriormente, su componente ahora debería renderizarse correctamente.

Aunque la principal distinción entre componentes funcionales y de clase en React solía ser que el primero era "sin estado" mientras que el segundo era "lleno de estado", React Hooks ha borrado las líneas entre ellos. Lea más sobre ambos componentes en esta descripción general y esta inmersión más profunda en los componentes funcionales con React Hooks.