React Tutorial 2024
1.0.0
2024 Su nueva herramienta de aprendizajeReact es una biblioteca JavaScript para crear interfaces de usuario. Permite a los desarrolladores crear componentes de UI reutilizables y actualizar eficientemente el DOM utilizando un DOM virtual para un rendimiento óptimo.
Si desea crear una nueva aplicación o sitio web por completo con React, sugiero elegir uno de los marcos con motor React que sean populares en la comunidad.
Puede usar React sin un marco, pero hemos descubierto que la mayoría de las aplicaciones y sitios eventualmente deben abordar problemas comunes como la división de código, el enrutamiento, la obtención de datos y la generación HTML. Estos desafíos no son exclusivos de reaccionar, pero son comunes a todas las bibliotecas de la interfaz de usuario.
Al comenzar con un marco, puede ponerse en funcionamiento rápidamente con React y evitar la necesidad de desarrollar su propio marco más adelante.
El enrutador de las páginas de Next.js es un marco React de pila completa. Es versátil y le permite crear aplicaciones React de cualquier tamaño, desde un blog principalmente estático hasta una aplicación dinámica compleja. Para crear un nuevo proyecto Next.js, ejecute en su terminal:
npx create-next-app@latest
Next.js es mantenido por Vercel. Puede implementar una aplicación Next.js en cualquier nodo.js o alojamiento sin servidor, o en su propio servidor. Next.js también admite una exportación estática que no requiere un servidor.
O App Router Do Next.js es un rediseño de las API de Next.js con el objetivo de cumplir con la visión de arquitectura de pila completa del equipo React. Le permite obtener datos en componentes asincrónicos que se ejecutan en el servidor o incluso durante la compilación.
Next.js es mantenido por Vercel. Puede implementar una aplicación Next.js en cualquier nodo.js o alojamiento sin servidor, o en su propio servidor. Next.js también es compatible con la exportación estática que no requiere un servidor.
Descripción general Vite (palabra francesa para "rápido", pronunciado /vit /, como "VEET") es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y más delgada para proyectos web modernos. Consiste en dos partes principales:
Un servidor de desarrollo que proporciona mejoras de características enriquecidas sobre los módulos ES nativos, por ejemplo, reemplazo de módulos Hot Hot extremadamente rápido (HMR).
Un comando de compilación que envuelve su código con acurrucado, preconfigurado para obtener activos estáticos altamente optimizados para la producción.
Vite es obstinado y viene con valores predeterminados sensibles de la caja. Lea sobre lo que es posible en la guía de características. El soporte para marcos o integración con otras herramientas es posible a través de complementos. La sección de configuración explica cómo adaptar VITE a su proyecto si es necesario.
Antes de comenzar, asegúrese de tener Node.js instalado en su sistema. Si aún no lo tiene, puede descargarlo desde el sitio web oficial de Node.js, es realmente simple.
npx create-vite your-project-name --template react
Reemplace su nombre del proyecto con el nombre que desea para su proyecto. VITE admite muchos marcos, pero en este caso, especificamos la plantilla React con la opción React -template.
cd your-project-name
No olvide reemplazar su nombre del proyecto con el nombre real que eligió para su proyecto (a menos que, por supuesto, desee mantener este nombre para su proyecto).
npm
npm run dev
Después de ejecutar estos comandos, debe ver un mensaje en su terminal que indique que su sitio web React se ejecuta en un puerto específico, generalmente es un número de puerto 'aleatorio' como http: // localhost: 5173. Ahora, abra su navegador y visite la URL proporcionada para ver su sitio web React en acción.
Use las herramientas de desarrollador React para inspeccionar los componentes React, editar accesorios y estado e identificar problemas de rendimiento.
Extensión del navegador La forma más fácil de depurar sitios web construidos con React es instalar la extensión del navegador React Developer Tools. Está disponible para varios navegadores populares:
Para otros navegadores (por ejemplo, Safari), instale el paquete NPM React-Devtools:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
A continuación, abra las herramientas del desarrollador desde la terminal:
react-devtools
Luego conecte su sitio web agregando la siguiente etiqueta <Script> al comienzo de su sitio web:
<html>
<head>
<script src="http://localhost:8097"></script>
JSX es una extensión de sintaxis para JavaScript que se parece a XML o HTML. Permite a los desarrolladores escribir elementos y componentes HTML de una manera más concisa y legible dentro de los archivos JavaScript.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Los componentes funcionales son funciones simples que aceptan accesorios como argumento y devuelven elementos JSX. Con los ganchos react, los componentes funcionales también pueden tener efectos estatales y secundarios.
import React from 'react';
const FunctionalComponent = () => {
return <p>This is a functional component.</p>;
}
export default FunctionalComponent;
Los componentes de la clase son clases ES6 que extienden el componente React. Pueden mantener y administrar el estado local y tener acceso a métodos de ciclo de vida, lo que los hace más ricos en características que los componentes funcionales.
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <p>This is a class component.</p>;
}
}
export default ClassComponent;
Los accesorios son una forma de pasar los datos de un componente principal a un componente infantil en React. Son inmutables y proporcionan una forma de hacer componentes dinámicos y reutilizables.
import React from 'react';
const PropsExample = (props) => {
return <p>{props.message}</p>;
}
export default PropsExample;
State React representa el estado cambiante de un componente. Esto permite que los componentes administren y actualicen sus propios datos, lo que resulta en interfaces de usuarios dinámicas e interactivas.
import React, { Component } from 'react';
class StateExample extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
export default StateExample;
Métodos de ciclo de vida são métodos especies em compentos de classe que são Invocados em Diferentes Fases do Ciclo de Vida de um Componente. ComponentDidMount é um Método de Ciclo de Vida Comummente Utilizado, ejecutado de depois de um componente ser renderizado no dom.
import React, { Component } from 'react';
class LifecycleExample extends Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <p>Lifecycle Example</p>;
}
}
export default LifecycleExample;
React usa CamelCase para manejar eventos. Las funciones se pueden definir para manejar eventos como clics, cambios, etc., proporcionando interactividad a los componentes.
import React from 'react';
const EventHandlingExample = () => {
const handleClick = () => {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default EventHandlingExample;
Los ganchos react son funciones que permiten que los componentes funcionales administren los efectos estatales y secundarios. Se introdujeron en React 16.8 y proporcionan una forma más concisa de trabajar con métodos de ciclo de vida y estado en componentes funcionales.
import React, { useState } from 'react';
const UseStateExample = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
export default UseStateExample;
Los componentes controlados en React tienen entradas y su estado controlado por React. Reciben su valor actual y el controlador Onchange como accesorios, haciéndolos controlados por React y no por el DOM.
import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
}
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="Type here"
/>
);
}
export default ControlledComponent;
Los límites de error son componentes React que detectan errores de JavaScript en cualquier parte del árbol de componentes infantiles y registran esos errores, presentan una interfaz de usuario de alternativa o toman otras medidas.
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong.</p>;
}
return this.props.children;
}
}
export default ErrorBoundary;
Los componentes de orden superior (HOC) son funciones que toman un componente y devuelven un nuevo componente con funcionalidad adicional. Son una forma de reutilizar la lógica del componente.
import React from 'react';
const WithLogger = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
export default WithLogger;
// Usage
import React from 'react';
import WithLogger from './WithLogger';
const MyComponent = () => {
return <p>My Component</p>;
}
const EnhancedComponent = WithLogger(MyComponent);
React proporciona la función map para representar las listas de elementos dinámicamente. Cada elemento de la matriz se asigna a un elemento React, lo que hace que sea más fácil representar contenido dinámico.
import React from 'react';
const RenderingList = () => {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default RenderingList;
La API de contexto en React ofrece una forma de transmitir datos a través del árbol de componentes sin tener que pasar accesorios manualmente en cada nivel. Es útil para compartir valores como temas o estado de autenticación.
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
}
export default ThemedComponent;
Las teclas en React ayudan a identificar qué elementos se han cambiado, agregado o eliminado. Deben ser únicos dentro de la lista y ayudar a reaccionar con actualizaciones eficientes.
import React from 'react';
const KeysExample = () => {
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default KeysExample;
El manejo de los formularios en React implica la gestión de datos de formulario utilizando el envío de formulario de estado y manejo a través de los manejadores de eventos. Los componentes controlados se utilizan para sincronizar elementos de formulario con el estado de React.
import React, { useState } from 'react';
const FormExample = () => {
const [formData, setFormData] = useState({ username: '', password: '' });
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
}
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted:', formData);
}
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
export default FormExample;
Estilos en línea: React le permite diseñar componentes utilizando estilos en línea, donde los estilos se definen como objetos y se aplican directamente a los elementos.
import React from 'react';
const InlineStyleExample = () => {
const styles = {
color: 'blue',
fontSize: '18px',
};
return <p style={styles}>Styled with inline styles</p>;
}
export default InlineStyleExample;
Render Props es una técnica para compartir el código entre los componentes React utilizando un apoyo cuyo valor es una función. Esto permite la composición dinámica de los componentes.
import React, { useState } from 'react';
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
}
return (
<div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
{render(position)}
</div>
);
}
export default MouseTracker;
// Usage
import React from 'react';
import MouseTracker from './MouseTracker';
const App = () => {
return (
<MouseTracker
render={(position) => (
<p>
Mouse position: {position.x}, {position.y}
</p>
)}
/>
);
}
export default App;
Los módulos CSS ayudan a definir el alcance de los estilos para un componente específico, evitando los conflictos de estilo global. Cada componente puede tener su propio módulo CSS con estilos de alcance local.
.myComponent {
color: green;
}
import React from 'react';
import styles from './CSSModulesExample.module.css';
const CSSModulesExample = () => {
return <p className={styles.myComponent}>Styled with CSS Modules</p>;
}
export default CSSModulesExample;
Características:
import React, { useState } from 'react';
const TodoApp = () => {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
setTasks([...tasks, { text: newTask, completed: false }]);
setNewTask('');
};
const toggleTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks[index].completed = !updatedTasks[index].completed;
setTasks(updatedTasks);
};
const removeTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks.splice(index, 1);
setTasks(updatedTasks);
};
return (
<div>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
/>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleTask(index)}
/>
<span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
{task.text}
</span>
<button onClick={() => removeTask(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoApp;
Este ejemplo de la aplicación meteorológica ilustra la aplicación práctica de los conceptos React, incluida la gestión del estado, el efecto de uso para los efectos secundarios, el manejo de eventos, la interacción API y la representación condicional. Los usuarios pueden aprender cómo crear una aplicación meteorológica funcional y comprender la integración de los ganchos React en escenarios del mundo real.
Fetaures:
Componente funcional y ganchos de estado:
useState para weather y city .Uso de UseeFectect para obtener datos:
Los ganchos useEffect se utilizan para realizar efectos secundarios, como obtener datos meteorológicos de la API OpenWeathermap.
La función fetchWeatherData es asíncrona y obtiene datos meteorológicos basados en la ciudad seleccionada utilizando la API fetch .
Representación condicional:
Los datos meteorológicos se representan condicionalmente solo si existe ( weather && ... ).
Manejo de eventos:
setCity se llama en su evento onChange .Interacción API:
Actualización dinámica de contenido:
Estilo:
Conversión de temperatura:
// src/RealWorldExamples/WeatherApp.js
import React, { useState, useEffect } from 'react';
const WeatherApp = () => {
const [weather, setWeather] = useState(null);
const [city, setCity] = useState('New York');
const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
useEffect(() => {
// Fetch weather data from OpenWeatherMap API
const fetchWeatherData = async () => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
);
if (!response.ok) {
throw new Error('Failed to fetch weather data');
}
const data = await response.json();
setWeather(data);
} catch (error) {
console.error(error.message);
}
};
fetchWeatherData();
}, [city, apiKey]);
return (
<div>
<h1>Weather App</h1>
<label>
Enter City:
<input
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
</label>
{weather && (
<div>
<h2>{weather.name}, {weather.sys.country}</h2>
<p>Temperature: {Math.round(weather.main.temp - 273.15)}°C</p>
<p>Weather: {weather.weather[0].description}</p>
</div>
)}
</div>
);
};
export default WeatherApp;
Las mejores prácticas:
/src
/components
/Button
Button.js
Button.test.js
Button.css
/features
/Todo
TodoList.js
TodoItem.js
TodoForm.js
/styles
global.css
/tests
/unit
Button.test.js
/integration
TodoIntegration.test.js
Las mejores prácticas:
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
Las mejores prácticas:
Ejemplo:
// Jest Unit Test
test('renders correctly', () => {
const { getByText } = render(<Button label="Click me" />);
expect(getByText('Click me')).toBeInTheDocument();
});
// Jest Integration Test
test('increments count on button click', () => {
const { getByText } = render(<Counter />);
fireEvent.click(getByText('Increment'));
expect(getByText('Count: 1')).toBeInTheDocument();
});
// React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
test('clicking button increments count', () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});
Las mejores prácticas:
Use el enrutador React para el enrutamiento del lado del cliente en una aplicación de una sola página.
Defina rutas a diferentes vistas o secciones de su aplicación.
Implemente componentes de navegación, como <Link> , para permitir una fácil navegación entre rutas.
Ejemplo:
// React Router
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const App = () => (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
);
Mejor práctica:
// Using Local Component State
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
// Using Context API
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
};
// Using Redux
// (Assuming you have a Redux store configured)
import { useSelector, useDispatch } from 'react-redux';
const CounterRedux = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
};
Las mejores prácticas:
Ejemplo:
Las mejores prácticas:
Ejemplo:
// Error Boundary
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong. Please try again.</p>;
}
return this.props.children;
}
}
Las mejores prácticas:
Ejemplo:
// Semantic HTML Elements
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
// ARIA Roles and Attributes
<button aria-label="Close" onClick={handleClose}>
✕
</button>
// Keyboard Navigation
<input type="text" onKeyDown={handleKeyDown} />
Las mejores prácticas:
Ejemplo:
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
// Using PureComponent
class PureCounter extends React.PureComponent {
render() {
return <p>Count: {this.props.count}</p>;
}
Actualice regularmente las dependencias para beneficiarse de nuevas funciones, correcciones de errores y parches de seguridad.
Siga las versiones semánticas para bibliotecas y paquetes utilizados en el proyecto.
Tenga cuidado con las principales actualizaciones y pruebe a fondo antes de actualizarse.
Ejemplo:
# Regularly update dependencies
npm update
# Follow semantic versioning
# Example: Major.Minor.Patch
# ^1.2.3 means any version that is compatible with 1.2.3
Configurar el paquete web para las compilaciones de producción con optimizaciones:
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// Other webpack configurations...
};
¡Gracias por su interés en contribuir a este increíble tutorial React! Sus contribuciones ayudan a que este recurso sea aún más valioso para los estudiantes de todos los niveles. Ya sea que esté arreglando un error, mejorando una característica existente o agregando algo completamente nuevo, sus esfuerzos marcan la diferencia.
** Bifurca el repositorio: haga clic en el botón "Bifurca" en la esquina superior derecha de este repositorio para crear su copia.
** Clone El repositorio: Clone el repositorio a su máquina local usando git clone https://github.com/DaveSimoes/React-Tutorial-2024.git
** Crear una rama: cree una nueva rama para su contribución con un nombre descriptivo: git checkout -b your-feature .
** Haga cambios: realice sus cambios en los archivos apropiados. Siéntase libre de mejorar los ejemplos existentes, agregar nuevos errores tipográficos o mejorar la documentación.
** Cambios de confirmación: envíe sus cambios con un mensaje claro y conciso: git commit -m "Your message here" .
** Cambios de empuje: envíe sus cambios al repositorio bifurcado: git push origin your-feature .
Cree una solicitud de extracción: abra una solicitud de extracción en el repositorio original. Forneça um título Claro, Descreva Suas Alterações e envía la solicitud de extracción.
Siga estilos de codificación consistentes. Asegúrese de que su código esté bien documentado, especialmente si está agregando nuevos ejemplos o características.
Gracias por considerar contribuir a este tutorial React. Su dedicación para mejorar este recurso es muy apreciada. ¡Aprendamos y crecamos juntos!
Si encontró útil este tutorial React, ¡considere darle una estrella! Su apoyo es increíblemente motivador y ayuda a otros a descubrir este recurso. ¡Gracias por ser parte de nuestra comunidad y hap!
Reaccionar biblioteca
