Skip to content

Commit 58a2865

Browse files
committed
docs(README): misc fixes, fix links
1 parent d5f03ba commit 58a2865

File tree

1 file changed

+32
-10
lines changed

1 file changed

+32
-10
lines changed

README.md

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,62 @@
1-
Example project demonstrating the use of [React Flag Icon Css](https://github.com/matteocng/react-flag-icon-css-example-multi/tree/webpack-1) with [React Css Modules](//github.com/gajus/react-css-modules) or standard Css, and custom flags. Powered by [Webpack 2](https://github.com/webpack/webpack) (there is also a [Webpack 1 version](https://github.com/webpack/webpack)).
1+
Example project demonstrating the use of [React Flag Icon Css](https://github.com/matteocng/react-flag-icon-css) with [React Css Modules](//github.com/gajus/react-css-modules) or standard Css, and custom flags.
22

3-
## Installation
3+
Powered by [webpack 2](https://github.com/webpack/webpack) (there is also a [webpack 1 version](https://github.com/matteocng/react-flag-icon-css-example-multi/tree/webpack-1)).
44

5-
It is recommended to use [Yarn](https://yarnpkg.com/) instead of npm for managing packages.
5+
## Installation
66

77
Clone the repository:
88

99
```bash
10-
$ git clone https://github.com/matteocng/react-flag-icon-css-example-multi.git && cd react-flag-icon-css-example-multi
11-
10+
$ git clone https://github.com/matteocng/react-flag-icon-css-example-multi.git
11+
$ cd react-flag-icon-css-example-multi
1212
```
1313

14-
Install the required modules:
14+
Install the required modules with [Yarn](https://yarnpkg.com/):
1515

1616
```bash
1717
$ yarn
1818
```
1919

20-
Run the [Webpack development server](//github.com/webpack/webpack-dev-server) and apply the configuration for [React Css Modules](//github.com/gajus/react-css-modules):
20+
or with npm:
21+
22+
```bash
23+
$ npm install
24+
```
25+
26+
#### Option A) React Css Modules
27+
28+
Run the [webpack development server](//github.com/webpack/webpack-dev-server) and apply the configuration for [React Css Modules](//github.com/gajus/react-css-modules):
2129

2230
```bash
2331
$ yarn start
2432
```
2533

26-
... or use standard Css:
34+
or with npm:
35+
36+
```bash
37+
$ npm run start
38+
```
39+
40+
#### Option B) Standard, global Css
41+
42+
Run the [webpack development server](//github.com/webpack/webpack-dev-server) and apply the configuration for standard Css:
2743

2844

2945
```bash
3046
$ yarn start:classes
3147
```
3248

49+
or with npm:
50+
51+
```bash
52+
$ npm run start:classes
53+
```
54+
3355
Open a browser and go here: [http://localhost:8080](http://localhost:8080).
3456

3557
## Notes
3658

37-
This example project uses the <code>USE_CSS_MODULES</code> environment variable (set by the <code>package.json</code> scripts) to allow for an easy "switch" between a configuration with or without [React Css Modules](//github.com/gajus/react-css-modules). This results in more complex code than need be.
59+
This example app uses the <code>USE_CSS_MODULES</code> environment variable (set by <code>[package.json](package.json)</code> scripts) to allow for an easy "switch" between a configuration with or without [React Css Modules](//github.com/gajus/react-css-modules) (see: [webpack.config.js](webpack/webpack.config.js)). This results in more complex code than need be.
3860

3961
In a real project you would probably choose to either go with [React Css Modules](//github.com/gajus/react-css-modules) or standard Css, removing the <code>USE_CSS_MODULES</code> switch and <code>getStylePropName</code>, replacing <code>[options.stylePropName]</code> in the React components with either <code>className</code> (standard Css) or <code>styleName</code> (modules).
4062

@@ -45,7 +67,7 @@ This example app uses `sass` (`.scss`) styles, but `sass` is not required to use
4567
- remove *`sass-loader`* from [webpack.config.js](webpack/webpack.config.js).
4668
- `npm install` or `yarn add` the `PostCSS` plugins that you need.
4769
- `import()` them into [webpack.config.js](webpack/webpack.config.js)
48-
- add them to the `postcss` section after `autoprefixer`.
70+
- add them to the `postcss-loader` section after `autoprefixer`.
4971

5072
## Contributing
5173

0 commit comments

Comments
 (0)