react-playground

Technology showcase of React and related tools to build modern web applications.

WORK IN PROGRESS

Technologies

• webpack with Babel using ES2015 preset

• ESLint with JavaScript Standard Style rules

• stylelint with common CSS rules

• UglifyJS and cssnano for optimizing production builds

• Jest with Enzyme for testing JS code and React components

Browser support

The Browserslist file is used to define supported browsers.

As for Internet Explorer™, we only care about the officially supported (latest) version for recent Windows platforms, and so should you.

Wait, where’s the rest of CSS toolchain?

Our webpack CSS loader configuration is minimal on purpose, using the standard css-loader with CSS Modules enabled and custom cssnano options for production builds.

For bigger projects, you can use the up-and-coming PostCSS with its ecosystem of plugins or use more traditional tools like Sass or Less that come packed with lots of features out of the box.

Prototypes

Each prototype is a separate React-based web application built with webpack.

Vanilla React App

• pure React application

• state centralized in top-level <App> component

React App with Redux

Vanilla React App plus:

• Redux with react-redux bindings for predictable state management

• Reselect for efficient computation of derived data

React App with Redux and Saga

React App with Redux plus:

• Redux-Saga for handling asynchronous operations (like HTTP requests) and side effects (like browser localStorage access)

• tcomb for API data type validation

Development environment

1. install nvm and run nvm install v6.y.z or install Node.js v6 (LTS) manually on your platform

2. install Yarn (latest stable)

3. run yarn install to download and link project’s dependencies into the local node_modules directory

4. start webpack dev-server via yarn run start:dev and JSON API server via yarn run start:api

5. open the prototype page in your web browser and start hacking!

webpack dev-server

With dev-server, all project assets are processed in-memory (no dist directory).

dev-server watches the filesystem and recompiles project assets on change, regenerating JS chunks as needed. Once recompiled, application’s HTML page is automatically reloaded (this is done by injecting a script that opens WebSocket connection to dev-server).

Testing

There are several types of tests included in this project:

• regular JS unit test: utils.test.js

• React component test: NoteFilter.test.js

Coming up next: Redux reducer test, Saga test, async service test (like remote.js)

Basic commands

yarn run build

Build project for production. Outputs are placed in dist directory. Performs code linting and runs unit tests before doing the actual build.

yarn run build:dev

Build project for development (without optimizations). Same output location as with build script. No code linting or unit tests, just the build itself.

yarn run start:dev

Start webpack dev-server, watching the filesystem and recompiling project assets on change.

yarn run start:api

Start JSON API server that imitates a real backend.

yarn run test

Run unit tests. Avoids side effects such as automatically creating snapshot files if missing. Suitable for execution in CI environment.

yarn run test:snap

Run unit tests and automatically create/update snapshot files if they are missing/conflicting. Use this only when snapshot files need to be created/updated.

yarn run test:watch

Run unit tests, then watch the filesystem and rerun tests related to changed files.

Other commands

yarn outdated

Check for outdated dependencies.

yarn check

Validate dependency resolutions in yarn.lock based on project’s dependencies declared in package.json.

yarn run foo / yarn run foo -- args

Run a locally installed JS module foo with optional args.

Good articles

• tutorials and resources on React, Redux, ES6 and more (don’t get overwhelmed!)

• dissolving the confusion around Redux and MobX

• writing meaningful mapStateToProps

• convention to differentiate action creators from action types

License

MIT