React + Redux​ или как написать свой сервис

Привет. Если вы когда-нибудь имели дело с программированием, то наверняка задумывались о создании своего, пусть и небольшого, проекта.

Так как же воплотить все то, что вертится у вас в голове, при этом получив ощутимую пользу от процесса разработки? Ответ – веб-сервис. Достаточно легок в освоении на начальном этапе, но при этом достаточно интересен для более сложных решений.

Чтобы создать своё первое веб-приложение, нам необходимо обладать следующими навыками:

  1. Javascript
  2. HTML
  3. CSS

Это базовый набор, который уже позволяет писать простые одностраничные веб-сервисы. Но мы же не хотим писать что-то, что потом нельзя будет улучшить, и расширить.

Допустим, нам надо написать сервис по генерации персонажа для настольной игры. Данная идея пришла ко мне, когда, в очередной раз, вместе с друзьями собрались поиграть в настольную игру (DnD, если кто интересуется), но создание персонажей затянулось на очень продолжительное время. Настолько, что, когда все закончили – никакого желания играть уже не было.

Итак, что нам понадобится, чтобы сделать генератор персонажей? Нам нужна форма ввода для таких вещей как имя, раса, вооружение и, может быть, краткая предыстория персонажа для большего погружения в игру. И конечно, выгрузка данных о персонаже в документ. Нам же не просто так нужен этот сервис.

Написать такую форму на чистом HTML, JS и CSS — нет никаких проблем. Но что, если мы хотим добавить в наш сервис еще больше функционала. Например: сохранение персонажа, генерацию оружия, или самого персонажа, подсказки ведущему игры и др. Одностраничный сайт станет достаточно перегруженным, поэтому нам придется разделить наш сервис на несколько тематических блоков. И тут внезапно наш одностраничный сайт превращается в полноценный сервис.

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

Ещё нам понадобится база данных для сохранения информации для нашего сервиса. На сайте spark.ru была интересная статья, как можно использовать google таблицы в качестве базы данных. Пожалуй, мы воспользуемся тем же способом.

Когда приложение небольшое мы вполне можем обойтись только реактом. Но для работы с большим проектом, лучше использовать Redux. В каждом компоненте реакта есть состояние объекта – это те данные которые будет использовать компонент. Если таких компонентов очень много, мы можем не уследить за всеми состояниями объектов.

А Redux позволит нам оперировать общим объектом, в который мы будем записывать данные из БД и из которого будет загружаться информация на наш сервис.

Для начала нам необходимо установить ПО для разработки. Нам нужен редактор кода, например, Visual Studio Code, NotePad++ или что-нибудь подобное на ваш выбор с подсветкой синтаксиса.

Ещё нам необходима node.js. Это серверная платформа для работы с JavaScript, который выполняет действие на стороне клиента, а Node — на сервере. С помощью Node можно писать полноценные приложения, а также она умеет работать с внешними библиотеками и вызывать команды из кода на JavaScript и выполнять роль веб-сервера. Её устанавливаем с официального сайта(nodejs.org).

Создадим стартовый проект, с которым и продолжим разработку нашего веб-сервиса.

Для этого создадим папку и запустим командную строку из этой папки. Для этого в пуске находим cmd.exe и запускаем. С помощью команды cd переходим в нашу папку и вводим следующие команды.

npm install create-react-app –g npm create-react-app first-project npm install react-redux cd first-project npm start

После каждой команды нажимаем enter для её выполнения. У нас должна отобразится стартовая страница нашей заготовки под проект.

Поздравляю! Вы сделали первый шаг на пути к своей первой разработке крутого сервиса.

Давайте немного очистим наш проект от файлов, которые мы использовать не будем:

  • В папке src мы оставим только index.js, app.js, app.css.
  • В папке public оставляем только index.html
  • Внутри этого файла у нас останется примерно следующее:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Title React</title> </head> <body> <div id="root"></div> </body> </html>
  • В папке src, в файле app.js оставляем следующее:
import React from 'react'; import './app.css'; const App = () => { return ( <div> </div> ); }; export default App;

Если сохранить изменения, во всех файлах, которые мы отредактировали, то у нас отобразится пустая страница в браузере. Теперь, если мы что-то внесем в блок, то эти изменения сразу отобразятся в браузере.

Например, напишем классическую фразу Hello World внутри тега div. Теперь если вы сохраните изменения, то в браузере отобразится данная фраза.

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

Теперь у нас есть заготовка под наш проект. В следующей части мы рассмотрим, как доработать этот проект до формы ввода данных нашего персонажа и подключение redux.

0
3 комментария
Sergey Vanyushin

И это всё? Собственно, ничего Вы и не сделали - базовый index.html и App.js, и несколько абзацев про React+Redux.

Ответить
Развернуть ветку
NTA
Автор

Sergey, спасибо за вопрос. Все остальное планируем опубликовать во второй части, эта часть вводная - для начинающих

Ответить
Развернуть ветку
NTA
Автор

Опубликовали 2 часть "React+Redux или как написать свой сервис (Часть 2: Продолжение)". Читайте по ссылке:

Ответить
Развернуть ветку
0 комментариев
Раскрывать всегда