Skip to content
This repository was archived by the owner on Jan 25, 2019. It is now read-only.

Commit 12c5536

Browse files
shrynxshrynx
committed
updated readme files
1 parent 1f58c5b commit 12c5536

File tree

3 files changed

+300
-1
lines changed

3 files changed

+300
-1
lines changed

‎README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,107 @@
1+
<a href='https://github.com/shrynx/react-super-scripts'><p align='center'><img src='https://raw.githubusercontent.com/shrynx/react-super-scripts/develop/packages/react-scripts/template/src/logo.png' height='100' ></p></a>
2+
3+
# ⚡ react <sup>-super-scripts</sup> ⚡
4+
5+
**This package adds super powers and allows custom configs without ejecting [Create React App](https://github.com/facebookincubator/create-react-app)**
6+
7+
⚠️ This is not a fork of create-react-app, it is just a fork of react-scripts.
8+
9+
#### Create bootstraped React apps simply by
10+
11+
`create-react-app my-app --scripts-version react-super-scripts`
12+
13+
<sup>* If you don't have Create React App, then</sup>
14+
<sup>`npm -g install create-react-app`</sup>
15+
16+
## Features
17+
Apart from features provided by [CRA](https://github.com/facebookincubator/create-react-app#whats-inside), this package adds more goodies listed below.
18+
19+
### Webpack
20+
* **Webpack Dasboard**
21+
* you got to love webpack dashboard
22+
* Webpack dashboard is turned on by default,but it is configurable
23+
* you can disable it able it setting dashboard as false in react_super_script in package.json
24+
```js
25+
{
26+
...
27+
28+
"react_super_scripts": {
29+
"dashboard": true
30+
}
31+
}
32+
```
33+
* **Hot module replacement**
34+
* supports HMR for js files too.
35+
* **Supports SASS and LESS**
36+
* write styles in css, sass or less
37+
* **Webpack image loader**
38+
* for compressing images
39+
* **Vendor splitting**
40+
* you can split out vendor files from app logic, simply by creating a `vendor.js` file in `src` folder,
41+
and import all your vendor dependencies in that file.
42+
* **Build Progress Bar**
43+
* During build process a progress bar is shown.
44+
45+
### Babel
46+
* **Custom babel config**
47+
* Want to use latest and greatest of javascript, no worries
48+
include custom babel presets by installing packages
49+
and adding them to **.babelrc** in root directory of the app
50+
* **Note**: This will completly override existing presets.
51+
You will need to create the .babelrc file inside your app folder
52+
and remember to add **react-hmre** preset to babel development.
53+
This script relies on react-hmre for hot module replacement.
54+
55+
### ESLint
56+
* **Custom eslint config**
57+
* Not happy with the default linting rules,
58+
simply include custom eslint by installing packages
59+
and adding them to **.eslintrc** in root directory of the app
60+
* **Note**: This will completly override existing linting rules.
61+
You will need to create the .eslintrc file inside your app folder.
62+
63+
### Preact
64+
* **Using preact instead of react**
65+
* [Preact](https://github.com/developit/preact) is a fast, 3kB alternative to React, with the same ES2015 API,
66+
* In your package.json add usePreact to react-super-scripts and set it to true.
67+
Your package.json should look like
68+
```js
69+
{
70+
...
71+
72+
"react_super_scripts": {
73+
"usePreact": true
74+
}
75+
}
76+
```
77+
78+
Then uninstall ```react``` and ```react-dom``` and install ```preact``` and ```preact-compat```
79+
80+
```npm uninstall react react-dom && npm install --save preact preact-compat```
81+
* You can keep using you existing react code without any changes, under the hood
82+
webpack will alias react and react-dom to use preact.
83+
* **Note**: This package uses ```preact-compat``` for maintaining compatibility with react.
84+
This doesn't guarantee complete compatibility, test all features fully first.
85+
86+
### Others
87+
88+
* **Custom entry point**
89+
* You can specify app entry point for webpack.
90+
* In your package.json specify the file path to appEntry property
91+
of react_super_scripts field.
92+
Your package.json should look like
93+
```js
94+
{
95+
...
96+
97+
"react_super_scripts": {
98+
"appEntry": "src/index.js"
99+
}
100+
}
101+
```
102+
a default entry point (src/index.js) is already provided in package.json.
103+
* **Note**: if you don't provide appEntry in your package.json it will default to scr/index.js
104+
1105
# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app)
2106

3107
Create React apps with no build configuration.

‎packages/react-scripts/README.md

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,106 @@
1-
# react-scripts
1+
<a href='https://github.com/shrynx/react-super-scripts'><p align='center'><img src='https://raw.githubusercontent.com/shrynx/react-super-scripts/develop/packages/react-scripts/template/src/logo.png' height='100' ></p></a>
2+
3+
# ⚡ react <sup>-super-scripts</sup> ⚡
4+
5+
**This package adds super powers and allows custom configs without ejecting [Create React App](https://github.com/facebookincubator/create-react-app)**
6+
7+
⚠️ This is not a fork of create-react-app, it is just a fork of react-scripts.
8+
9+
#### Create bootstraped React apps simply by
10+
11+
`create-react-app my-app --scripts-version react-super-scripts`
12+
13+
<sup>* If you don't have Create React App, then</sup>
14+
<sup>`npm -g install create-react-app`</sup>
15+
16+
## Features
17+
Apart from features provided by [CRA](https://github.com/facebookincubator/create-react-app#whats-inside), this package adds more goodies listed below.
18+
19+
### Webpack
20+
* **Webpack Dasboard**
21+
* you got to love webpack dashboard
22+
* Webpack dashboard is turned on by default,but it is configurable
23+
* you can disable it able it setting dashboard as false in react_super_script in package.json
24+
```js
25+
{
26+
...
27+
28+
"react_super_scripts": {
29+
"dashboard": true
30+
}
31+
}
32+
```
33+
* **Hot module replacement**
34+
* supports HMR for js files too.
35+
* **Supports SASS and LESS**
36+
* write styles in css, sass or less
37+
* **Webpack image loader**
38+
* for compressing images
39+
* **Vendor splitting**
40+
* you can split out vendor files from app logic, simply by creating a `vendor.js` file in `src` folder,
41+
and import all your vendor dependencies in that file.
42+
* **Build Progress Bar**
43+
* During build process a progress bar is shown.
44+
45+
### Babel
46+
* **Custom babel config**
47+
* Want to use latest and greatest of javascript, no worries
48+
include custom babel presets by installing packages
49+
and adding them to **.babelrc** in root directory of the app
50+
* **Note**: This will completly override existing presets.
51+
You will need to create the .babelrc file inside your app folder
52+
and remember to add **react-hmre** preset to babel development.
53+
This script relies on react-hmre for hot module replacement.
54+
55+
### ESLint
56+
* **Custom eslint config**
57+
* Not happy with the default linting rules,
58+
simply include custom eslint by installing packages
59+
and adding them to **.eslintrc** in root directory of the app
60+
* **Note**: This will completly override existing linting rules.
61+
You will need to create the .eslintrc file inside your app folder.
62+
63+
### Preact
64+
* **Using preact instead of react**
65+
* [Preact](https://github.com/developit/preact) is a fast, 3kB alternative to React, with the same ES2015 API,
66+
* In your package.json add usePreact to react-super-scripts and set it to true.
67+
Your package.json should look like
68+
```js
69+
{
70+
...
71+
72+
"react_super_scripts": {
73+
"usePreact": true
74+
}
75+
}
76+
```
77+
78+
Then uninstall ```react``` and ```react-dom``` and install ```preact``` and ```preact-compat```
79+
80+
```npm uninstall react react-dom && npm install --save preact preact-compat```
81+
* You can keep using you existing react code without any changes, under the hood
82+
webpack will alias react and react-dom to use preact.
83+
* **Note**: This package uses ```preact-compat``` for maintaining compatibility with react.
84+
This doesn't guarantee complete compatibility, test all features fully first.
85+
86+
### Others
87+
88+
* **Custom entry point**
89+
* You can specify app entry point for webpack.
90+
* In your package.json specify the file path to appEntry property
91+
of react_super_scripts field.
92+
Your package.json should look like
93+
```js
94+
{
95+
...
96+
97+
"react_super_scripts": {
98+
"appEntry": "src/index.js"
99+
}
100+
}
101+
```
102+
a default entry point (src/index.js) is already provided in package.json.
103+
* **Note**: if you don't provide appEntry in your package.json it will default to scr/index.js
2104

3105
This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
4106
Please refer to its documentation:

‎packages/react-scripts/template/README.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,96 @@
1+
<a href='https://github.com/shrynx/react-super-scripts'><p align='center'><img src='https://raw.githubusercontent.com/shrynx/react-super-scripts/develop/packages/react-scripts/template/src/logo.png' height='100' ></p></a>
2+
3+
# ⚡ react <sup>-super-scripts</sup> ⚡
4+
5+
## Features
6+
Apart from features provided by [CRA](https://github.com/facebookincubator/create-react-app#whats-inside), this package adds more goodies listed below.
7+
8+
### Webpack
9+
* **Webpack Dasboard**
10+
* you got to love webpack dashboard
11+
* Webpack dashboard is turned on by default,but it is configurable
12+
* you can disable it able it setting dashboard as false in react_super_script in package.json
13+
```js
14+
{
15+
...
16+
17+
"react_super_scripts": {
18+
"dashboard": true
19+
}
20+
}
21+
```
22+
* **Hot module replacement**
23+
* supports HMR for js files too.
24+
* **Supports SASS and LESS**
25+
* write styles in css, sass or less
26+
* **Webpack image loader**
27+
* for compressing images
28+
* **Vendor splitting**
29+
* you can split out vendor files from app logic, simply by creating a `vendor.js` file in `src` folder,
30+
and import all your vendor dependencies in that file.
31+
* **Build Progress Bar**
32+
* During build process a progress bar is shown.
33+
34+
### Babel
35+
* **Custom babel config**
36+
* Want to use latest and greatest of javascript, no worries
37+
include custom babel presets by installing packages
38+
and adding them to **.babelrc** in root directory of the app
39+
* **Note**: This will completly override existing presets.
40+
You will need to create the .babelrc file inside your app folder
41+
and remember to add **react-hmre** preset to babel development.
42+
This script relies on react-hmre for hot module replacement.
43+
44+
### ESLint
45+
* **Custom eslint config**
46+
* Not happy with the default linting rules,
47+
simply include custom eslint by installing packages
48+
and adding them to **.eslintrc** in root directory of the app
49+
* **Note**: This will completly override existing linting rules.
50+
You will need to create the .eslintrc file inside your app folder.
51+
52+
### Preact
53+
* **Using preact instead of react**
54+
* [Preact](https://github.com/developit/preact) is a fast, 3kB alternative to React, with the same ES2015 API,
55+
* In your package.json add usePreact to react-super-scripts and set it to true.
56+
Your package.json should look like
57+
```js
58+
{
59+
...
60+
61+
"react_super_scripts": {
62+
"usePreact": true
63+
}
64+
}
65+
```
66+
67+
Then uninstall ```react``` and ```react-dom``` and install ```preact``` and ```preact-compat```
68+
69+
```npm uninstall react react-dom && npm install --save preact preact-compat```
70+
* You can keep using you existing react code without any changes, under the hood
71+
webpack will alias react and react-dom to use preact.
72+
* **Note**: This package uses ```preact-compat``` for maintaining compatibility with react.
73+
This doesn't guarantee complete compatibility, test all features fully first.
74+
75+
### Others
76+
77+
* **Custom entry point**
78+
* You can specify app entry point for webpack.
79+
* In your package.json specify the file path to appEntry property
80+
of react_super_scripts field.
81+
Your package.json should look like
82+
```js
83+
{
84+
...
85+
86+
"react_super_scripts": {
87+
"appEntry": "src/index.js"
88+
}
89+
}
90+
```
91+
a default entry point (src/index.js) is already provided in package.json.
92+
* **Note**: if you don't provide appEntry in your package.json it will default to scr/index.js
93+
194
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
295

396
Below you will find some information on how to perform common tasks.<br>

0 commit comments

Comments
 (0)