React basic 1 - Hello React World. Настройка приложения First React.

Первоначально представленная Facebook, React - популярная библиотека JavaScript для создания шаблонов пользовательского интерфейса, которые быстро обрабатываются. React - это компонентный фреймворк, который создает кеш в памяти с виртуальной DOM - он не загружает каждый раз всю страницу, но может отображать только определенные компоненты.

Я прошел увлекательный курс по Udemy от Stephen Grider (Modern React with Redux), и я хотел сделать заметки об основных шагах по созданию простого приложения React для использования в будущем. Для тех из вас, кто заинтересован в глубоком понимании, пройдите его курс!

Для настройки среды разработки, особенно для изучения React, React предоставляет create-react-app. В этом посте я выделю ключевые шаги для создания вашего первого приложения React с помощью create-react-app.

Как сгенерировать первое приложение React

Шаг 1. Установите узел (если вы еще не установили)

"Ссылка для скачивания"

Шаг 2. Создайте приложение с помощью create-react-app.

Запустите команду ниже в своем терминале с именем, которое вы хотите для своего проекта, в нужном каталоге.

npx create-react-app [your-project-name]

Проект будет создан с некоторыми фундаментальными исходными файлами. Сгенерированные ключевые файлы и каталоги:

public - каталог, в котором будут храниться статические элементы, такие как индексный HTML-файл и изображения.
src - каталог приложений для реагирования, над которыми вы работаете. То, что вы здесь сделали, будет скомпилировано в синтаксис JavaScript ES5.
node_modules - каталог со всеми установленными для проекта зависимостями.
package.json - файл записывает зависимости проекта и настраивает проекты.
package-lock.json - в файле хранятся версии зависимостей на момент его первоначальной установки.

Шаг 3. Создайте первый файл index.js.

При выполнении create-response-app файлы базового приложения будут созданы в каталоге src. Для начала вы можете удалить все эти файлы и создать новый index.js в каталоге src. Чтобы начать свой первый проект React, вам необходимо импортировать зависимости react и react-dom в index.js,

import React from 'react';
import ReactDOM from 'react-dom';

Шаг 4. Создайте базовый компонент React и выполните рендеринг с помощью ReactDOM.

После импорта зависимостей вы будете использовать специальный HTML-подобный синтаксис под названием JSX для создания компонента React (относительно JSX мы подробнее рассмотрим в следующей главе). После создания конструкции приложения с помощью JSX метод рендеринга сообщает вашему приложению о необходимости отображения этого JSX-компонента внутри элемента #root в общедоступном файле index.html.

// React component
const App = () => {
   return <h1>Hello React World</h1>;
}
 
// Take the component and show it on the screen
ReactDOM.render(
   <App />,
   document.querySelector('#root')
);

Шаг 5. Запустите npm start для компиляции и посмотрите

После завершения настройки с помощью index.js запустите команду npm start, которая компилирует index.js в удобный для браузера формат JavaScript ES5. , результат должен быть отображен в вашем браузере.

Ссылка

Modern React с Redux от Стивена Грайдера | Удеми

Создать новое приложение на React | Реагировать