Proyecto de blog React
En este capítulo empezarás desde cero, crearás un proyecto de blog React con Vite y entenderás la sintaxis de JSX y la estructura del proyecto.
Preparación del entorno
Antes de empezar, asegúrate de tener Node.js instalado en tu equipo (se recomienda v16 o superior).
Node.js es el entorno de ejecución de JavaScript, y npm es su gestor de paquetes incorporado.
Comprueba si Node.js está instalado
$ node -v v20.10.0
Si se muestra un número de versión, significa que ya está instalado.
Si no, ve anodejs.orgDescarga la versión LTS e instálala.
Crear un proyecto React
Vite es una de las herramientas de compilación frontend más rápidas actualmente y tiene soporte nativo para React.
En la terminal, entra en el directorio donde quieres almacenar el proyecto y ejecuta:
$ npm create vite@latest blog-app -- --template react
Este comando le indica a Vite: crea un proyecto llamado blog-app utilizando la plantilla de React.
Entra en el directorio del proyecto, instala las dependencias e inicia el servidor de desarrollo:
$ cd blog-app $ npm install $ npm run dev
El navegador abrirá automáticamente http://localhost:5173; si ves la página de bienvenida predeterminada de Vite + React, significa que el proyecto se ha iniciado correctamente.
Si al iniciar aparece un error indicando que faltan dependencias, puedes intentar ejecutar
npm instally luego volver a ejecutarlo.
Explicación de la estructura de directorios del proyecto
Abre la carpeta blog-app y verás la siguiente estructura:
blog-app/ ├── index.html # 入口 HTML 文件 ├── package.json # 项目配置与依赖列表 ├── vite.config.js # Vite 构建工具配置 ├── public/ # 不经过编译的静态资源 ├── src/ │ ├── main.jsx # JS 入口，将 React 组件挂载到 DOM │ ├── App.jsx # 根组件，所有页面的外壳 │ ├── App.css # App 组件的样式 │ ├── index.css # 全局样式 │ └── assets/ # 需要编译的静态资源（图片等）
Funciones de los archivos principales
index.html— El archivo de entrada al que accede el navegador.
Dentro hay un<div id="root"></div>, y la aplicación React se monta en este div.
src/main.jsx— El archivo de arranque de la aplicación React.
Se encarga de encontrar el#rootelemento, y luego usacreateRoottomar<App />componente para renderizarlo dentro.
Ejemplo
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
// Encuentra el <div id="root"></div> en el HTML
// Usa createRoot para crear un nodo raíz de React y luego renderiza <App /> dentro
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
src/App.jsx— Componente raíz.
Es el contenedor más externo de todas las páginas; el JSX que devuelve se renderiza en la página.
<React.StrictMode>Es el modo estricto de React, solo tiene efecto en el entorno de desarrollo. Realiza comprobaciones adicionales en los componentes (como renderizado duplicado) para ayudarte a detectar problemas potenciales. Se ignora automáticamente en la compilación de producción.
¿Qué es JSX?
JSXEs una extensión de sintaxis de JavaScript que te permite escribir código similar a HTML en JS.
Un componente de React es esencialmente una función que devuelve JSX.
Diferencias clave entre JSX y HTML
| Escenario | HTML | JSX |
|---|---|---|
| Atributo class | class="container" | className="container" |
| Etiquetas de autocierre | <img src="....html"> | <img src="....html" /> |
| Incrustar expresiones de JS | No soportado | <h1>{title}</h1> |
| Atributo style | style="color: red" | style={{ color: 'red' }} |
| Comentarios | <!-- comentario --> | {/* comentario */} |
| Enlace de eventos | onclick="fn()" | onClick={fn} |
¿Por qué se usa
classNameen lugar declass? Porque JSX es, en esencia, JavaScript, yclasses una palabra reservada de JS. De la misma manera,forse cambia ahtmlFor。
Ejemplo
function Greeting() {
const name = 'EJEMPLO'
const isLoggedIn = true
return (
<div className="greeting">
{/* Comentario JSX: dentro de las llaves se coloca cualquier expresión JS */}
<h1>Hello, {name}!</h1>
<p>Hora actual:{new Date().toLocaleDateString()}</p>
{isLoggedIn && <p>¡Bienvenido de nuevo!</p>}
</div>
)
}
Recuerda la regla clave:En JSX, dentro de las llaves puedes poner cualquier expresión JS— variables, llamadas a funciones, operaciones ternarias, map de arrays, todo vale.
Componente React = función
La esencia de un componente funcional de React es:Una función que recibe props como parámetro y devuelve un fragmento de JSX.。
Ejemplo
// El nombre del componente debe comenzar con letra mayúscula
function BlogHeader() {
return (
<header>
<h1>EJEMPLO Blog</h1>
</header>
)
}
// Usar el componente: escríbelo como una etiqueta HTML, puede ser autocierre o por pares
function App() {
return (
<div>
<BlogHeader />
<main>
<p>El contenido del blog se mostrará aquí</p>
</main>
</div>
)
}
export default App
El nombre del componente debecomenzar con mayúscula. Si comienza con minúscula, React lo tratará como una etiqueta HTML normal (div, span, etc.); solo si comienza con mayúscula se tratará como un componente personalizado.
Manos a la obra: vacía la plantilla y escribe el esqueleto del blog
Borra el contenido de App.jsx y App.css generados por defecto y sustitúyelo por la estructura básica del blog.
Ejemplo
import './App.css'
function App() {
return (
<div className="app">
{/* Barra de navegación superior */}
<header className="navbar">
<h1 className="logo">EJEMPLO Blog</h1>
<nav>
<a href="/">Inicio</a>
<a href="#">Acerca de</a>
</nav>
</header>
{/* Área de contenido principal */}
<main className="container">
<p>El contenido del blog se mostrará aquí</p>
</main>
{/* Pie de página */}
<footer className="footer">
<p>© 2024 EJEMPLO Blog. Powered by React.</p>
</footer>
</div>
)
}
export default App
Ejemplo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
/* Barra de navegación */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.logo {
font-size: 24px;
color: #61dafb;
}
.navbar nav a {
margin-left: 20px;
text-decoration: none;
color: #333;
}
/* Área de contenido principal */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}
/* Pie de página */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}
Después de guardar, el navegador se actualizará automáticamente y verás un esqueleto de blog limpio: barra de navegación superior + área de contenido central + pie de página inferior.
Resumen del capítulo
En este capítulo has completado tres cosas: has creado un proyecto React con Vite, has entendido las diferencias clave entre JSX y HTML, y has escrito el esqueleto JSX básico del blog.
Conclusión clave: un componente React es una función que devuelve JSX, y en JSX las llaves pueden contener cualquier expresión JS.
Otros recursos