Простейшее приложение
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"> </div> <div id="app2"> </div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> // рендеринг элемента ReactDOM.render( <h1>Hello React</h1>, // элемент, который мы хотим создать document.getElementById("app") // где мы этот элемент хотим создать ) ReactDOM.render( <h1>JS Code in brackets 2+2 = {2+2}</h1>, // элемент, который мы хотим создать document.getElementById("app2") // где мы этот элемент хотим создать ) </script> </body> </html> |
Результат
Работа со сложными объектами
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"> </div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> const user = { id : 5, age: 33, firstName: 'Tom', lastName: 'Smit', getFullName: function(){ return `${this.firstName} ${this.lastName}`; } }; ReactDOM.render( <div id={user.id}> <p>FullName: {user.getFullName()}</p> <p>Age: {user.age}</p> <p>Time: {new Date().toLocaleTimeString()}</p> </div>, document.getElementById("app") ) </script> </body> </html> |
Результат
Особенности применения стиля
className вместо class
style принимает json
camelCase, например fontFanmily вместо font-family
|
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 41 42 43 44 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> <style> .user-info{ padding: 8px; border: 1px #ccc solid; } </style> </head> <body> <div id="app"> </div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> const user = { id : 5, age: 33, firstName: 'Tom', lastName: 'Smit', getFullName: function(){ return `${this.firstName} ${this.lastName}`; } }; const userClassName = "user-info"; const styleObj = { color:'red', fontFamily:'Verdana' }; ReactDOM.render( <div className={userClassName} style={styleObj}> <p>FullName: {user.getFullName()}</p> <p>Age: {user.age}</p> </div>, document.getElementById("app") ) </script> </body> </html> |
Результат
Также, можно было бы определить параметры не ссылкой на объект, а в строку.
|
1 |
<div className={userClassName} style={{color:'red', fontFamily:'Verdana'}}> |