Skip to content

Latest commit

 

History

History
321 lines (256 loc) · 11.4 KB

tutorial.md

File metadata and controls

321 lines (256 loc) · 11.4 KB

Tutorial

0. Что нужно установить перед началом

  • IDE - VS Code/Sublime/WebStorm/Atom

  • Node.js, установить, проверить версию

https://nodejs.org/ru/ -- скачать тут

https://medium.com/devschacht/node-hero-chapter-1-239f7afeb1d1 -- что такое нода.

Проверяем версию:

node -v

Для установки пишем в консоль:

npm i -g npx
npm -v

1. Как сделать лендинг на CRA

В консоли разработчика пишем:

npx create-react-app landing
cd landing
npm start

Как это работает?

  • Построение лендинга происходит с использованием фреймворка React

Чтобы установить React в свой проект нужно написать в файле формата .jsx

import React from 'react";

Здесь вы можете посмотреть мини-уроки введение в React

Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них. Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build. Вы можете узнать больше о Create React App из его README и его пользовательского руководства. Подробнее >тут<.

Посмотреть реализацию Step 1 можно > тут <

2. Как добавить кнопку (@lskjs/button) на CRA лендинг

Подключаем необходимые пакеты:

npm i @lskjs/button
npm i lodash react-icons2

В нужном файле импортируем и используем кнопку:

import Button from "@lskjs/button";
        
<Button paint="primary">Primary</Button>

Попробовать код можно в ветке step2.

Сравнить изменения с предыдущего шага можно > тут <

3. Как создать форму (@lskjs/form) на CRA

npm i @lskjs/form
npm i react-if antd formik @lskjs/scroll @lskjs/ui

Создаём файл для визуализации формы FormView.jsx

import React from 'react';
import Button from '@lskjs/button';
import { Form, FastField } from 'formik';

const FormView = ({
  control, // функция вызова контрола
  handleSubmit, // функция отправки формы по нажатию на кнопку
}) => {
  return (
    <Form onSubmit={handleSubmit}>
      <FastField {...control('input')} />
      <FastField {...control('select')} />
      <Button paint="primary" type="submit">Отправить</Button>
    </Form>
  );
};

export default FormView;

Создаём файл для инициализации формы Form.js используя файл с визуальной частью FormView

import createForm from '@lskjs/form/createForm';
import Input from '@lskjs/form/controls/Input';
import Select from '@lskjs/form/controls/Select';
import FormView from './FormView';

const Form = createForm({
  view: FormView, // Указываем компонент для визуализации
  controls: { // Описываем элементы, используемые в форме
    input: { // Название поля в форме
      title: 'Текстовое поле',
      placeholder: 'Введите текст',
      component: Input, // Указываем нужный компонент котрола формы
    },
    select: {
      title: 'Выбор варианта',
      placeholder: 'Выберите вариант',
      component: Select,
      options: [
        {
          value: 'two',
          title: 'Два',
        },
        {
          value: 'one',
          title: 'Один',
        },
        {
          value: 'three',
          title: 'Три',
        },
        {
          value: 'four',
          title: 'Четыре',
        },
      ],
    },
  },
});

export default Form;

Используем созданную форму

import Form from './Form';

<Form
  onSubmit={(values) => {
    alert(JSON.stringify(values, null, 2));
  }}
/>

Попробовать код можно в ветке step3. Сравнить изменения с предыдущего шага можно > тут <

4. Как добавить мультиязычность (@lskjs/i18) на CRA

npm i @lskjs/i18
npm i mobx mobx-react

Создаём файл инициализации i18.js

import I18 from '@lskjs/i18';

const i18 = new I18({ // Создаём экземпляр класса I18.
  config: { // Конфигурируем модуль i18next. См. офф. документацию: https://www.i18next.com/overview/configuration-options
    locales: ['en', 'ru'], // Перечисляем используемые языки
    resources: { // Указываем переводы для каждого из языка
      en: {
        translation: {
          helloWorld: 'Hello World', // Например так
          button: {
            changeLanguage: 'Change language', // Или так, используя вложенность
          },
        },
      },
      ru: {
        translation: {
          helloWorld: 'Привет Мир',
          button: {
            changeLanguage: 'Сменить язык',
          },
        },
      },
    },
  },
});

