Dragon React boilerplate

Lite and fast React boilerplate on webpack/babel(jsx/js/sass/css modules/jest/img optimize/bundle analizer).

📂 Folder structure

template
  ├── dist                      /* generate build in production mode
  └── public                    /* static files
  |     ├── index.html          /* change title and static html here
  |     └── favicon
  └── src 
  |     └── assets              /* images, fonts, additional files
  |      ...             
  |     ├── scss                /* general style, reset & normalaize
  |     ├── index.js            /* your app starts here ;)
  |      ...
  ├── .babelrc                  /* babel config
  ├── .eslintrc                 /* eslint config
  ├── package.json              /* dependencies
  ├── webpack.config.dev.babel  /* webpack config for development
  ├── webpack.config.prod.babel /* webpack config for production
  └── .gitignore                /* ignore folders & files
   

💻 Technologies

Dragon boilerplate offers a positive development experience using the following technologies:

Tech	Description	Learn More
React	Fast, composable client-side components.	REACT
Babel	Compiles ES6 to ES5. Enjoy the new version of JavaScript today.	ES6 REPL, ES6 vs ES5, ES6 Katas
Webpack	Bundles npm packages and our JS into a single file.	Webpack
Jest	Automated tests.	JEST
ESLint	Lint JS. Reports syntax and style issues.	ESLINT
SASS	Compiled CSS styles with variables, functions, and more.	SASS
CSS modules	A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.	CSS modules
PostCSS	Transform styles with JS plugins. Used to autoprefix CSS
IMG	Compress and optimize your image files.

🚀 Getting Started

You can run aplication on your local dev environment in 5 minutes with these steps:

1. Install Node.js download.

2. Install Yarn download.

3. Clone repository .

4. Install dependencies .

   Open CLI in aplication folder and set up in a single command:

   yarn install
   

5. Start aplication in development mode .

   Set up in a single command in CLI:

   yarn start
   

6. Create build and open bundle analizer .

   Set up in a single command in CLI:

   yarn build
   

   Keep your bundle optimized over time.

📱 Needs to be improved

• Add typescript.