nwb-thinking-in-react implements the example from the Thinking in React tutorial using nwb for development and testing.
nwb-react-tutorial implements the chat app from the React Tutorial using nwb's Express middleware to develop using nwb 0.12's default configuration on the tutorial's own server.
The same server is used to serve up a Webpack development build or a production build if one exists.
- Article: Using Bootstrap 4 from source with React and nwb
- Repo: https://github.com/insin/bootstrap-4-nwb
nwb-react-toolbox-example shows how you can use webpack.styles config to provide a custom stylesheet handling configuration for specific stylesheets in your app, in this case for a dependency's stylesheets.
react-yelp-clone takes the app created in the Build a Yelp Clone React tutorial and uses nwb for its development tooling, with a custom nwb.config.js to support the same setup.
Check out the diff to see the effect using nwb has on the amount of devDependencies and configuration which needs to be managed.
react-nwb-github-issues is a clone of the ember-cli github-issues-demo demo app, showing development of a React app from scratch using nwb.
Selected commits of interest:
- The skeleton React app created by
nwb new react-app - Installing a CSS preprocessor plugin - nwb automatically detects and uses CSS preprocessor plugins from your dependencies
- Installing a dependency which manages and
require()s its own CSS dependency - the CSS and its image/font dependencies were hot reloaded into the running app when this change was made
Note: this example app initially tries to stick close to the original version commit-by-commit for the sake of comparison, by using async-props, which is currently in pre-release.
Tutorial video by Cody Lindley of creating a new React app with nwb and getting started with Kendo UI components, auto-installing new dependencies from the development server and doing some Babel stage config via nwb.config.js:
Good tip from this video: use -- to pass additional flags to npm run commands: npm start -- --auto-install.
nwb v0.7 added an --auto-install flag to nwb serve which automatically installs and saves missing dependencies from npm using NpmInstallPlugin.
Just after nwb v0.6 was released, someone on Reactiflux asked this question:
hey guys, i need to prove a concept quickly, i need a boilerplate with react and some kind of mobile ui framework like ratchet, does anyone know of a good boilerplate like that?
This video shows the resulting example of using nwb to create a new React app project, installing Ratchet from npm and using its CSS, and using the nwb config file to configure Babel with a plugin to make it more convenient to copy and paste HTML samples from Ratchet's docs:
