Skip to content

Commit 33b662d

Browse files
kay-iskay-is
committed
Update React version
1 parent 53ec12a commit 33b662d

19 files changed

+480
-509
lines changed

‎00-object-elements.html

Lines changed: 62 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,68 @@
11
<!doctype html>
22

3-
<title>0 Object Elements - React From Zero</title>
3+
<title>00 Object Elements - React From Zero</title>
44

5-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
5+
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
6+
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
77

8-
<div id='app'><!--The render target of our React application--></div>
8+
<div id="app">
9+
<!--The render target of our React application-->
10+
</div>
911

1012
<script>
11-
12-
// React uses ES2015 Symbols to "tag" its element-objects.
13-
// It uses a magic number as fallback on older browsers.
14-
var magicValue = (Symbol && Symbol.for('react.element')) || 0xeac7
15-
16-
// React uses virtual DOM elements, which become real DOM elements on a render.
17-
// A virtual DOM element can be defined as a simple object literal.
18-
// Normally you would use the React.createElement() to create an element.
19-
// This is what the return value of a React.createElement() call could look like.
20-
var reactElement = {
21-
22-
// This special property will be checked by React to ensure this object
23-
// is an React element and not just some user data
24-
// React.createElement() sets it for your
25-
$$typeof: magicValue,
26-
27-
// This defines the HTML-tag
28-
type: 'h1',
29-
30-
// This defines the properties that get passed down into the element
31-
props: {
32-
33-
// In this example there is just a single text node as child
34-
children: 'Hello, world!',
35-
36-
// a CSS class
37-
className: 'abc',
38-
39-
// styles can be passed as object literals
40-
// React uses camelCase instead of dashed-case (like CSS/D3 do)
41-
style: {
42-
textAlign: 'center',
43-
},
44-
45-
// event handlers can be added as properties, too
46-
// React uses synthetic events, which basically try to normalize browser behaviour
47-
onClick: function(notYourRegularEvent) { alert('click') },
48-
},
49-
50-
}
51-
52-
// another element that doesn't have much configuration
53-
var anotherElement = {
54-
$$typeof: magicValue,
55-
type: 'p',
56-
props: {
57-
children: 'A nice text paragraph.',
58-
},
59-
}
60-
61-
// React needs a DOM element as render target
62-
var renderTarget = document.getElementById('app')
63-
64-
// ReactDOM is responsible for inserting the element into the DOM
65-
ReactDOM.render(reactElement, renderTarget)
66-
67-
</script>
13+
// React uses ES2015 Symbols to "tag" its element-objects.
14+
// It uses a magic number as fallback on older browsers.
15+
var magicValue = (Symbol && Symbol.for('react.element')) || 0xeac7
16+
17+
// React uses virtual DOM elements, which become real DOM elements on a render.
18+
// A virtual DOM element can be defined as a simple object literal.
19+
// Normally you would use the React.createElement() to create an element.
20+
// This is what the return value of a React.createElement() call could look like.
21+
var reactElement = {
22+
23+
// This special property will be checked by React to ensure this object
24+
// is an React element and not just some user data
25+
// React.createElement() sets it for your
26+
$$typeof: magicValue,
27+
28+
// This defines the HTML-tag
29+
type: 'h1',
30+
31+
// This defines the properties that get passed down into the element
32+
props: {
33+
34+
// In this example there is just a single text node as child
35+
children: 'Hello, world!',
36+
37+
// a CSS class
38+
className: 'abc',
39+
40+
// styles can be passed as object literals
41+
// React uses camelCase instead of dashed-case (like CSS/D3 do)
42+
style: {
43+
textAlign: 'center',
44+
},
45+
46+
// event handlers can be added as properties, too
47+
// React uses synthetic events, which basically try to normalize browser behaviour
48+
onClick: function (notYourRegularEvent) { alert('click') },
49+
},
50+
51+
}
52+
53+
// another element that doesn't have much configuration
54+
var anotherElement = {
55+
$$typeof: magicValue,
56+
type: 'p',
57+
props: {
58+
children: 'A nice text paragraph.',
59+
},
60+
}
61+
62+
// React needs a DOM element as render target
63+
var renderTarget = document.getElementById('app')
64+
65+
// ReactDOM is responsible for inserting the element into the DOM
66+
ReactDOM.render(reactElement, renderTarget)
67+
68+
</script>

