React Composition Demo
(built on react-hot-boilerplate by Dan Abramov)
This slideshow and demo was presented by Ronald ChanOu at PeopleSpace (Irvine, CA), for the ReactJS OC Meetup group. The slideshow is itself a React component built using the techniques in the talk. Build it, browse to it, and use the left and right arrows to scroll through the slides.
You can also just download the repo and open index.html in the dist folder.
Goals
- Demo webpack build processes for both development and production
- Demo goodness enabled by webpack such as: live-reloading, ES6+ and JSX transpilation with Babel, and asset bundling (CSS, fonts, etc.)
- With ES6, demo various methods of component composition, from simple to advanced
- Demo React v0.14
Usage
Important note
Because I am using React 0.14, you will get peer dependency issues with npm versions less than 3, so unless you know how to solve that yourself (I don't), I recommend installing npm 3:
npm install -g npm@3.0-latest
On Windows, it may not update PATH correctly (npm -v
still shows a version less than 3). To fix that:
- Type
where npm
to list all locations fornpm
- Try
npm -v
in the folder for each one until you get the one with version 3+ - Edit the system variable
PATH
to use this. I highly recommend installing Rapid Environment Editor and running it as administrator to more easily and safely editPATH
. In the editor, right-click "Path", select "Add Value", enter the correct npm 3 path, make sure it is above any other npm paths, and save. Close and re-open anycmd
windows for the newPATH
to take.
(I do apologize for any inconvenience this causes. I tend to live on the edge.)
Initialization and build
After cloning/downloading this repo and navigating to it in the command line:
npm install
node dev
Then open http://localhost:3000
in your favorite browser.
Now make changes in src/slides/00-intro.js
.
Applicable changes will appear without reloading the browser like in this video.
If changes don't hot load, open your browser console to find out why.
To run the production build process:
node prod
0.0.0.0
as Host
Using You may want to change the host in dev.js
from localhost
to 0.0.0.0
to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
Resources
- Look up articles and videos by Dan Abramov on higher-order components and hot reloading
- Cheng Lou uses the "child render function" pattern such as in react-motion
- The react-future repo also demos some of these patterns
- React maintainer Sebastian Markbåge also has a lot to say about React composition