Introducing react-scaffolder
Involving in front-end development in 2016 feels so good and depressing at the same time. You have infinite number of choices to make to select a development technology for your next big project. Before front-end frameworks and libraries started to dominate the flow of web development, we had to do most of the development configurations and selecting the architectural designs and principals by ourselves in order to come up with good solutions.
Era of hot libraries and frameworks
This is the era where we have the opportunity to choose from a huge amount of JavaScript libraries and frameworks, where we have the liberty of even combining them to create fascinating stuff. I highly doubt whether the next big JavaScript library or framework is being developed right now.
React for cool kids
React.js made a huge impact on the front-end world. It changed the way we think about user interfaces and even pushed us towards the goodness of functional programming and even functional-reactive programming. The community around React is a key factor for it’s massive success. For an example folks at Formidable Labs are doing a pretty good job creating tools and packages for React.
What’s missing ?
The React eco-system evolved through out a narrow timeline as it was released just around 3 years back. In order to set up a React project you need to go through so many steps to get up and running with a project. Most of the time you’ll end up configuring babel, webpack, Jest etc…
React team has addressed this particular problem with their awesome incubator project. This project let’s you to create React applications without any configuration at all. But still the development workflow isn’t smooth as we would expect. We need better developer experience with React.
Meet react-scaffolder
react-scaffolder aims to solve the mystery behind bad developer experience. With this tool it’s possible to generate react project with awesome react-boilerplate that we came up with, at 99XTechnology. This tool doesn’t intend to compete with the create-react-app project by any means. It tries to complement the work of create-react-app in certain ways. react-cli is available as an npm package. Let’s see how we can install this tool first. Open up a terminal and issue the command,
$ npm install -g react-scaffolder
After installing react command will be available globally to execute commands with the react-cli. Let’s take a look at the commands that are available and their usage.
Initiate a React project
To create/initiate a React project you can use,
$ react init [name]
where [name] should be replaced with your next big React project. Optionally if you want the goodness of ESLint, option -l should be provided.
$ react init [name] -l
After creating a project navigate to the project directory and execute following commands to get up and running.
$ npm install
$ npm run build
$ npm start
$ open http://localhost:8080Create React components
To create a React component,
$ react generate component [module] [name]
where [module] should be replaced with the directory where the component should be created and [name] should be replaced with the component name. Module name is optional. If you want to create a component within components directory, using this command would be enough.
$ react generate component [name]
Pro tip: if generate is too lengthy alias ‘g’ is available instead of generate.
Executing this command will lead you into a interactive questionnaire where you’ll be asked about the component type to be create whether it’s a child or parent component (stateless or state-full), whether propTypes should be included, if so the number of prop types and their respective types (number, string …).
Create unit tests with Jest
To create a unit test,
$ react generate test [name]
where [name] stands for the name of the test file. This will simply create a Jest test file within __test__ directory,
Interactive view
While developing, it’s so easy to get out of track and forget about what components were created and where they are located. With react-cli you can take a look at the components and unit tests file and their respective sizes.
$ react view -ct
where -c and -t are options to view components and unit test files respectively. These options can be used separately for viewing either one of them.
Pro tip: alias ‘v’ is available instead of view.
.------------------------------------------------.
| Directory | size (kb) |
|------------------------------------|-----------|
| src/components/app.js | 188 |
| src/components/clown/dark.react.js | 383 |
| src/components/header/tdk.react.js | 194 |
'------------------------------------------------'
✔ successfully loaded !
.-----------------------------------------.
| Directory | size (kb) |
|-----------------------------|-----------|
| src/__tests__/app.js | 187 |
| src/__tests__/clown/dark.js | 187 |
'-----------------------------------------'
✔ successfully loaded !
This particular view will give developers a better idea about the directory structure and delegate what’s missing and what needs to be improved in terms of the application structure.
Configuring an existing React project
No need to worry even if you already have a React project in development. You just need to add one configuration file to start using react-cli. Navigate to your project root and add .reactclirc (which similar to .babelrc). Next open .reactclirc and specify the client side folder. For an example in react-boilerplate client side code stays within src directory. So the .reactclirc will look like this,
{
"client": "src"
}Note: This assumes that component files are located within a folder named components (src/components) and tests are located within __tests__ (src/__tests__).
Instead of adding this manually you can add this with the react-cli itself by executing,
react config client src
Pro tip: alias ‘c’ is available instead of config.
Now you can use react-cli within your existing projects for smoother development experience.
Add-ons
In the future the core set of APIs will be decoupled from this project and they will be available as separate modules. This will enable the add-on eco-system that we are trying to build around react-cli. With addons you’ll be able to use react-cli with projects like react-storybook for code generation.
That’s it !. Make sure to check out this project and give it a try. If you have any issues or found any bugs add issues on our GitHub issue tracker and become a part of react-cli by adding PRs. Happy hacking ♥.
Note: This project was previously code named as — react-cli.