‎01-element-factory.html

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
<!doctype html>
22

3-
<title>1 Element Factory - React From Zero</title>
3+
<title>01 Element Factory - React From Zero</title>
44

5-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
5+
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
6+
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
77

88
<div id='app'></div>
99

1010
<script>
11+
// React.createElement() needs type, properties, children.
12+
// This is less verbose than using plain object literals,
13+
// it hides the $$type/Symbol stuff mentioned in 0
14+
var reactElement = React.createElement('h1', {
1115

12-
// React.createElement() needs type, properties, children.
13-
// This is less verbose than using plain object literals,
14-
// it hides the $$type/Symbol stuff mentioned in 0
15-
var reactElement = React.createElement('h1', {
16+
className: 'abc',
1617

17-
className:'abc',
18+
style: {
19+
textAlign: 'center',
20+
},
1821

19-
style: {
20-
textAlign: 'center',
21-
},
22+
onClick: function () { alert('click') },
2223

23-
onClick: function() { alert('click') },
24+
}, 'Hello, world!')
2425

25-
}, 'Hello, world!')
2626

27+
// the second argument is the property object and has to be null if empty
28+
var anotherElement = React.createElement('p', null, 'A nice text paragraph.')
2729

28-
// the second argument is the property object and has to be null if empty
29-
var anotherElement = React.createElement('p', null, 'A nice text paragraph.')
30+
var renderTarget = document.getElementById('app')
3031

31-
var renderTarget = document.getElementById('app')
32+
ReactDOM.render(reactElement, renderTarget)
3233

33-
ReactDOM.render(reactElement, renderTarget)
34-
35-
</script>
34+
</script>

‎02-jsx.html

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!doctype html>
22

3-
<title>2 JSX - React From Zero</title>
3+
<title>02 JSX - React From Zero</title>
44

5-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
5+
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
6+
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
77

8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js">
8+
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js">
99
// Now we will use JSX, which needs to be converted to JavaScript.
1010
// For this we will use Babel. Babel is normally used to convert ES2015 to ES5, but
1111
// it also can convert JSX to ES5. Babels browser version uses text/babel script tags.
@@ -18,11 +18,24 @@
1818
// JSX is the idiomatic way of creating elements.
1919
// It's basically XHTML with {} for dynamic content
2020
// also class has to be called className
21-
var reactElement = <h1 className='abc' style={{textAlign:'center'}} onClick={function() { alert('click') }}>Hello, world!</h1>
22-
// Is the same as
23-
reactElement = React.createElement('h1', {className: 'abc', style: {textAlign: 'center'}, onClick: function() { alert('click') }}, 'Hello, world!')
21+
var reactElement =
22+
<h1
23+
className='abc'
24+
style={{textAlign: 'center'}}
25+
onClick={function() { alert('click') }}>
26+
Hello, world!
27+
</h1>
2428

25-
// JSX shines especially with simple elements that make up the majority in an app
29+
// Is the same as
30+
reactElement =
31+
React.createElement(
32+
'h1',
33+
{className: 'abc', style: {textAlign: 'center'},
34+
onClick: function() { alert('click') }},
35+
'Hello, world!'
36+
)
37+
38+
// JSX shines especially with simple elements that make up the majority
2639
var anotherElement = <p>A nice text paragraph.</p>
2740
// Is the same as
2841
anotherElement = React.createElement('p', null, 'A nice text paragraph.')
@@ -32,4 +45,4 @@
3245

