React Tutorial 2024
1.0.0
2024 Ваш новейший инструмент обученияReact - это библиотека JavaScript для создания пользовательских интерфейсов. Это позволяет разработчикам создавать многоразовые компоненты пользовательского интерфейса и эффективно обновлять DOM, используя виртуальный DOM для оптимальной производительности.
Если вы хотите полностью создать новое приложение или веб-сайт с React, я предлагаю выбрать одну из рамках с реагированием, которые популярны в сообществе.
Вы можете использовать React без структуры, но мы обнаружили, что большинству приложений и сайтов в конечном итоге необходимо решать общие проблемы, такие как разделение кода, маршрутизация, извлечение данных и генерация HTML. Эти проблемы не являются уникальными для реагирования, но являются общими для всех библиотек пользовательского интерфейса.
Начиная с рамки, вы можете быстро встать и работать с React и избежать необходимости разработки собственной структуры позже.
Следующая маршрутизатор страниц-это каркас React с полным стеком. Это универсально и позволяет создавать приложения React любого размера - от в основном статического блога до сложного динамического приложения. Чтобы создать новый проект Next.js, запустите в своем терминале:
npx create-next-app@latest
Next.js поддерживается Vercel. Вы можете развернуть приложение Next.js на любой Node.js или без сервера хостинга или на свой собственный сервер. Next.js также поддерживает статический экспорт, который не требует сервера.
O Приложение маршрутизатора do next.js-это перепроектирование API lete.js, направленных на выполнение полноценного архитектурного видения команды React. Это позволяет вам получать данные в асинхронных компонентах, которые работают на сервере или даже во время сборки.
Next.js поддерживается Vercel. Вы можете развернуть приложение Next.js на любой Node.js или без сервера хостинга или на свой собственный сервер. Next.js также поддерживает статический экспорт, который не требует сервера.
Обзор Vite (французское слово «быстро», произносится /vit /, как «Veet») - это инструмент сборки, который направлен на обеспечение более быстрого и более стройного опыта разработки для современных веб -проектов. Он состоит из двух основных частей:
DEV -сервер, который обеспечивает богатые улучшения функций по сравнению с нативными модулями ES, например, чрезвычайно быстрой заменой горячих модулей (HMR).
Команда сборки, которая объединяет ваш код с помощью подключения, предварительно сконфигурированной для вывода высоко оптимизированных статических активов для производства.
Vite является самоуверенными и поставляется с разумными значениями по умолчанию из коробки. Прочитайте о том, что возможно в руководстве по функциям. Поддержка фреймворков или интеграции с другими инструментами возможна через плагины. Раздел конфигурации объясняет, как адаптировать Veite к вашему проекту, если это необходимо.
Прежде чем начать, убедитесь, что у вас установлен Node.js в вашей системе. Если у вас его еще нет, вы можете скачать его с официального сайта Node.js, это действительно просто.
npx create-vite your-project-name --template react
Замените свое именование вашего проекта на имя, которое вы хотите для своего проекта. VITE поддерживает многие рамки, но в этом случае мы указываем шаблон React с опцией React -Template.
cd your-project-name
Не забудьте заменить свое именем вашего проекта на фактическое имя, которое вы выбрали для своего проекта (если, конечно, вы хотите сохранить это имя для своего проекта).
npm
npm run dev
После запуска этих команд вы должны увидеть сообщение в вашем терминале, указывающее, что ваш веб -сайт React работает на конкретном порте, это обычно «случайный» номер порта, такой как http: // localhost: 5173. Теперь откройте свой браузер и посетите предоставленный URL, чтобы увидеть ваш веб -сайт React в действии.
Используйте инструменты разработчика React для проверки компонентов React, редактирования реквизита и состояния, а также выявить проблемы с производительностью.
Расширение браузера Самый простой способ отладки веб -сайтов, созданных с помощью React, - это установить расширение браузера React Developer Tools. Он доступен для нескольких популярных браузеров:
Для других браузеров (например, Safari) установите пакет NPM React-Devtools:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
Затем откройте инструменты разработчика с терминала:
react-devtools
Затем подключите свой веб -сайт, добавив следующий тег <Script> к началу вашего сайта:
<html>
<head>
<script src="http://localhost:8097"></script>
JSX является расширением синтаксиса для JavaScript, который похож на XML или HTML. Это позволяет разработчикам писать HTML -элементы и компоненты более кратким и читаемым образом в файлах JavaScript.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Функциональные компоненты - это простые функции, которые принимают реквизиты в качестве аргумента и возвращают элементы JSX. С React Crows функциональные компоненты также могут иметь состояние и побочные эффекты.
import React from 'react';
const FunctionalComponent = () => {
return <p>This is a functional component.</p>;
}
export default FunctionalComponent;
Компоненты классов - это классы ES6, которые расширяют компонент React. Они могут поддерживать и управлять местным состоянием и иметь доступ к методам жизненного цикла, что делает их более богатыми объектами, чем функциональные компоненты.
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <p>This is a class component.</p>;
}
}
export default ClassComponent;
Реквизит - это способ передачи данных от родительского компонента до дочернего компонента в React. Они неизменны и обеспечивают способ сделать компоненты динамической и повторно используемым.
import React from 'react';
const PropsExample = (props) => {
return <p>{props.message}</p>;
}
export default PropsExample;
Государственное реагирование представляет изменяющееся состояние компонента. Это позволяет компонентам управлять и обновлять свои собственные данные, что приводит к динамическим и интерактивным пользовательским интерфейсам.
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;
Методы жизненного цикла Сан -Методос E -em Componentes de classe Que Sã Invocados em дифференцируйте фантастики, делающиеся ciclo de vida de um componentee. ComponentDidMount é UM Método de Ciclo de Vida Comummente utilizado, receadado 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 использует Camelcase для обработки событий. Функции могут быть определены для обработки событий, таких как клики, изменения и т. Д., Предоставляя интерактивность компонентам.
import React from 'react';
const EventHandlingExample = () => {
const handleClick = () => {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default EventHandlingExample;
React Hooks - это функции, которые позволяют функциональным компонентам управлять состоянием и побочными эффектами. Они были введены в React 16.8 и обеспечивают более краткий способ работы с методами состояния и жизненного цикла в функциональных компонентах.
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;
Контролируемые компоненты в React имеют входные данные и их состояние, контролируемое React. Они получают свое текущее значение и обработчик онколов в качестве реквизита, что делает их контролируемыми реакциями, а не 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;
Границы ошибок - это компоненты реагирования, которые обнаруживают ошибки JavaScript в любом месте дерева дочерних компонентов и регистрируют эти ошибки, представляют резервный интерфейс или предпринимают другие действия.
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;
Компоненты более высокого порядка (HOC) - это функции, которые принимают компонент и возвращают новый компонент с дополнительной функциональностью. Это способ повторного использования логики компонента.
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 предоставляет функцию map для динамического отображения списков элементов. Каждый элемент в массиве сопоставлен с элементом реагирования, что облегчает визуализацию динамического содержания.
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;
Контекст API в React предлагает способ передачи данных через дерево компонентов без необходимости проходить реквизиты вручную на каждом уровне. Это полезно для обмена значениями, такими как темы или статус аутентификации.
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;
Ключи в React помогают определить, какие элементы были изменены, добавлены или удалены. Они должны быть уникальными в списке и помогать реагировать с эффективными обновлениями.
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;
Обработка форм в React включает в себя управление данными форм с использованием состояния и обработки формы с помощью обработчиков событий. Контролируемые компоненты используются для синхронизации элементов формы с состоянием 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;
Встроенные стили: React позволяет вам стилизовать компоненты, используя встроенные стили, где стили определяются как объекты и применяются непосредственно к элементам.
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 opps - это метод обмена кодом между компонентами React с использованием опоры, значение которой является функцией. Это допускает динамический состав компонентов.
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;
Модули CSS помогают определить объем стилей для определенного компонента, избегая конфликтов глобального стиля. Каждый компонент может иметь свой собственный модуль CSS с локальными стилями.
.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;
Функции:
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;
Этот пример приложения погоды иллюстрирует практическое применение концепций React, включая управление состоянием, эффективность использования побочных эффектов, обработку событий, взаимодействие API и условное рендеринг. Пользователи могут узнать, как создать функциональное приложение погоды и понять интеграцию React Hooks в реальные сценарии.
Fetaures:
Функциональный компонент и крючки состояния:
useState для weather и city .Использование использования для получения данных:
Крюки useEffect используются для выполнения побочных эффектов, таких как получение данных о погоде из API OpenWeatherMAP.
Функция fetchWeatherData является асинхронной и получает данные о погоде на основе выбранного города с использованием API fetch .
Условный рендеринг:
Данные о погоде условно отображаются только в том случае, если они существуют ( weather && ... ).
Обработка событий:
setCity вызывает на его событие onChange .Взаимодействие API:
Динамическое обновление контента:
Стиль:
Преобразование температуры:
// 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;
Лучшие практики:
/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
Лучшие практики:
// 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>
);
Лучшие практики:
Пример:
// 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();
});
Лучшие практики:
Используйте маршрутизатор React для маршрутизации на стороне клиента в приложении на одну страницу.
Определите маршруты для разных представлений или разделов вашего приложения.
Реализуйте навигационные компоненты, такие как <Link> , чтобы обеспечить легкую навигацию между маршрутами.
Пример:
// 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>
);
Лучшая практика:
// 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>
);
};
Лучшие практики:
Пример:
Лучшие практики:
Пример:
// 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;
}
}
Лучшие практики:
Пример:
// 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} />
Лучшие практики:
Пример:
// 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>;
}
Регулярно обновлять зависимости, чтобы извлечь выгоду из новых функций, исправлений ошибок и исправлений безопасности.
Следуйте семантической версии для библиотек и пакетов, используемых в проекте.
Будьте осторожны с основными обновлениями и тщательно протестируйте перед обновлением.
Пример:
# 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
Настройте WebPack для производственных сборки с оптимизацией:
// 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...
};
Спасибо за ваш интерес к участию в этом удивительном учебнике React! Ваш вклад помогает сделать этот ресурс еще более ценным для студентов всех уровней. Если вы исправляете ошибку, улучшаете существующую функцию или добавляете что -то совершенно новое, ваши усилия имеют значение.
** Разветвляется репозиторий: нажмите кнопку «Вилка» в правом верхнем углу этого репозитория, чтобы создать вашу копию.
** Клонировать репозиторий: клонировать репозиторий в локальную машину, используя git clone https://github.com/DaveSimoes/React-Tutorial-2024.git
** Создайте филиал: Создайте новую филиал для вашего вклада с описательным именем: git checkout -b your-feature .
** Внесите изменения: внесите изменения в соответствующих файлах. Не стесняйтесь улучшать существующие примеры, добавлять новые, исправить опечатки или улучшить документацию.
** Commit informs: отправьте свои изменения с четким и кратким сообщением: git commit -m "Your message here" .
** Изменение толкания: отправьте свои изменения в раздвоенный репозиторий: git push origin your-feature .
Создайте запрос на вытяжение: откройте запрос на вытяжение в исходном хранилище. Forneça um título claro, descreva suas alterações e envie o ulling запрос.
Следуйте последовательным стилям кодирования. Убедитесь, что ваш код хорошо задокументирован, особенно если вы добавляете новые примеры или функции.
Спасибо за рассмотрение внесения вклад в этот учебник React. Ваша посвящение улучшению этого ресурса очень ценится. Давайте учимся и расти вместе!
Если вы нашли этот учебник React полезным, подумайте о том, чтобы дать ему звезду! Ваша поддержка невероятно мотивирует и помогает другим открыть этот ресурс. Спасибо за то, что вы являетесь частью нашего сообщества и HAP!
Отреагировать официальную библиотеку
