Начните свою карьеру с React! Краткое введение было первоначально опубликовано в понедельник, 2 января 2023 г., в Блоге технических разработчиков. Для получения новейшего актуального контента, только что из печи, посетите https://techdevblog.io и подпишитесь на нашу рассылку!
Добро пожаловать в мир React! Если вы новичок в этой популярной библиотеке JavaScript, не волнуйтесь — мы будем делать это шаг за шагом, и, прежде чем вы это узнаете, вы будете создавать потрясающие пользовательские интерфейсы в кратчайшие сроки.
Итак, что такое Реакт? Проще говоря, это библиотека для создания пользовательских интерфейсов. Он быстрый, эффективный и простой в использовании, и он быстро стал одним из самых популярных вариантов для фронтенд-разработчиков. С React вы можете создавать повторно используемые компоненты, которые упрощают создание сложных пользовательских интерфейсов.
Теперь давайте начнем с простого примера. Во-первых, убедитесь, что на вашем компьютере установлены Node.js и npm (менеджер пакетов Node.js). Затем создайте новый каталог для своего проекта и выполните следующую команду, чтобы создать новый проект React с помощью инструмента create-react-app:
npx create-react-app my-projectЭто создаст новый каталог с именем my-project со всеми файлами, необходимыми для начала работы с React. Идите вперед и перейдите в новый каталог:
cd my-projectЗатем давайте запустим сервер разработки, выполнив следующую команду:
npm startЭто запустит сервер разработки и откроет новое окно браузера с вашим приложением React. Вы должны увидеть страницу с текстом «Добро пожаловать в React» и логотипом.
Итак, как все это работает? Итак, главный файл, с которым вы будете работать, называется index.js. Это точка входа для вашего приложения React, и именно здесь вы будете писать код для отображения вашего пользовательского интерфейса.
Вот простой пример того, как может выглядеть ваш файл index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello, world!</h1>
<p>Welcome to my first React app!</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));В этом примере мы используем функцию App для возврата элемента JSX. JSX — это расширение синтаксиса для JavaScript, которое позволяет вам писать HTML-подобный код в ваших файлах JavaScript. Это мощный инструмент, который упрощает создание сложных пользовательских интерфейсов.
Функция App называется «компонентом», и это ключевое понятие в React. Компонент — это фрагмент кода, представляющий часть пользовательского интерфейса. Вы можете использовать компоненты, чтобы разбить пользовательский интерфейс на более мелкие, повторно используемые части.
В приведенном выше примере мы используем функцию ReactDOM.render для отображения нашего компонента App на странице. Часть document.getElementById('root') относится к элементу HTML-файла с именем index.html, который выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Теперь, когда у вас есть общее представление о том, как работает React, давайте продолжим с некоторыми более сложными концепциями.
Одной из ключевых особенностей React является его способность управлять состоянием. Состояние — это способ хранения данных в вашем компоненте, которые могут меняться со временем. Например, у вас может быть компонент, отображающий список элементов, и состоянием этого компонента может быть сам список элементов.
Для управления состоянием в компоненте React вы можете использовать специальный хук под названием useState. Вот пример того, как вы можете его использовать:
import React, { useState } from 'react';
const Example = () => {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}В этом примере мы используем хук useState для создания новой переменной состояния с именем count. Мы также используем элемент кнопки с обработчиком событий onClick для обновления значения count при нажатии кнопки.
Вы также можете использовать состояние для хранения данных, поступающих из внешних источников, таких как API. Для этого вы можете использовать хук useEffect, который позволяет выполнять побочные эффекты в функциональном компоненте. Вот пример того, как вы можете его использовать:
import React, { useState, useEffect } from 'react';
const Example = () => {
// Declare a new state variable, which we'll call "data"
const [data, setData] = useState(null);
// Fetch data from an API when the component mounts
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
};
fetchData();
}, []);
return
(
<div>
{data && <p>{data.message}</p>}
</div>
);
}В этом примере мы используем хук useEffect для получения данных из API при монтировании компонента. Пустой массив в конце функции useEffect указывает React запускать эффект только один раз, когда компонент монтируется.
Есть много других функций React, которые мы не рассмотрели в этом руководстве, например реквизиты, контекст и новая модель параллелизма с API Suspense и lazy. Но с основами за плечами теперь вы сможете начать создавать свои собственные приложения React.
Так что давай, попробуй! С React вы сможете создавать быстрые, эффективные и простые в использовании пользовательские интерфейсы, которые сделают ваших пользователей счастливыми. Удачного кодирования!
Начните свою карьеру с React! Краткое введение было первоначально опубликовано в понедельник, 2 января 2023 г., в Блоге технических разработчиков. Для получения новейшего актуального контента, только что из печи, посетите https://techdevblog.io и подпишитесь на нашу рассылку!
