Skip to content

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

License

Notifications You must be signed in to change notification settings

vojtechszocs/react-playground

Repository files navigation

react-playground

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

WORK IN PROGRESS

Technologies

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.

  • pure React application

  • state centralized in top-level <App> component

Vanilla React App plus:

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:

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.

License

MIT

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published