[IT북마크] React

 

React

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React

웹 및 네이티브 사용자 인터페이스를 위한 라이브러리

https://ko.react.dev/

React

 

https://www.jeasyui.com/download/rc.php

Download EasyUI for React - React EasyUI

 

@

Installation

1. Create React App.

1. npm install -g create-react-app
2. create-react-app my-app
3. cd my-app

It will create a new directory named 'my-app' in current directory.

2. Install the EasyUI for React.

1. npm install rc-easyui --save

3. Import theme files.

Import the theme files in the index.css file.

1. @import '~rc-easyui/dist/themes/default/easyui.css';
2. @import '~rc-easyui/dist/themes/icon.css';
3. @import '~rc-easyui/dist/themes/react.css';

4. Import the components in the 'App.js'.

 

1. import React from 'react';
2. import { DataGrid, GridColumn } from 'rc-easyui';
3.  
4. class App extends React.Component {
5. constructor(props) {
6. super(props);
7. this.state = {
8. data: this.getData()
9. }
10. }
11. getData() {
12. return [
13. {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
14. {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
15. {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
16. {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
17. {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
18. {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
19. {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
20. {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
21. {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
22. {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
23. ]
24. }
25. render() {
26. return (
27. <div>
28. <DataGrid data={this.state.data} style={{height:250}}>
29. <GridColumn field="itemid" title="Item ID"></GridColumn>
30. <GridColumn field="name" title="Name"></GridColumn>
31. <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
32. <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
33. <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
34. <GridColumn field="status" title="Status" align="center"></GridColumn>
35. </DataGrid>
36. </div>
37. );
38. }
39. }
40.  
41. export default App;

5. Run the application.

1. npm run start

This runs the application in development mode.

@

 

 

https://www.w3schools.com/react/react_jsx.asp

W3Schools.com

 

https://git-scm.com/

Git

 

 

https://code.visualstudio.com/

Visual Studio Code - The open source AI code editor

 

https://replit.com/~

Sign Up