node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey ยป

react-xtruct

react-xtruct

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.

GitHub license GitHub issues

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.

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, spec and styles)

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

  • rx generate component NAME or rx g component NAME

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

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

  • rx generate container NAME or rx g container NAME

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

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 default):

  • rx serve or rx s

To build your project (Prod):

  • rx serve -e prod or rx s -e prod

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

TODO

  • Add Test Framework (for now you can eject the project and add the test framework the you like best!)
  • More...