mirror of
https://github.com/kay-is/react-from-zero.git
synced 2026-04-24 03:00:06 -04:00
79 lines
2.2 KiB
HTML
79 lines
2.2 KiB
HTML
<!doctype html>
|
|
|
|
<title>04 Components - React From Zero</title>
|
|
|
|
<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
|
|
<div id="app"></div>
|
|
|
|
<script type="text/babel">
|
|
// The main selling point of React is its component system
|
|
// components are used to encapsulate elements and their behaviour
|
|
// see them as a mix of controller and view of MVC
|
|
|
|
// Here we use stand alone elements and some data
|
|
var data = "world"
|
|
var reactElement =
|
|
<div>
|
|
<h1>Hello</h1>
|
|
<h2>{data}</h2>
|
|
</div>
|
|
|
|
// Here the elements are encapsuled in a simple component function
|
|
// They have to start with a capital letter and
|
|
// return exactly ONE root element with or without nested elements (before React 16)
|
|
function MyComponent() {
|
|
var data = "world"
|
|
return (
|
|
<div>
|
|
<h1>Hello</h1>
|
|
<h2>{data}</h2>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Since React 16.0.0, components can return an array of elements as well
|
|
// In doing so, no additional wrapper element is created
|
|
// One caveat is that, similarly to what we do when rendering an array,
|
|
// we have to add a unique key to each element in the array
|
|
// (we'll see more on this in the next lesson)
|
|
function MyComponent() {
|
|
var data = "world"
|
|
return [
|
|
<h1 key="hello">Hello</h1>
|
|
<h2 key="data">{data}</h2>
|
|
]
|
|
}
|
|
|
|
// Since React 16.2.0, we can use special "wrapper" components called fragments
|
|
// that behave the same (no extra wrapper element created)
|
|
// but remove the need to explitly set keys (fragments do this under the hood)
|
|
function MyComponent() {
|
|
var data = "world"
|
|
return (
|
|
<Fragment>
|
|
<h1>Hello</h1>
|
|
<h2>{data}</h2>
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
// a component function can be used like an element
|
|
reactElement = <MyComponent/>
|
|
|
|
// this translates to a React.createElement() call
|
|
// the null indicates that no properties have been set
|
|
reactElement = React.createElement(MyComponent, null)
|
|
|
|
// for reference a react-internal <div> tag
|
|
var anotherElement = <div/>
|
|
// gets converted to
|
|
anotherElement = React.createElement("div", null)
|
|
|
|
var renderTarget = document.getElementById("app")
|
|
|
|
ReactDOM.render(reactElement, renderTarget)
|
|
</script>
|