Quick Start

This article covers options for quickly deploying an application using Steroids React Boilerplate and utilizing UI components from Steroids.

Installation of Steroids React Boilerplate

Open the terminal and clone the Steroids React Boilerplate repository to your computer using the following command:

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

Here, my-steroids-app is the name of your project. You can choose any other name that suits your preferences.

Navigate to the folder containing the cloned repository:

cd my-steroids-app
1
2yarn

After the dependencies are successfully installed, change README.md according to your preferences.

You can also change the name, description, version, etc. of the project in the package.json file.

Turn on eslint in your IDE.

Add this project to the new git-repository.

Launch the development server using the command:

yarn watch

This will launch a local server, and your application will be accessible at http://localhost:9991/.

The next step is to start creating application pages, components, adding routes, etc. Steroids framework comes with a variety of ready-to-use components, so make sure to explore them. Also, Boilerplate itself contains a sample of the created page that you can use in your development or delete.

You are now ready to begin developing your web application using the Steroids framework. Best of luck with your creative endeavors!

Steroids React boilerplate on Github

Using Steroids React Boilerplate

We have prepared a small example application for you, created using the Steroids React Boilerplate. The application includes two pages - Profile and Settings. You can find detailed information and view code examples in the article Steroids React Boilerplate Tutorial.

Using UI Components from Steroids

Steroids UI components can be integrated into your project individually. You can use any of the components as shown in the examples from the documentation.

Here's a brief example of how you can integrate the <Button/> component into your project:

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'));