Dongfeng Gu

Setup reactjs for web development

- 2 mins

Essential NPM Packages

name functions
Browserify Allows the browser to use NPM modules
Babel Compiles ES6/JSX into browser-readable Javascript
Babel-React-Preset Tells Babel how to compile JSX
Babelify Allows you to use Babel with Browserify
Watchify Watches for changes and instantly starts compiling

Create the react skeleton project

  1. create a folder name react-skeleton
  2. cd into the react-skeleton folder
  3. create public and src folders
  4. run git init and push your project to github
  5. run npm init to initilize the package.json file (indicate that this project is a node project)
  6. install the essential npm packages
    • npm install -g browserify
    • npm install –save babelify
    • npm install –save watchify
    • npm install –save babel-preset-react
    • npm install –save react
    • npm install –save react-dom
  7. create a components folder inside src folder
  8. create file src/main.jsx
  9. create file src/components/List.jsx
  10. create file src/components/ListItem.jsx
  11. create a js folder inside public folder
  12. create file public/js/main.js

Project Link

Use Bootstrap(3.X) and Jquery for styling

  1. add Bootstrap content delivery network (CDN) to html file
  2. add Jquery CDN to html file

example html:

<!DOCTYPE html>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <button class="btn btn-primary">Click Me!</button>
    <script src="" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Chrome developer tool setting

  1. search React Developer Tools on Chrome web store
  2. enable the Allow in incognito and Allow access to file URLs options of this tool inside the chrome extensions manager


  3. intall the http-server globally

    npm install -g http-server

  4. run http-server command on you react project folder (make sure that you project folder has public subfolder) and navigate to
  5. debug your react program by navigating to react debugger


comments powered by Disqus
rss facebook twitter github youtube mail spotify instagram linkedin google pinterest medium vimeo