- built using React
- written in ES2015
- bundled via webpack
- compiled by Babel
- developed through TDD
Webpack sets the entry point to app.js
where the App container is initialized (it lives in containers/App/App.js
).
The <App />
container injects the necessary instance of react-router as the page content. Application routes are built in routes.js
where it requires views/Main/routes.js
and nests it inside a react-router <Route />
object.
While <App />
contains our injected routes, views/Main/Container.js
is the wrapper that binds our components together, allowing us to bind those components to parent functions and data. <Container />
uses its render() function to glue all of our components together.
NOTE - Each component and container includes
styles.module.css
and{Name}.spec.js
files. Styles are modularized and managed by precss and cssnano. More on spec files below.
Clone it
$ mkdir react-yelp-clone && cd react-yelp-clone
$ git clone git@github.com:davidpaulhunt/react-yelp-clone.git
Install node modules
$ npm install
Start the server
$ npm start
Open http://localhost:3000/ in a browser.
Tests are built and run by committee using karma, mocha, chai, enzyme, jasmine-core, and phantomjs.
NOTE - As mentioned above, each component and container includes a
{Name}.spec.js
file. A shallow instance of the react component/container is built before each test using enzyme. Tests are run in a headless browser via PhantomJS.
First, install the karma-cli
$ npm install -g karma-cli
To run tests once
$ npm test
To utilize webpack's hot reloading i/e have the tests run after each time a file changes
$ npm run test:watch
MIT
This example application, especially the structure and modules used, come from Fullstack React's tutorial. Big thanks to those folks for helping me get started with the stack!