React is a fantastically flexible framework that focuses on rendering complex views. This flexibility can make documentation a little difficult, so for this example I will be using the create-react-app command line scaffolding tool.
Before you get started, make sure Clarion and create-react-app are installed:
npm install -g clarion create-react-app
After the install is finished, create your new project:
Note: You must use all lower-case letters in your new project name.
The following is a summary from the create-react-app documentation:
npm install --save node-sass-chokidar npm-run-all
package.json file, replace the
scripts commands with the following commands:
"build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject"
Adding Clarion to the project can be done in 4 easy steps:
src directory create a new folder called
Note: By default Clarion will look for the Clarion CSS Architecture in folders called
Using your command line or terminal, navigate to your new
In order to avoid overriding any of the files provided by the You can add the Clarion architecture by using the
-O option. This will only install the Clarion Style Architecture.
clarion new -O
src folder open the
index.js file and replace
import './index.css'; with
This will include the styles in the build process.
You should be able to use the Clarion CLI as you normally would. No additional configuration is necessary.