Creating a CRUD Application with React.js

Published: 2016-07-10

By: MJ Rossetti

Category:
Technologies:

Repository

Project Page

This node.js application includes a back-end API and a front-end interface.

API

The back-end API uses express.js to serve JSON at /api endpoints.

reference: app.js, routes/

The server was generated using express-generator.

Datastore

The API serves data from a MongoDB datastore, with database connections and data models handled by mongoose.js.

reference: db.js, models/robot.js, db/

Tests

Testing the API server was straightforward using mocha.js as a generic node.js testing framework, and more specifically supertest for testing HTTP GET and POST requests.

reference: test/api/

Interface

The front-end interface is a React application.

reference: src/components/

Build Process

React components are written in JSX, which in order to be interpreted by browsers requires conversion into normal JavaScript.

This build process is performed by webpack, which relies on babel.js to translate various flavors of JSX.

reference: .babelrc, webpack.config.js, webpack.dev.config.js

In production, the build process creates a file called dist/bundle.js, which the server is configured to recognize. In development mode, the bundle is managed in-memory by webpack-dev-middleware.

In development, webpack-hot-middleware enables react’s hot-reloading feature, which updates components without need to refresh the page.

Routing

The express server recognizes navigation to the root url and serves the react bundle. Navigation between various react components is handled by react-router. In development, react router is configured to use “hash” urls (e.g. http://localhost:3000/#/?_k=hpvxlt), and visits to unrecognized urls are handled properly (i.e. a visit to http://localhost:3000/#/robots/my_bot results in a redirect to the root url with a flash message saying “Couldn’t find robot #my_bot”. In production, react router is configured to use cleaner-looking urls, (e.g. https://react-robots.herokuapp.com/robots/new), but unfortunately visits to unrecognized urls result in 404 errors.

reference: src/entry.js, react-related sections of app.js

Flash messaging logic is handled by react components, not the express server.

Testing

Integration tests for react components required investigation into various browser testing frameworks. Perhaps the most stable is selenium-webdriver, although it depends on java to run a separate webdriver server.

reference: test/components/