https://github.com/settinghead/react-roulette
https://github.com/settinghead/react-roulette
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/settinghead/react-roulette
- Owner: settinghead
- License: mit
- Created: 2016-08-29T05:16:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-08-29T05:17:10.000Z (over 9 years ago)
- Last Synced: 2025-01-14T17:15:36.970Z (over 1 year ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-webpack-babel
Simple React Webpack Babel Starter Kit
Tired of complicated starters with 200MB of dependencies which are hard to understand and modify?
Try this is a simple [React](https://facebook.github.io/react/), [Webpack](http://webpack.github.io/) and [Babel](https://babeljs.io/) application with nothing else in it.
### What's in it?
* Simple src/index.jsx and src/index.css (local module css).
* Webpack configuration for development (with hot reloading) and production (with minification).
* CSS module loading, so you can include your css by ```import styles from './path/to.css';```.
* Both js(x) and css hot loaded during development.
### To run
* You'll need to have [git](https://git-scm.com/) and [node](https://nodejs.org/en/) installed in your system.
* Fork and clone the project:
```
> $ git clone THIS_REPO_URL
```
* Then install the dependencies:
```
> $ npm install
```
* Run development server:
```
> $ npm start
```
Open the web browser to `http://localhost:8888/`
### To build production package
```
> $ npm run build
```
### Nginx Config
Here is the suggested Nginx config:
```
server {
# ... root and other options
gzip on;
gzip_http_version 1.1;
gzip_types text/plain text/css text/xml application/javascript image/svg+xml;
location ~ \.html?$ {
expires 1d;
}
location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
access_log off;
log_not_found off;
expires max;
}
}
```
### Eslint
There is a .eslint.yaml config for eslint ready with React plugin.
To use it, you need to install additional dependencies though:
```
> npm install --save-dev eslint eslint-plugin-react
```
To do the actual linting, run:
```
> npm run lint
```
### Notes on importing css styles
* styles having /src/ in their absolute path are considered part of the application and exported as local css modules.
* styles having /node_modules|global/ in their absolute path are considered global styles used by many components and are included in the css bundle directly.
### Contribute
Please contribute to the project if you think this can be done better in anyway even for this README :)