Быстрый старт

В этой статье рассматриваются варианты быстрой развертки приложения с помощью Steroids React Boilerplate и использование ui-компонентов из Steroids.

Установка Steroids React Boilerplate

Откройте терминал и склонируйте репозиторий Steroids React Boilerplate на свой компьютер. Для этого воспользуйтесь командой:

git clone https://github.com/steroids/boilerplate-react.git my-steroids-app

Здесь my-steroids-app - это имя вашего проекта. Вы можете выбрать любое другое имя, которое соответствует вашим предпочтениям.

Перейдите в папку, которая содержит склонированный репозиторий и установите все необходимые зависимости:

cd my-steroids-app
1
2yarn

После успешной установки зависимостей, измените README.md под свои предпочтения.

Также можете изменить название, описание, версию и т.д. проекта в файле package.json.

Включите eslint в своей IDE.

Добавьте этот проект в новый git-репозиторий.

Запустите разработческий сервер с помощью команды:

yarn watch

Это запустит локальный сервер, и ваше приложение станет доступным по адресу http://localhost:9991/.

Следующим шагом вы можете начать с создания страниц приложения, компонентов, добавление роутов и т. д. Фреймворк Steroids имеет большое количество готовых компонентов, поэтому обязательно ознакомьтесь с ними. Также сам Boilerplate содержит образец созданной страницы, который вы можете использовать в своей разработке или удалить.

Теперь вы готовы начать разработку вашего веб-приложения с использованием фреймворка Steroids. Удачи в вашем творчестве!

Бойлерплейт Steroids React на Github

Использование Steroids React Boilerplate

Мы подготовили для вас небольшой пример приложения, созданного на Steroids React Boilerplate. Приложение содержит в себе две страницы - Профиль и Настройки. Прочитать подробную информацию и посмотреть примеры кода можно в статье Steroids React Boilerplate Туториал.

Использование ui-компонентов из Steroids

Steroids ui-компоненты могут быть внедрены в ваш проект изолированно. Вы можете использовать любой из компонентов, как показано в примерах из документации.

Вот краткий пример того, как вы можете внедрить компонент <Button/> в ваш проект:

import ReactDOM from 'react-dom';
1import Button from '@steroidsjs/core/ui/form/Button/Button';
2
3function App() {
4    return (
5        <Button
6            color='primary'
7            label='Hello World'
8            outline
9        />
10    );
11}
12
13ReactDOM.render(<App />, document.getElementById('root'));