npm package: @sidoshi/react-scripts
Description: Custom Configuration and scripts for Create React App.
Latest version: 1.0.9

# react-scripts

This is a custom react-scripts package to be used with [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – 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: 
    ```js
    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:
    ```sass
    @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.
    ```js
    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:
    ```js
    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: 
    ```js 
    import actions form '_actions'
    ``` 
* Prettier out of the box - Prettier is 
    installed and setup by default. Just run: 
    ```bash
    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/` - </br>
        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` - </br>
        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/` - </br>
        Contains lib-defs of your packages. Again you dont have to worry about this dir.

    `src/interfaces/` - </br>
        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
    ```