Dragon React boilerplate

A lightweight and fast React boilerplate utilizing Webpack and 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 by using the following technologies:

Tech	Description	Learn More
React	Fast, composable client-side components.	REACT
Babel	Transpiles ES6 to ES5 so you can start using modern JavaScript today.	ES6 REPL, ES6 vs ES5, ES6 Katas
Webpack	Bundles npm packages and your JavaScript code 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 the application in your local development environment in just 5 minutes by following 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.

📄 License

This project is open-source and available under the MIT License.