Skip to content

Latest commit

 

History

History
81 lines (60 loc) · 3.39 KB

README.md

File metadata and controls

81 lines (60 loc) · 3.39 KB

Dragon React boilerplate

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

468-A_Guide_to_Webpack_and_React_PART2-Dan_Social-27c0d207da12514f5354e73fa53e6183

📂 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. Screenshot_1

📱 Needs to be improved

  • Add typescript.