Создание React-приложения и краткое описание

Расскажу, как установить простое react приложения. Чтобы понять его начальную структуру и начать уже по простому работать с ним.

Установка React приложения

Чтобы собрать первое приложения, незаморачиваясь с первоначальными настройками, установим Create React App . Поставив его, мы сразу сможем увидеть React в деле, начнем

Для начала установим nodejs, для работы. Затем в папке своих проектов выполним следующие команды:

npx create-react-app name-app

где name-app - название нашего проекта на латинице. Далее зайдем в проект и сразу запустим его

cd name-app
npm start

И вот у нас откроется автоматический вкладка браузера со стартовой страницей react по адресу http://localhost:3000/.

Краткое описание структуры и работы.

Файлы:

• public - статичные файлы, которые не компилируются реактом, в index.html точка входа приложения. Здесь обычно хранятся все статичные файлы: картинки, шрифты, favicon и прочее;
• src - Вся логика приложения на React;
• package.json - наши npm-пакеты (расширения) и скрипты (Если не знаете, вкратце почитайте, как работает nodejs).
• src/index.js - главный файл react-приложения, вся логика реакта начинается с него
• App.js - наш первый компонент, мы его как раз и видим в браузере (крутящийся логотип реакта)

Опишу коротко,как оно работает.

Для начала, посмотрим первую точку входа, страницу, которая открывается в браузере и является точкой входа для реакта.

Это файл public/index.html, он предстовляет из себя простой html-документ, но есть небольшая особенность, в нем есть одна интересная строчка:

<div id="root"></div>

В этом теге будет у нас работать все реакт-приложения (id root можно будет переопередить).

Далее идем в файл src/index.js - наш главный файл реакта приложения, здесь мы подключаем сам react, react-dom (для работы с web-приложениями), подключаем стартовый компонент App и указываем в каком теге из файла public/index.html будет работать наше приложение.

ReactDOM.render(, document.getElementById('root'));

Здесь мы видим, что компонент App, который уже подключен будет обрабываться в элементе с id="root" из файла public/index.html.

А в файле App.js - наш первый компонент на react, который возвращает простую html-разметку.

Вот и все, можете поиграться с этим компонентом и создать по аналогии другие, чтобы понять самые низы React =).