Quick Start

Create a starter React app
Before we get into the multitude of pieces and uses of the whole platform, let's get into the easiest and fastest way to get started. If you just want to feel the instant power of the first major and important piece of the platform you can get up and going very quickly with the Reactium App Foundation.
Install git and node.js (Node 14.x or current LTS recommended)
Get arcli (our command line tool)
1
npm install -g @atomic-reactor/cli
Copied!
Create a new application in the directory of your choice
1
mkdir my-app # whatever you want
2
cd my app
3
arcli reactium install # Install latest Reactium and dependencies
Copied!
Great! Now you've got Reactium installed!
Running Locally
Much like other popular React application creators, Reactium already has a lot of the local development environment taken care of. With a single npm script, you'll be compiling modern React javascript and Sassy CSS into a routable Node/Express application.
1
npm run local
Copied!
If you did everything correctly, you will see the default hotdog website demo plugin.
Running the local development environment
The Development Server
By default, the node/express server will listen on port 3030 and 3000 (Express and BrowserSync respectively). Your default browser should automatically open to http://localhost:3000 for you.
Beyond the Demo
Before you charge in and start modifying the Demo, note that this is not intended. The demo is just a quick example of the capabilities that come with Reactium to quickly produce a routed React single-page application. To start building your own app, first remove the demo module.
1
arcli uninstall @atomic-reactor/reactium-demo
Copied!
The demo is a Reactium module, installed in reactium_modules. You can, but should NOT manually modify these modules (nor commit them to git), much like you would not do so node_modules
Do check out these files, as they are usually stored in the repository in ideal "source" format, rather than compiled to unreadable machine-looking code. Most of the time, you will want to create and work inside the src/ directory in your project, but this code can be instructive about the full capabilities of the framework.
Your First Routed Hello World Component
You can manually create React components in your project, but arcli can also help you with some common boilerplate. Let's create a simple hello world component for our homepage:
1
arcli component
Copied!
Easily set a route for a new component.
Quick note on modules
Much like any Node application has node modules (or packages) installed into node_modules, Reactium extends this concept with Reactium specific modules, installed into reactium_modules. The main difference is that Node modules are typically generic commonjs packages grabbed from npmjs.com using npm command line tool, and Reactium modules are build for the Reactium framework, and are fetched from reactium.io using the arcli tool.
Reactium module dependencies are also located in your project package.json, under the property reactiumDependencies, whereas your ordinary Node dependencies will appear under dependencies and devDependencies as normal.
As of the time of this writing, you can see a full list of possible Reactium modules that can be install using:
1
arcli list
Copied!
The optional Reactium modules that are installed by default are:
@atomic-reactor/reactium-api
@atomic-reactor/reactium-capability
@atomic-reactor/reactium-demo
@atomic-reactor/reactium-role
@atomic-reactor/reactium-service-worker
@atomic-reactor/reactium-setting
@atomic-reactor/reactium-user
None of these Reactium modules are required to make a React application using Reactium, however they are useful or instructive for interacting with the rest of the platform (such as the API framework).
You can optionally remove them using arcli:
1
arcli uninstall @atomic-reactor/reactium-api
2
arcli uninstall @atomic-reactor/reactium-capability
3
arcli uninstall @atomic-reactor/reactium-demo
4
arcli uninstall @atomic-reactor/reactium-role
5
arcli uninstall @atomic-reactor/reactium-service-worker
6
arcli uninstall @atomic-reactor/reactium-setting
7
arcli uninstall @atomic-reactor/reactium-user
Copied!
Prerequisites
This page assumes you are have some familiarity with:
Node and React
npm (node package manager)

Discuss

Last modified 7mo ago

Copy link

Contents

Create a starter React app

Running Locally

The Development Server

Beyond the Demo

Your First Routed Hello World Component

Quick note on modules

Prerequisites