Responsive menu component built in React

This is a sample proyect for Responsive menu component built in React

Demo

You can see a demo here -> React Responsive Menu

Responsive Menu Closed:

Responsive Menu Opened:

Features

• React
• ES6 (with babel)
• PostCSS using ITCSS and BEM methodology.
  • import, nesting, simple-vars (SSAS style) and autoprefixer.
• Hot Module Replacement (React Hot Loader 3)
• Promise polyfill on demand. More info
• Webpack
  • Webpack-dev-server
  • Webpack development environment configuration
  • Webpack Babel loader configuration
  • Webpack PostCSS configuration
  • Webpack configuration for HMR
  • Webpack production configuration
    • Split out css files (two threads, JS and CSS) using ExtractTextPlugin
    • UglifyJsPlugin with options
    • Use include in the loader instead of the exclude. More info
    • More perfomance tips: here
  • Webpack stats (bundle optimization helper)
    • Generate stats.json file with profiler. Use (this tool)[http://webpack.github.io/analyse/] to analyze it.
    • webpack visualizer

Features NOT INCLUDED (TODOs)

• Testing. Integrate with Jest
• Linting. Integrate with eslint

Getting Started

Install pre-requisites

• Node.js and NPM: Download and install. I have version 6.6.0 of Node and 3.10.6 of NPM on Windows PC
• Git: Download and install. I have version 2.7.4 installed on Windows PC

Clone Repo

1. Get the url of your forked project.
   • Go to https://github.com/username/react-responsive-menu-component
2. Click on "Clone or download" and Copy to clipboard the url ending on .git.
3. Open your command line and go to your directoy
   You don't need to create a specific folder for the project, it will be created by git
4. Clone your forked repo on your machine:

$ git clone https://github.com/username/react-responsive-menu-component.git

Note: That will create a new folder called react-responsive-menu-component with all the files in.

Install Project dependencies

Use npm i or npm install, which will be use the package.json file located in the current location.

$ cd react-responsive-menu-component  
$ npm i

Open the project with your Development IDE

I use VS Code https://code.visualstudio.com Open the project using this command:

$ code .

Start development server with Hot Reloading

$ npm run start

Done!

Contributing

Please feel free to add your own improvement. I am waiting your Pull Request (PR).

License

MIT License Copyright (c) 2016 Jose Quinto Zamora