|
1 |
| -# react-webpack-babel |
2 |
| -Simple React Webpack Babel Starter Kit |
3 |
| - |
4 |
| -Tired of complicated starters with 200MB of dependencies which are hard to understand and modify? |
5 |
| - |
6 |
| -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. |
7 |
| - |
8 |
| -### What's in it? |
9 |
| - |
10 |
| -* Simple src/index.jsx and src/index.css (local module css). |
11 |
| -* Webpack configuration for development (with hot reloading) and production (with minification). |
12 |
| -* CSS module loading, so you can include your css by ```import styles from './path/to.css';```. |
13 |
| -* Both js(x) and css hot loaded during development. |
14 |
| -* [Webpack Dashboard Plugin](https://github.com/FormidableLabs/webpack-dashboard) on dev server. |
15 |
| - |
16 |
| -### To run |
17 |
| - |
18 |
| -* You'll need to have [git](https://git-scm.com/) and [node](https://nodejs.org/en/) installed in your system. |
19 |
| -* Fork and clone the project: |
20 |
| - |
21 |
| -``` |
22 |
| -git clone https://github.com/alicoding/react-webpack-babel.git |
23 |
| -``` |
24 |
| - |
25 |
| -* Then install the dependencies: |
26 |
| - |
27 |
| -``` |
28 |
| -npm install |
29 |
| -``` |
30 |
| - |
31 |
| -* Run development server: |
32 |
| - |
33 |
| -``` |
34 |
| -npm start |
35 |
| -``` |
36 |
| - |
37 |
| -* Or you can run development server with [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard): |
38 |
| - |
39 |
| -``` |
40 |
| -npm run dev |
41 |
| -``` |
42 |
| - |
43 |
| -Open the web browser to `http://localhost:8888/` |
44 |
| - |
45 |
| -### To build the production package |
46 |
| - |
47 |
| -``` |
48 |
| -npm run build |
49 |
| -``` |
50 |
| - |
51 |
| -### Nginx Config |
52 |
| - |
53 |
| -Here is an example Nginx config: |
54 |
| -``` |
55 |
| -server { |
56 |
| - # ... root and other options |
57 |
| -
|
58 |
| - gzip on; |
59 |
| - gzip_http_version 1.1; |
60 |
| - gzip_types text/plain text/css text/xml application/javascript image/svg+xml; |
61 |
| -
|
62 |
| - location / { |
63 |
| - try_files $uri $uri/ /index.html; |
64 |
| - } |
65 |
| -
|
66 |
| - location ~ \.html?$ { |
67 |
| - expires 1d; |
68 |
| - } |
69 |
| -
|
70 |
| - location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ { |
71 |
| - access_log off; |
72 |
| - log_not_found off; |
73 |
| - expires max; |
74 |
| - } |
75 |
| -} |
76 |
| -``` |
77 |
| - |
78 |
| -### Eslint |
79 |
| -There is a .eslint.yaml config for eslint ready with React plugin. |
80 |
| -To use it, you need to install additional dependencies though: |
81 |
| - |
82 |
| -``` |
83 |
| -npm install --save-dev eslint eslint-plugin-react |
84 |
| -``` |
85 |
| - |
86 |
| -To do the actual linting, run: |
87 |
| - |
88 |
| -``` |
89 |
| -npm run lint |
90 |
| -``` |
91 |
| - |
92 |
| -### Notes on importing css styles |
93 |
| -* styles having /src/ in their absolute path are considered part of the application and exported as local css modules. |
94 |
| -* other styles are considered global styles used by many components and are included in the css bundle directly. |
95 |
| - |
96 |
| -### Contribute |
97 |
| -Please contribute to the project if you know how to make it better, including this README :) |
| 1 | +# A comparison between pure react components with HOCs and standard classes |
0 commit comments