React.js – это библиотека JavaScript для создания пользовательских интерфейсов. Он был разработан Facebook и широко используется в веб-разработке. Он основан на концепции компонентов, которые представляют собой независимые, многократно используемые фрагменты кода, которые можно комбинировать для создания сложных пользовательских интерфейсов.
https://youtube.com/playlist?list=PLmNK9aRt5JxYjYg10l2vJf1nRlVJLrQ2b
Чтобы начать работу с React.js, вам необходимо иметь базовые знания HTML, CSS и JavaScript.
1. Настройка среды.
Первое, что вам нужно сделать, — это настроить среду разработки. Вы можете начать с установки Node.js и npm (Node Package Manager) на свой компьютер. Это позволит вам создать новый проект React с помощью команды create-react-app. Для этого откройте терминал и выполните следующие команды:
```
$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app
$ npm start
```
Это создаст новый проект React с именем my-app и запустит локальный сервер разработки по адресу http://localhost:3000.
2. Понимание компонентов React:
Как упоминалось ранее, React.js основан на концепции компонентов. Компонент — это небольшой независимый фрагмент кода, который представляет собой часть пользовательского интерфейса. Компоненты можно комбинировать для создания сложных пользовательских интерфейсов.
В React компоненты обычно создаются с использованием классов или функций JavaScript. Вот пример простого функционального компонента:
```
импортировать React из 'React';
function HelloWorld() {
return (
‹div›
‹h1›Hello, world!‹/h1›
‹/div›
);
}
экспортировать по умолчанию HelloWorld;
```
Этот компонент просто отображает заголовок с надписью Hello, world!.
3. Создание приложения React.
Теперь, когда у вас есть общее представление о компонентах React, давайте создадим простое приложение React. Откройте папку src в вашем проекте и создайте новый файл с именем App.js. Добавьте следующий код:
```
импортировать React из 'React';
function App() {
return (
‹div›
‹h1›My React App‹/h1›
‹/div›
);
}
экспортировать приложение по умолчанию;
```
Этот компонент будет основным для нашего приложения.
4. Отрисовка приложения:
Теперь, когда мы создали наш основной компонент, нам нужно отобразить его на экране. Откройте файл index.js в папке src и замените содержимое следующим:
```
импортировать React из 'react';
импортировать ReactDOM из 'react-dom';
импортировать приложение из './App';
ReactDOM.render(‹App /›, document.getElementById('root'));
```
Этот код импортирует необходимые библиотеки React и ReactDOM и отображает наш компонент приложения в корневой элемент в файле HTML.
5. Добавление дополнительных компонентов:
Теперь, когда наше приложение настроено и работает, давайте добавим еще несколько компонентов. Создайте новый файл в папке src с именем Header.js и добавьте следующий код:
```
импортировать React из 'React';
function Header() {
return (
‹header›
‹nav›
‹ul›
‹li›‹a href=#›Home‹/a› ‹/li›
‹li›‹a href=#›О нас‹/a›‹/li›
‹li›‹a href=#›Контакты‹/a›‹/li›
‹/ul›
‹/nav›
‹/header›
);
}
экспортировать заголовок по умолчанию;
```
Этот компонент представляет заголовок нашего приложения и содержит простое меню навигации. Теперь давайте добавим этот компонент в наш компонент приложения. Обновите файл App.js, чтобы он выглядел так:
```
импортировать React из 'React';
импортировать заголовок из './Header';
function App() {
return (
‹div›
‹Header /›
‹h1›My React App‹/h1›
‹/div›
)
}
👉Подписывайтесь : Канал Input Output Campus на YouTube