mirror of
https://github.com/kay-is/react-from-zero.git
synced 2026-04-24 03:00:06 -04:00
46 lines
1.2 KiB
HTML
46 lines
1.2 KiB
HTML
<!doctype html>
|
|
|
|
<title>5 Properties - React From Zero</title>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
|
|
|
<div id='app'></div>
|
|
|
|
<script type="text/babel">
|
|
|
|
// Components, like elements, can use properties, too
|
|
function MyComponent(props) {
|
|
return <div className={props.className}>
|
|
<h1>Hello</h1>
|
|
<h2>{props.customData}</h2>
|
|
</div>
|
|
}
|
|
|
|
var reactElement = <MyComponent className='abc' customData='world'/>
|
|
|
|
// Which also works with an object and the spread (...) operator
|
|
var props = {
|
|
className: 'abc',
|
|
customData: 'world',
|
|
}
|
|
|
|
reactElement = <MyComponent {...props}/>
|
|
|
|
// This allows components with dynamic content
|
|
var planets = ['earth', 'mars', 'venus']
|
|
|
|
// If an array is used as "child node" each child needs a unique key-property
|
|
var elements = planets.map(function(planet, index) {
|
|
return <MyComponent className='myClass' customData={planet} key={index}/>
|
|
})
|
|
|
|
reactElement = <div>{elements}</div>
|
|
|
|
var renderTarget = document.getElementById('app')
|
|
|
|
ReactDOM.render(reactElement, renderTarget)
|
|
|
|
</script>
|