React + Open Layers 3 Sample

This is a sample proyect using React + Open Layers 3

Features

• React
• ES6 (with babel)
• PostCSS using ITCSS and BEM methodology.
• Hot Module Replacement (React Hot Loader 3)
• Webpack
  • Webpack-dev-server
  • Webpack development environment configuration
  • Webpack Babel loader configuration
  • Webpack SCSS 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)

• React Router
• Redux
• 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-openLayers3-sample
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-openLayers3-sample.git

Note: That will create a new folder called react-openLayers3-sample 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-openLayers3-sample  
$ 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