react-xtruct v2.1.0

An intuitive, simplified cli to create a react project, generate components, run test, build and serve. The cli is based on proven technologies like webpack, babel, eslint, postcss, react and more. It uses a flat folder structure to find your code faster, make you more productive and avoid repetition.

FOCUS ON YOUR CREATIVITY AND YOUR CODE. LEAVE THE SETUP DIRTY WORK TO REACT-XTRUCT!

See the latest Release Notes and react-xtruct Wiki for any help. If you would like to contribute go to Github React-Xtruct.

Let us know what you think and anything you think the cli is missing!

Prerequisites

• Command Line
• Node >= 6.11.5
• Npm >=3.10.10 or Yarn
• Git >= 2.13.6

If you are using Yarn see the Set Config bullet point near the end of this file to set Yarn

Installing

Using npm you can install react-xtruct

• npm i -g react-xtruct

Help

To learn more about the cli, type:

• rx --help

Docs

To see the cli docs, type:

• rx docs

Version

To get the current version of react-xtruct:

• rx --version or rx v

System

To get your system information (node, npm, yarn and os)

• rx system

Create New Project

Creates structure, sets git repo and installs dependencies for the project.
Once the project is created with react-xtruct, cd to the project root directory and run any of the commands from rx-xtruct to lint, build or serve.

To create a new project in an already existent directory:

• rx new

To create a new project with a root directory:

• rx new NAME

To create a new project using sass (by default the project uses css modules, supports: sass, scss, less and stylus):

• rx new NAME --style scss

To create a new project without installing the project's dependencies:

• rx new NAME --skip-dependencies

To create and setup a new project with router:

• rx new NAME --router or rx new --router

To create and setup a new project with redux:

• rx new NAME --redux or rx new --redux

To create and setup a new project with redux and router:

• rx new NAME --redux --router or rx new --redux --router

Generate Components

To generate a new presentation (component) in your project (component and styles)

• rx generate component NAME or rx g component NAME

To generate a new (container) component in your project (component and styles)

• rx generate container NAME or rx g container NAME

To generate a new (container) component in your redux project (component, styles, actions and reducers)

• rx generate container NAME --redux or rx g container NAME --redux

NOTICE: If using Router or Redux, you will have to add the container component to your app router and reducer manually if needed!

To learn more about the difference between presentation component and container component please visit the link below:

Presentation(Dumb) Component and Container(Smart) Component

Lint Project

To lint your project:

• rx lint or rx l

Test Project

To test your project:

• rx test or rx t

To test your project and watch:

• rx test --watch or rx t -w

To test your project with coverage:

• rx test --coverage or rx t -c

To test your project with coverage and watch:

• rx test --coverage --watch or rx t -c -w

Build Project

To build your project (Dev default):

• rx build or rx b

To build your project (Prod):

• rx build -e prod or rx b -e prod

Serve Project

To serve your project(Dev):

• rx serve or rx s or rx start

To serve your project using a specific port (default port is 8080)

• rx s --port 8700 or rx s -p 8700

Eject Project

To eject your project (this will give you control over your project configs (webpack, eslint and babelrc)) from rx-xtruct (irreversible action):

• rx eject

Set Config

To set config local:

• rx set key=value or rx set key=value

To set config global:

• rx set key=value --global or rx set key=value -g

To set your project's dependency manager locally (default npm)

• rx set dependencyMananger=yarn or rx set dependencyMananger=npm

To set your project's dependency manager globally (default npm)

• rx set dependencyMananger=yarn -g orrx set dependencyMananger=npm -g

To set your project dependency manager to yarn (default npm)

• rx set dependencyMananger=yarn -g orrx set dependencyMananger=yarn -g