3346
ReactDOM.render(reactElement, renderTarget)
3447

35-
</script>
48+
</script>

‎03-nested-elements.html

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,57 @@
22

33
<title>3 Nested Elements - React From Zero</title>
44

5-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
5+
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
6+
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
7+
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
88

9-
<div id='app'></div>
9+
<div id="app"></div>
1010

1111
<script type="text/babel">
1212

1313
// Elements can be nested, which will result in nested React.createElement calls
1414
// As you can imagine, writing withs without JSX would be pretty tedious
15-
var reactElement = <div className='abc'>
16-
<h1>Hello</h1>
17-
<h2>world</h2>
18-
</div>
15+
var reactElement =
16+
<div className='abc'>
17+
<h1>Hello</h1>
18+
<h2>world</h2>
19+
</div>
1920

2021
// they can also, like mentioned in lesson 2, contain JavaScript in {}
2122
var myClass = 'abc'
2223

23-
function myText() {
24-
return 'world'
25-
}
24+
function myText() { return 'world' }
2625

2726
// JavaScript insertion has the same syntax in attributes as in normal text or elements
28-
reactElement = <div className={myClass}>
29-
<h1>Hello {10 * 10}</h1>
30-
<h2>{myText()}</h2>
31-
</div>
27+
reactElement =
28+
<div className={myClass}>
29+
<h1>Hello {10 * 10}</h1>
30+
<h2>{myText()}</h2>
31+
</div>
3232

3333
// this JavaScript can contain elements too
3434
var nestedElement = <h2>world</h2>
3535

36-
reactElement = <div>
37-
<h1>Hello</h1>
38-
{nestedElement}
39-
</div>
36+
reactElement =
37+
<div>
38+
<h1>Hello</h1>
39+
{nestedElement}
40+
</div>
4041

4142
// it is also possible to "spread" an object as properties
4243
var properties = {
43-
myClass: 'abc',
44-
onClick: function() { alert('click') },
44+
className: 'abc',
45+
onClick: function() { alert('click') },
4546
}
4647

47-
reactElement = <div {...properties}>
48-
<h1>Hello</h1>
49-
<h2>world</h2>
50-
</div>
48+
reactElement =
49+
<div {...properties}>
50+
<h1>Hello</h1>
51+
<h2>world</h2>
52+
</div>
5153

5254
var renderTarget = document.getElementById('app')
5355

5456
ReactDOM.render(reactElement, renderTarget)
5557

56-
</script>
58+
</script>

‎04-components.html

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!doctype html>
22

3-
<title>4 Components - React From Zero</title>
3+
<title>04 Components - React From Zero</title>
44

5-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
5+
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
6+
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
7+
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
88

9-
<div id='app'></div>
9+
<div id="app"></div>
1010

1111
<script type="text/babel">
1212

@@ -16,20 +16,23 @@
1616

1717
// Here we use stand alone elements and some data
1818
var data = 'world'
19-
var reactElement = <div>
20-
<h1>Hello</h1>
21-
<h2>{data}</h2>
22-
</div>
19+
var reactElement =
20+
<div>
21+
<h1>Hello</h1>
22+
<h2>{data}</h2>
23+
</div>
2324

2425
// Here the elements are encapsuled in a simple component function
2526
// They have to start with a capital letter and
2627
// return exactly ONE root element with or without nested elements
2728
function MyComponent() {
28-
var data = 'world'
29-
return <div>
30-
<h1>Hello</h1>
31-
<h2>{data}</h2>
32-
</div>
29+
var data = 'world'
30+
return (
31+
<div>
32+
<h1>Hello</h1>
33+
<h2>{data}</h2>
34+
</div>
35+
)
3336
}
3437

3538
// a component function can be used like an element
@@ -48,4 +51,4 @@ <h2>{data}</h2>
4851

4952
ReactDOM.render(reactElement, renderTarget)
5053

51-
</script>
54+
</script>

0 commit comments

Comments
 (0)