/react-bundle-test

Project used mostly to get up to date on NodeJS, React, Redux and all that.

Primary LanguageJavaScript

Playing with Buttons

This project is mainly an example on how to setup and work with React, React Router and Redux. It uses NodeJS (>= 5.5.0) to build and answer to server requests, and Webpack to build and bundle the app to be delivered to the user's browser.

How to start

After checkout, just run npm install to install the NodeJS Modules. Then, just run npm start to start the application. Webpack will bundle the code and you can then access the site at http://localhost:8080/webpack-dev-server/ (/webpack-dev-server/ enables hot swapping)

How to fiddle with the code

The file js/app.js is the entry point for the application. It is heavily commented to describe as much as possible. The easiest thing to do would be to add a new Component in js/components/ that renders some text. This is what the Home component does, and it is the default page for the application when it is loaded in a browser. Next step would be to add a link to it in the navigation and add it to the routes.

The ButtonMaker component is an example of a form with inputs and saving results to the store and how to connect the component with the store instance, how to get the data from the state and save it to the component's props and the actions that the component can apply.

The ButtonSimulator is a composite of 2 more components :

  • ButtonArray lists the button created in ButtonCreator, then adds an onClick handler to create a message based on the button's properties and save it to the Store.
  • ButtonLogger shows all the message in the Store with the date at which they've been added.

Dependencies

All dependencies are marked as devDependencies since we bundle everything in a single file (bundle.js) and serve a static HTML page.

"devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "history": "^2.0.0",
    "html-webpack-plugin": "^2.8.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "react-redux": "^4.2.1",
    "react-router": "^2.0.0-rc5",
    "redux": "^3.2.1",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.14.1"
  }

Stylus

Most of the CSS is handled through Stylus (CSS compiler like LESS, SASS, etc.). The main.styl file is in css/stylus.

Babel

Babel is a JavaScript compiler. It's used to enable ES2015 code in our app for the most part

Webpack

TODO: Format and complete

  • Tool used to bundle and serve the app
  • Has code swapping enable in dev mode
  • Can build an app to a static HTML page that'll be served in some other way

TODO

Here is a list of additional elements that could be done :

  • Use Immutable.js to avoid changing the state of the Store
  • Continue with styling
  • Add a section to explain a bit more the Webpack and Babel configuration
  • More things to do... ?