Tu segundo componente
Parte de la sección Fundamentos del Journey de React de Coddy — lección 12 de 42.
Extraigamos un componente. Puedes definir tantos componentes como quieras en un solo archivo: los más pequeños arriba, App al final:
function Welcome() {
return <p>Glad you're here!</p>;
}
export default function App() {
return (
<div>
<Welcome />
</div>
);
}Solo App lleva export default: es el componente de entrada que main.jsx renderiza. Los demás son auxiliares internos.
Desafío
PrincipianteCrea tu primer componente independiente.
- Define un componente llamado
Header(¡con H mayúscula!) arriba deApp. Este devuelve un<h1>conid="page-title"y el textoMy Blog. - Rendertízalo dentro del
<div>de App con<Header />.
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Conoce React
¿Qué es React?Tu primer componenteRegla del padre únicoJSX no es HTMLRecapitulación: Conoce React2Expresiones JSX
LlavesMatemáticas dentro de las llavesLlaves en atributosLlamada a funciones en JSXRecapitulación: Expresiones JSX5Estado y Eventos
¿Qué es el estado?Contador de clicsContar en pasosAlternar con estadoEstado independienteRecapitulación: Estado y eventos8Proyecto: Tarjeta de perfil
Paso 1: Estructura de la tarjetaPaso 2: Tarjeta con PropsPaso 3: Botón de Me gustaPaso 4: Alternador de Seguir3Componentes
Bloques de construcciónTu segundo componenteReutilizar componentesComponer una páginaResumen: Componentes