@@ -18,8 +18,9 @@ React UI consists of the following building blocks:
18
18
19
19
To use React UI in your app:
20
20
21
- 1 . Install it with ` $ npm install --save @react-ui-org/react-ui ` .
22
- 2 . First import the ** theme layer** to the topmost level of your React app.
21
+ 1 . Install ` react ` and ` react-dom ` in your application with ` $ npm install --save react react-dom `
22
+ 2 . Install ` react-ui ` with ` $ npm install --save @react-ui-org/react-ui ` .
23
+ 3 . First import the ** theme layer** to the topmost level of your React app.
23
24
Either use the bundled theme as is:
24
25
``` js
25
26
// app.jsx
@@ -35,21 +36,21 @@ To use React UI in your app:
35
36
36
37
ℹ️ Technically it is possible to import the theme layer anywhere later in the app.
37
38
But it's a nice habit to declare variables before using them and that's what we are doing here.
38
- 3 . Add React UI ** foundation styles** , the ground-zero CSS for React UI components:
39
+ 4 . Add React UI ** foundation styles** , the ground-zero CSS for React UI components:
39
40
``` js
40
41
// app.jsx
41
42
import ' @react-ui-org/react-ui/src/lib/theme.scss' ;
42
43
import ' @react-ui-org/react-ui/src/lib/foundation.scss' ;
43
44
```
44
- 4 . Optionally add the ** helper and utility classes** bundles:
45
+ 5 . Optionally add the ** helper and utility classes** bundles:
45
46
``` js
46
47
// app.jsx
47
48
import ' @react-ui-org/react-ui/src/lib/theme.scss' ;
48
49
import ' @react-ui-org/react-ui/src/lib/foundation.scss' ;
49
50
import ' @react-ui-org/react-ui/src/lib/helpers.scss' ;
50
51
import ' @react-ui-org/react-ui/src/lib/utilities.scss' ;
51
52
```
52
- 5 . Finally, use React UI ** components** just like you are used to:
53
+ 6 . Finally, use React UI ** components** just like you are used to:
53
54
``` js
54
55
// MyDashboardScreen.jsx
55
56
import React from ' react' ;
@@ -117,3 +118,24 @@ To publish the new version:
117
118
3 . Create new tag: ` git tag -a vX.Y.Z -m "vX.Y.Z" `
118
119
4 . Push new tag: ` git push --tags `
119
120
5 . Publish new version on npm: ` npm publish --access public `
121
+
122
+ ### Package linking
123
+
124
+ The best option for development of React UI is to link ` react-ui ` into your application with ` npm link ` .
125
+
126
+ 1 . In React UI repository run ` npm link `
127
+ 2 . In your application run ` npm link @react-ui-org/react-ui `
128
+
129
+ To prevent [ Invalid Hook Call Warning] ( https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react )
130
+ when React UI is linked, add following code to Webpack configuration of your client:
131
+
132
+ ```
133
+ const path = require('path');
134
+
135
+ resolve: {
136
+ alias: {
137
+ react: path.resolve('./node_modules/react'),
138
+ 'react-dom': path.resolve('./node_modules/react-dom'),
139
+ },
140
+ }
141
+ ```
0 commit comments