Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pheuter/essential-react
A minimal skeleton for building testable React apps using Babel
https://github.com/pheuter/essential-react
babel boilerplate react skeleton webpack
Last synced: 2 days ago
JSON representation
A minimal skeleton for building testable React apps using Babel
- Host: GitHub
- URL: https://github.com/pheuter/essential-react
- Owner: pheuter
- License: mit
- Created: 2015-03-08T19:10:15.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-07-31T14:53:27.000Z (over 6 years ago)
- Last Synced: 2025-01-04T00:11:35.894Z (9 days ago)
- Topics: babel, boilerplate, react, skeleton, webpack
- Language: JavaScript
- Homepage:
- Size: 344 KB
- Stars: 2,021
- Watchers: 44
- Forks: 131
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - essential-react - A minimal skeleton for building testable React apps using Babel. (Uncategorized / Uncategorized)
- awesome-react-components - essential-react - A minimal skeleton for building testable React apps using Babel. (Code Design / Boilerplate)
- awesome-list - essential-react - A minimal skeleton for building testable React apps using Babel. (Code Design / Boilerplate)
- awesome-react-components - essential-react - A minimal skeleton for building testable React apps using Babel. (Code Design / Boilerplate)
- awesome-react-components - essential-react - A minimal skeleton for building testable React apps using Babel. (Code Design / Boilerplate)
README
### Essential React
[](https://travis-ci.org/pheuter/essential-react)
[](https://coveralls.io/r/pheuter/essential-react)
---
[](https://heroku.com/deploy)
A minimal skeleton for building testable React apps using Babel.
- [Design Goals](#design-goals)
- [Getting Started](#getting-started)
- [Commands](#commands)
- [server](#server)
- [build](#build)
- [test](#test)
- [coveralls](#coveralls)
- [clean](#clean)
- [Changelog](#changelog)
## Design Goals
- Use fewer tools (no yeoman, gulp, bower, etc...)
- Babel 6 with Webpack and Hot Loader
- Fast testing with mocked-out DOM
- Import css files as class names
- Separate [Smart and Dumb](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) components
- No specific implementation of Flux or data fetching patterns
## Getting Started
```sh
$ npm install
```
Start the local dev server:
```sh
$ npm run server
```
Navigate to **http://localhost:8080/** to view the app.
## Commands
A core philosophy of this skeleton app is to keep the tooling to a minimum. For this reason, you can find all the commands in the `scripts` section of [package.json](package.json).
### server
```sh
$ npm run server
```
**Input:** `src/main.jsx`
This leverages [React Hot Loader](https://github.com/gaearon/react-hot-loader) to automatically start a local dev server and refresh file changes on the fly without reloading the page.
It also automatically includes source maps, allowing you to browse code and set breakpoints on the original ES6 code:
### build
```sh
$ npm run build
```
**Input:** `src/main.jsx`
**Output:** `build/app.js`
Build minified app for production using the [production](http://webpack.github.io/docs/cli.html#production-shortcut-p) shortcut.
### test
```sh
$ npm test
```
**Input:** `test/main.js`
**Output:** `coverage/`
Leverages [ava](https://github.com/sindresorhus/ava) to execute the test suite and generate code coverage reports using [nyc](https://github.com/bcoe/nyc)
### coveralls
```sh
$ npm run coveralls
```
**Input:** `coverage/lcov.info`
Sends the code coverage report generated by [nyc](https://github.com/bcoe/nyc) to [Coveralls](http://coveralls.io/).
### clean
```sh
$ npm run clean
```
**Input:** `build/app.js`
Removes the compiled app file from build.
## [Changelog](CHANGELOG.md)