Quick Start

Want to get started quickly with React. We got you.

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 16.x or greater current LTS recommended)
  • Get arcli (our command line tool)
npm install -g @atomic-reactor/[email protected]
  • Create a new application in the directory of your choice
mkdir my-app # whatever you want
cd my app
arcli reactium install # Install latest Reactium and dependencies
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.
npm run local
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.
arcli uninstall @atomic-reactor/reactium-demo
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:
arcli component
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 using npm command line tool, and Reactium modules are build for the Reactium framework, and are fetched from 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:
arcli list
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:
arcli uninstall @atomic-reactor/reactium-api
arcli uninstall @atomic-reactor/reactium-capability
arcli uninstall @atomic-reactor/reactium-demo
arcli uninstall @atomic-reactor/reactium-role
arcli uninstall @atomic-reactor/reactium-service-worker
arcli uninstall @atomic-reactor/reactium-setting
arcli uninstall @atomic-reactor/reactium-user


This page assumes you are have some familiarity with:
  • Node and React
  • npm (node package manager)
Last modified 1mo ago