i18.init({ // Инициализируем модуль
  lng: 'ru' // Указываем какой язык будет использоваться по-умолчанию
});

export default i18;

В App.js импортируем i18 модуль и передаём его в провайдер MobX

import { Provider } from 'mobx-react';
import i18 from './i18';

function App() {
  return (
    <Provider i18={i18}> {/* Прокидывает модуль i18 сквозь весь проект */}
      ...
    </Provider>
  );
}

Создадим новый компонент для примера работы переводов Translate.jsx

import React from 'react';
import { inject, observer } from 'mobx-react';
import Button from '@lskjs/button';
import T from '@lskjs/t';

function Translate({ i18 }) {
  return (
    <div>
      <h1>{i18.t('helloWorld')}</h1> {/* Функция t для использования ключей переводов */}
      <Button
        paint="primary"
        onClick={() => {
          const nextLocale = i18.locale === 'ru' ? 'en' : 'ru'; // В i18.locale содержится текущий язык
          i18.setLocale(nextLocale); // i18.setLocale функция, меняющая язык на переданный
        }}
      >
        <T name="button.changeLanguage" /> {/* Или компонент <T> для использования ключей переводов */}
      </Button>
    </div>
  );
}

export default inject('i18')(observer(Translate)); // "Инжектим" i18 из провайдера и подписываемся на его изменения

Не забудьте импортировать созданный выше компонент в App.js и обозначить глобальные переменные для работы модуля i18.

В index.js добавляем следующие строки после импортов

global.__DEV__ = process.env.NODE_ENV === 'development';

В public/index.html добавляем секцию <script> для константных глобальных переменных

<script>
  const __CLIENT__ = true;
  const __SERVER__ = false;
</script>

Попробовать код можно в ветке step4. Сравнить изменения с предыдущего шага можно > тут <

4.1. Упрощаем работу с мультиязычностью (@lskjs/build-locales) на CRA

В предыдущем шаге было видно, как мы описыавем переводы JS объектами в конфигурировании i18, но можно данный шаг сделать более удобным!

npm i @lskjs/build-locales

Содаём в корне проекта файл .lskjs.js со следующим содержимым

module.exports = {
  i18: {
    // Здесь будет ссылка на Google Таблицу подготовленную для работы с переводами
    url: 'https://docs.google.com/spreadsheets/d/1m1PXq0FIhFefqIxd3WTPugqMTcKoHsPuU6SlmnxG1Pw/edit#gid=0',
  },
};

Создаём файл build-locales.sh в директории scripts со следующим содержимым

#!/usr/bin/env bash

LOCALES_LINK=`node -e "console.log(require('./.lskjs.js').i18.url)"`
LOCALES_DIST="./src/translations"

echo "$LOCALES_LINK => $LOCALES_DIST"

rm -rf $LOCALES_DIST && \
node node_modules/@lskjs/build-locales/bin/build-locales --locales ru,en --link $LOCALES_LINK --dist $LOCALES_DIST && \
echo "done"

Запускаем созданный скрипт коммандой sh ./scripts/build-locales.sh. После выполнения будут созданы 2 json файла в директории src/translations из таблицы указанной в .lskjs.js.

Изменим существующую конфигурацию модуля i18.js заменив объекты переводов на json файлы

// ...
import enResource from './translations/en.json';
import ruResource from './translations/ru.json';

const i18 = new I18({
  config: {
    // ...
    resources: {
      en: {
        translation: enResource,
      },
      ru: {
        translation: ruResource,
      },
    },
  },
});
// ...

Попробовать код можно в ветке step4.1. Сравнить изменения с предыдущего шага можно > тут <