React.js — это популярная библиотека JavaScript для создания пользовательских интерфейсов, особенно для создания одностраничных приложений (SPA), которые запускаются в веб-браузере. Если вы новичок в React, это руководство поможет вам изучить основы и поможет вам приступить к созданию своего первого приложения React.
Что такое Реакт?
React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он был разработан Facebook и часто используется для создания веб-приложений и мобильных приложений.
Одной из ключевых особенностей React является его виртуальная DOM (объектная модель документа). Виртуальный DOM — это облегченное представление фактического DOM в памяти, которое позволяет React оптимизировать рендеринг, сводя к минимуму количество манипуляций с DOM, необходимых при изменении состояния вашего приложения. Это делает приложения React быстрыми и эффективными.
Начало работы с React
Чтобы начать работу с React, на вашем компьютере должна быть установлена последняя версия Node.js и npm (менеджер пакетов для Node).
Чтобы создать новый проект React, вы можете использовать инструмент командной строки create-react-app. Откройте терминал и выполните следующую команду:
npm install -g create-react-app
Это установит инструмент create-react-app глобально на вашем компьютере.
Затем перейдите в каталог, в котором вы хотите создать новое приложение React, и выполните следующую команду:
create-react-app my-app
Это создаст новый каталог под названием «my-app» с базовым каркасом приложения React.
Ваш первый компонент React
Компонент React — это фрагмент кода, представляющий часть пользовательского интерфейса. Компоненты можно повторно использовать и составлять для создания более крупных и сложных пользовательских интерфейсов.
В новом приложении React откройте файл src/App.js. Это корневой компонент вашего приложения, и именно здесь вы будете выполнять большую часть своей работы.
Компонент App — это функция, которая возвращает элемент React. Элемент React — это упрощенное описание того, что вы хотите отобразить на экране.
Вот код компонента App:
import React from 'react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
export default App;
Этот компонент отображает элемент заголовка с надписью «Hello, World!».
Чтобы увидеть свой компонент в действии, откройте терминал и перейдите в корневой каталог вашего приложения. Затем выполните следующую команду:
npm start
Это запустит сервер разработки и откроет ваше приложение в новом окне браузера. Вы должны увидеть «Hello, World!» заголовок, отображаемый на экране.
Добавление состояния к вашему компоненту
До сих пор ваш компонент был просто статическим фрагментом разметки. Но у большинства компонентов React есть какое-то внутреннее состояние, которое они используют для управления своим поведением и отображения динамического контента.
Чтобы добавить состояние к вашему компоненту, вам нужно использовать компонент класса. Компонент класса — это класс JavaScript, расширяющий базовый класс React.Component.
Вот как вы можете преобразовать свой компонент App в компонент класса:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello, World!'
};
Обновление компонента
Чтобы обновить состояние вашего компонента, вам нужно использовать метод setState. Этот метод принимает объект, представляющий новое состояние, и объединяет новое состояние с текущим состоянием.
Вот пример того, как вы можете обновить состояние message в компоненте App:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello, World!'
};
}
updateMessage() {
this.setState({
message: 'Hello, React!'
});
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
<button onClick={() => this.updateMessage()}>Update Message</button>
</div>
);
}
}
В этом примере метод updateMessage обновляет состояние message при нажатии кнопки. Это приведет к повторному рендерингу компонента с новым сообщением.
Передача данных с реквизитами
Помимо управления собственным состоянием, компоненты React также могут принимать данные от своих родительских компонентов в виде свойств. Реквизиты — это сокращение от «свойства», и они позволяют вам передавать данные от родительского компонента к дочернему компоненту.
Вот пример того, как вы можете передать свойство от родительского компонента к дочернему компоненту:
import React from 'react';
function App() {
const greeting = 'Hello, React!';
return (
<div>
<Greeting greeting={greeting} />
</div>
);
}
function Greeting(props) {
return <h1>{props.greeting}</h1>;
}
export default App;
В этом примере компонент App передает свойство greeting компоненту Greeting. Компонент Greeting отображает приветствие, отображая реквизит greeting в элементе заголовка.
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello, World!'
};
}
updateMessage() {
this.setState({
message: 'Hello, React!'
});
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
<button onClick={() => this.updateMessage()}>Update Message</button>
</div>
);
}
}
export default App;
В этом примере метод updateMessage вызывается при нажатии кнопки. Этот метод обновляет состояние message и вызывает повторную визуализацию компонента с новым сообщением.
Использование хуков React
React Router — популярная библиотека для создания маршрутизации на стороне клиента в приложениях React. Это позволяет вам определять маршруты в вашем приложении и сопоставлять их с различными компонентами.
Чтобы использовать React Router в своем приложении, вам необходимо установить его как зависимость:
npm install react-router-dom
После того, как вы установили React Router, вы можете использовать компонент BrowserRouter для переноса вашего приложения и компонент Route для определения маршрутов.
Вот пример того, как вы можете использовать React Router для создания многостраничного приложения:
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<BrowserRouter>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</BrowserRouter>
);
}
export default App;
В этом примере у приложения есть три маршрута: "/", "/about" и "/contact". Каждый маршрут сопоставляется с другим компонентом, который будет отображаться, когда маршрут активен.
Заключение
React — это мощная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Благодаря декларативному синтаксису, эффективному рендерингу и возможности управления состоянием и побочными эффектами React упрощает создание современных веб-приложений.
Нам еще многое предстоит узнать о React, но это руководство должно дать вам хорошую основу для создания собственных приложений. Если вы хотите погрузиться глубже, ознакомьтесь с официальной документацией React и сообществом React на Stack Overflow и Reddit.
Спасибо за прочтение. Если вам понравился этот учебник, подпишитесь на другие статьи!
