Quick Start
Want to get started quickly with React. We got you.
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!
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
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.
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_modulesDo 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.
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.
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:
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