Коротка інструкція як створити новий React застосунок за допомогою ReScript та Vite

Попередження: ця стаття не про переваги та недоліки ReScript, це просто інструкція як підняти React проект з ReScript за допомогою Vite. Якщо ви не хочете читати - просто склонуйте цей репозиторій, встановіть залежності та експерементуйте.

Передумови

Перш ніж приступити до налаштування, переконайтеся, що на вашій системі встановлені Node.js та npm. Вам також знадобиться редактор коду, і для цього прикладу я буду використовувати Visual Studio Code.

Крок 1: Ініціалізація проекту Vite

Для початку відкрийте ваш термінал та виконайте наступну команду:

npm init vite retest

Ця команда ініціалізує проект Vite з назвою "retest", який надає основну структуру для вашого проекту.

Якщо ви маєте git, оновіть .gitignore наступними двома рядками:

*.bs.js
lib

Крок 2: Підготовка

Після ініціалізації проекту ви можете знайти деякі непотрібні файли та папки. Щоб очистити свій проект, виконайте такі дії:

Перейдіть в папку "retest": `cd retest``
Створіть нову папку "src": `mkdir src``
Видаліть наступні файли та папки:
- counter.js
- main.js
- public
- javascript.svg

Також перемістіть файл style.css до папки src і тепер ваша структура проекту буде набагато зручнішою в роботі.

Крок 3: Встановлення залежностей

Далі встановіть необхідні залежності для React, ReScript. Виконайте такі команди:

npm install @rescript/react rescript -D
npm install react react-dom

Також раджу встановити офіційне розширення ReScript для VSCode для полегшення розробки

Крок 4: Оновлення package.json

Відкрийте файл package.json та додайт наступні команди в розділ "scripts":

"scripts": {
  "build:res": "rescript",
  "dev:res": "rescript build -w",
  "dev": "vite"
}

Ці команди знадобляться вам для того щоб запустити ваш застосунок.

Крок 5: Налаштування ReScript

Для налаштування ReScript створіть файл bsconfig.json в корені проекту та заповніть його наступним вмістом:

{
  "name": "drag13proj",
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ],
  "package-specs": [
    {
      "module": "es6",
      "in-source": true
    }
  ],
  "suffix": ".bs.js",
  "jsx": { "version": 4, "mode": "automatic" },
  "bs-dependencies": ["@rescript/react"]
}

Не забудьте замінити drag13proj на бажане ім'я проекту. Або не міняйте, якщо воно вам пасує 😄

Крок 6: Створення файлу index.res

У папці src створіть новий файл з ім'ям index.res (res це розширення файлів ReScript) та додайте наступний код ReScript:

switch (ReactDOM.querySelector("#app")) {
| Some(rootElement) => {
    let root = ReactDOM.Client.createRoot(rootElement)
    ReactDOM.Client.Root.render(root, <h1> {React.string("Hello world")} </h1>)
  }
| None => Js.Console.log("No root element found")
}

Цей код запускає наш React застосунок. Якщо елемент з id app не буде знайдено, ви побачите помилку в консолі. Це наша перша зустріч з ReScript і код може видатися трохи не зрозумілим, але насправді все прсто:

Я пробую знайти елемент з id #app і якщо він є виконується гілка ініціалізації. Якщо немає - ми побачимо помилку у консолі. Ця конструкція називається Pattern Matching і це щось накштал switch-case але на стероїдах - дуже потужна річ насправді.

Крок 7: Підключення ReScript до index.html

У файлі index.html, який знаходиться в корені проекту, змініть атрибут src тегу <script> з /main.js на ./src/index.bs.js.

Ця зміна забезпечує правильне включення вашого коду ReScript у ваш проект.

Крок 8: Запуск ReScript та Vite

Для запуску середовища розробки відкрийте два окремі термінали (можна було б поставити concurrently, але для тествого проекту, певно, не варто) та виконайте наступні команди:

npm run dev:res
npm run dev

Це запускає компілятор ReScript в режимі спостереження і сервер розробки Vite паралельно. Тепер ви можете відкрити ваш проект за адресою http://127.0.0.1:5173/.

Крок 9: Додавання глобальних стилів

Ви можете імпортувати глобальні стилі в свій код ReScript, додавши наступний рядок в початок вашого файлу index.res:

%%raw("import './style.css'")

Це дозволить вам включити глобальні стилі CSS у ваш проект, такі як reset.css або інші глобальні стилі (наприклад bootstrap 👿).

Крок 10: Додавання нового компонента React

Щоб додати новий компонент React, створіть новий файл в папці src з іменем App.res. В цьому файлі додайте наступний код:

@react.component
let make = (~title) => <h1> {React.string(title)} </h1>

Це створить нам новий компонент, який приймає title в якості пропс. Доречі, ви звернули увагу на відсутність типу в title? Це ще одна сильна сторона ReScript - автоматичне виведення типів, в залежності від використання. І робить він це краще ніж TypeScript

Ще один важливий момент це дотримуватися конвенції - ім'я змінної для компоненту обов'язково повинно бути make.

Оновлення index.res з новим компонентом

У файлі index.res оновіть код, щоб включити новий компонент "App":

ReactDOM.Client.Root.render(root, <App title="Hello world!" />);

Таким же способом ви можете додавати інші компоненти для побудови вашого застосунку. Просто не забудьте називати змінну make .

Крок 12: Використання модулів CSS для стилізації компонента

Для застосування стилів до вашого компонента App за допомогою модулів CSS, дотримуйтесь цих кроків:

Створіть новий файл в папці src з іменем app.module.css.
Додайте наступний код CSS у app.module.css:

.header {
  color: #4AF626;
}

У вашому компоненті App.res імпортуйте стилі за допомогою наступного коду:

@module external styles: {..} = "./app.module.css";

Застосуйте клас "header" до елементу <h1> у вашому компоненті "App" за допомогою квадратних дужок:

<h1 className={styles["header"]}> {React.string(title)} </h1>

Тепер СSS модулі готові працювати.

Підсумки

Вітаю, тепер у вас є стартовий проект на React та ReScript. Звичайно тут ще нічого не має, але перший крок уже зроблено - далі справа уже за вами. Репозиторій до цієї статті лежить туточки

Англійська версія

[03.11.2023] rescript react vite