react-scripts

This is a custom react-scripts package to be used with Create React App. Please refer to its documentation:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.

This react-scripts package adds some extra features to official react-scripts:

• Sass support - You can now import sass, scss or css files in js code like this:

  import 'App.sass'

  Note: css files are also processed with node-sass webpack loader. Though that wouldn't cause any problem even if you use plain css.

  Sass files can also import modules from sass directory in src. This is to store reusable varibles like colors and config as shown in template App.sass and index.sass. Example:

  @import "_colors.sass"

  Now this file has access to all variables declared in _colors.sass.

  It is good practice to prefix this files with _ (underscore) like this _colors.sass as files prefixed with _ are not compiled to css by node-sass.

• Absolute Imports - All direct files under src can be imported with absolute path.

  import App from 'components/App'

  Note: Files in src are given preference over node_modules so it would be better to name your files properly.

  For eg:

  import actions from 'actions'

  If you have a directory or file named actions directly under src than that will be imported instead of actions package you might have downloaded from npm. It would be better to give namespace to files directly under src like prefixing them with _ so you could import like this:

  import actions form '_actions'

• Prettier out of the box - Prettier is installed and setup by default. Just run:

  npm run format

  All js files under src/ will be formated by prettier. You can obviously edit the format script in package.json if you don't like the default behaviour.

  Note: This will run automatically by precommit hooks before you commit, so you can never commit bad code.

• Flow built-in - Flow supported by default. Run:

  npm run flow

  Adding flow requires adding some extra configuration and directories. So you may find following extra files in your project.

  .flow/ - Contains stubs for sass imports. You dont have to ever worry about what's in this directory. You can even configure your editor to hide this directory. But this dir is import to your flow config so you have to commit this.

  .flowconfig - Contains flow config. You can change it to suit your needs. By default it contains decent config so you may not need to change it.

  flow-typed/ - Contains lib-defs of your packages. Again you dont have to worry about this dir.

  src/interfaces/ - Empty directory. You can place your flow types (interfaces) here.

  Note: This will run automatically by precommit hooks before you commit, so you can never commit bad code.

  If you are using vscode, set javascript.validate.enabele to false.

• Git Hooks - If you are creating the app in existing git repo, then git hooks are already setup for you. Before you commit your code will be automatically formatted using prettier and tested using jest and flow, so you can be sure that your code is consistent and bug free. Though if you are not creating the app in an existing git repo, hooks will not be set up. If you want to set it up, you simply need to initialise the repo and run setup_hooks script like this:

  git init
  npm run setup_hooks

  Once you have succesfully run setup_hooks, there is no need for setup_hooks script, So you can remove that script from package.json.

• Storybook - You get storybook setup for you. Any file ending with .stories.js will be run by storybook. You can use this to build components in isolation and better document your component. Run:

  npm run storybook