Компоненты позволяют повторно использовать их в разных участках кода.
3 способа создания компонента.
1
|
1 2 3 |
function Hello() { return <h1>Привет, Stan</h1>; } |
2
|
1 2 3 4 5 |
class Hello extends React.Component { render() { return <h1>Привет, Stan</h1>; } } |
3
|
1 2 3 |
var Hello =() => { return (<h1>Привет, Stan</h1>); } |
Применения компонента
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="header"></div> <div id="container"></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"> class Hello extends React.Component { render() { return <h1>Привет, Stan</h1>; } } ReactDOM.render( <Hello />, document.getElementById("header") ) </script> </body> </html> |
