-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
40 lines (33 loc) · 992 Bytes
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import { useUserActive } from './Hook';
import HigherOrderComponentUser from './HigherOrderComponentUser';
import RenderPropComponent from './RenderPropComponent';
import RenderPropUser from './RenderPropUser';
import './style.css';
function App() {
const isActive = useUserActive(1);
return (
<div>
<h3>Three ways to share logic in react</h3>
<div className="method">
1) Hooks:
<div>
is user active: {isActive ? 'true' : 'false'}
</div>
</div>
<div className="method">
2) Higher Order Components:
<HigherOrderComponentUser />
</div>
<div className="method">
3) Render Props:
<RenderPropComponent render={isActive => (
<RenderPropUser isActive={isActive} />
)}/>
</div>
</div>
);
}
render(<App />, document.getElementById('root'));