Быстрый старт на React.js

react.js быстрый старт
Метки: / /

В этой статье мы разберём основы работы с фреймворком React.js, или быстрый старт на этой библиотеки.

Также посмотрите статью «Топ 9 библиотек для JavaScript», думаю она вам будет интересна.

Установка React.JS:

Для начала как и любую библиотеку нужно установить и подключить, для этого можете использовать CDN:

Для проверки можете сделать вот этот не большой код:

Здесь мы используем метод render(), объекта ReactDOM, первым параметром идёт JSX объект (Об этом чуть позже), второй параметр, это элемент куда вставлять объект из первого параметра.

В целом вам больше не чего не надо, для подключения, но на мой взгляд, если использовать React.JS, то только если нужно создать SPA приложение, для этого введите эти команды:

Первая команда используется для скачивания библиотеки которая нужна, чтобы создать приложение, вторая она создаёт SPA приложение, в качестве параметра name-app, используется название которое вы хотите выбрать для проекта.

Так же, если вы используете Webpack или другой сборщик проекта, то для установки нужно использовать вот эту команду:

На этом с установкой всё.

Работа с React.JS:

Теперь перейдём к работе с различными компонентами, тут не будет подробного описании всего и вся, но самые основы буду, это же быстрый старт на React.js.

JSX:

Если грубо говоря, то JSX это HTML Элементы которые вы можете использовать прямо в коде, вот пример.

Как можете заметить, в одну переменную мы положили обычную строку, а в другая в себе хранит JSX элемент, так же прямо там мы вызвали первую переменную, таким образом у нас выводится «Привет, Вася Пупкин».

Вы можете внутри фигурных скобок в JSX использовать кроме переменных и другие вещи, например: функции или выражения.

Стоит знать, что если вы делаете JSX из нескольких HTML элементов, возвращаете его из функции или строите его на разных строках, то стоит обернуть его в круглые скобки, например так:

Так же у вас есть возможность внутри JSX использовать условия, первое это обычная тернарная операция, второе это аналог if в JS, их нужно делать внутри фигурных скобок:

Это всё самое важное что стоит знать про JSX.

Компоненты и свойства:

Теперь перейдём к созданию своих компонентов, так же мы рассмотрим что такое props, если вы создали SPA приложение на React, то в папке «src», создайте папку «components», в ней можете создать файл «Сomponent.js», вот что я в нём напишу:

Как можете заметить, если вы хорошо знаете стандарт ES6, то мы экспортируем функцию Hello, для того чтобы её импортировать в папку «App.js».

Наверное уже понятно что нам нужно перейти в файл «App.js», и в нём импортировать нашу переменную.

Примерно так должен выглядеть ваш файл «App.js», после того как вы использовали только созданный новый компонент, в качестве его название вы должны использовать название функции, которое возвращает.

Ещё вы можете передавать таким элементам различные атрибуты, для этого надо использовать пропсы, модифицируем функцию Hello:

То есть мы во функции добавляем обязательный параметр, его можно назвать как угодно, но я назвал props, он будет хранить объект всех данных которые мы передали как атрибуты, в нашем случаем мы используем данные из атрибута name.

Теперь немного изменим функцию App, вот как мы её сделаем.

Тут мы создали переменную с нашем именем которое мы хотим передать, и передаём его в атрибуте name, вот что у нас получилось:

Работа с элементами в React.js

Всё работает, таким образом вы можете передавать всё что вы хотите, от обычных строк и чисел, до функция и даже объектов.

Состояние:

Дальше что стоит знать обязательно, так это про состояние, если грубо говоря, то это такие переменные специально для React.

Тут наверное у многих возникнет вопрос, зачем нужны состояние, если есть обычные переменные, всё дело в том, что при изменение состояния автоматически вызывается функция render(), и заново перерисовывает страницу, что позволяет динамически изменять страницу.

В качестве примера работы со состоянием я буду использовать хуки, так как react сейчас перешёл на функциональное программирование, а хуки для этого и нужны, чтобы не использовать классы.

Давайте не много разберём этот код, в начале нам нужно импортировать хук useState(), который нужен для создания состояния, при использование в качестве параметра делаем то состояние которое нам нужно, это может быть простое значение или объект.

Хук нам возвращает массив с двум элементами, первый это состояние которое мы назначили, второе это функция для его изменения, она нужна для того чтобы при изменение состояния происходил рендер, ну и для безопасности, передаём эти значения переменным count и setCount.

Ещё создаём стрелочную функцию increment(), которая увеличивает count на один и вызываем её при клики на кнопку, вот что получилось:

Счётчик на React.js

Ещё стоит упомянуть, что для изменения состояния лучше использовать предыдущие состояния, для наглядности изменю increment().

Но главное для чего используется предыдущие состояния, так это для изменения массива и объектов, вот не большой пример:

Здесь мы создаём один объект и массив, когда меняем объект, просто меняем ключ который нам надо или добавляем новое значение по новому ключу, самое главное не забыть в начале ...prev, это значит что он будет совмещать новые данные со старыми.

С массивом всё примерно также, только указываем в квадратных скобках индекс который хотим изменить.

Вывод:

В этой статье вы прочитали быстрый старт на React.js, узнали самые основы работы, этого вам хватит чтобы делать простые сайты, если он вас заинтересовал, то посмотрите документацию.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

55058653