Skip to content

Commit 24e73bb

Browse files
kay-iskay-is
committed
Improve formatting
1 parent e5d7231 commit 24e73bb

19 files changed

+622
-555
lines changed

‎.prettierrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
printWidth: 70

‎00-object-elements.html

+25-23
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,30 @@
1212
<script>
1313
// React uses ES2015 Symbols to "tag" its element-objects.
1414
// It uses a magic number as fallback on older browsers.
15-
var magicValue = (Symbol && Symbol.for("react.element")) || 0xeac7
15+
var magicValue = (Symbol && Symbol.for("react.element")) || 0xeac7;
1616

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.
17+
// React uses virtual DOM elements, which become real DOM elements
18+
// on a render. A virtual DOM element can be defined as a simple
19+
// object literal. Normally you would use the React.createElement()
20+
// to create an element. This is what the return value of a
21+
// React.createElement() call could look like.
2122
var reactElement = {
22-
23-
// This special property will be checked by React to ensure this object
23+
// This special property will be checked by React to ensure this
24+
// object
2425
// is a React element and not just some user data
2526
// React.createElement() sets it for you
2627
$$typeof: magicValue,
2728

28-
// This will also be checked by React. We will be talking about references
29-
// later, but if you're not using them, this has to be set to null and not
30-
// undefined
29+
// This will also be checked by React. We will be talking about
30+
// references later, but if you're not using them, this has to be
31+
// set to null and not undefined
3132
ref: null,
3233

3334
// This defines the HTML-tag
3435
type: "h1",
3536

36-
// This defines the properties that get passed down into the element
37+
// This defines the properties that get passed down to the element
3738
props: {
38-
3939
// In this example there is just a single text node as child
4040
children: "Hello, world!",
4141

@@ -45,29 +45,31 @@
4545
// styles can be passed as object literals
4646
// React uses camelCase instead of dashed-case (like CSS/D3 do)
4747
style: {
48-
textAlign: "center",
48+
textAlign: "center"
4949
},
5050

5151
// event handlers can be added as properties, too
52-
// React uses synthetic events, which basically try to normalize browser behaviour
53-
onClick: function (notYourRegularEvent) { alert("click") },
54-
},
55-
56-
}
52+
// React uses synthetic events to try to normalize browser
53+
// behavior
54+
onClick: function (notYourRegularEvent) {
55+
alert("click");
56+
}
57+
}
58+
};
5759

5860
// another element that doesn"t have much configuration
5961
var anotherElement = {
6062
$$typeof: magicValue,
6163
ref: null,
6264
type: "p",
6365
props: {
64-
children: "A nice text paragraph.",
65-
},
66-
}
66+
children: "A nice text paragraph."
67+
}
68+
};
6769

6870
// React needs a DOM element as render target
69-
var renderTarget = document.getElementById("app")
71+
var renderTarget = document.getElementById("app");
7072

7173
// ReactDOM is responsible for inserting the element into the DOM
72-
ReactDOM.render(reactElement, renderTarget)
74+
ReactDOM.render(reactElement, renderTarget);
7375
</script>

‎01-element-factory.html

+23-15
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,31 @@
1111
// React.createElement() needs type, properties, children.
1212
// This is less verbose than using plain object literals,
1313
// it hides the $$type/Symbol and ref mentioned in lesson 0
14-
var reactElement = React.createElement("h1", {
15-
16-
className: "abc",
17-
18-
style: {
19-
textAlign: "center",
14+
var reactElement = React.createElement(
15+
"h1",
16+
{
17+
className: "abc",
18+
19+
style: {
20+
textAlign: "center"
21+
},
22+
23+
onClick: function () {
24+
alert("click");
25+
}
2026
},
27+
"Hello, world!"
28+
);
2129

22-
onClick: function () { alert("click") },
23-
24-
}, "Hello, world!")
25-
26-
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.")
30+
// The second argument is the property object,
31+
// it has to be null if empty
32+
var anotherElement = React.createElement(
33+
"p",
34+
null,
35+
"A nice text paragraph."
36+
);
2937

30-
var renderTarget = document.getElementById("app")
38+
var renderTarget = document.getElementById("app");
3139

32-
ReactDOM.render(reactElement, renderTarget)
40+
ReactDOM.render(reactElement, renderTarget);
3341
</script>

‎02-jsx.html

+31-18
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77

88
<script src="https://unpkg.com/@babel/standalone/babel.min.js">
99
// Now we will use JSX, which needs to be converted to JavaScript.
10-
// For this we will use Babel. Babel is normally used to convert ES2015 to ES5, but
11-
// it also can convert JSX to ES5. Babels browser version uses text/babel script tags.
10+
// For this we will use Babel. Babel is normally used to convert
11+
// ES2015 to ES5, but it also can convert JSX to ES5. Babels browser
12+
// version uses text/babel script tags.
1213
</script>
1314

1415
<div id="app"></div>
@@ -17,30 +18,42 @@
1718
// JSX is the idiomatic way of creating elements.
1819
// It's basically XHTML with {} for dynamic content
1920
// also class has to be called className
20-
var reactElement =
21+
var reactElement = (
2122
<h1
2223
className="abc"
23-
style={{textAlign: "center"}}
24-
onClick={function() { alert("click") }}>
24+
style={{ textAlign: "center" }}
25+
onClick={function() {
26+
alert("click");
27+
}}
28+
>
2529
Hello, world!
2630
</h1>
31+
);
2732

2833
// Is the same as
29-
reactElement =
30-
React.createElement(
31-
"h1",
32-
{className: "abc", style: {textAlign: "center"},
33-
onClick: function() { alert("click") }},
34-
"Hello, world!"
35-
)
36-
37-
// JSX shines especially with simple elements that make up the majority
38-
var anotherElement = <p>A nice text paragraph.</p>
34+
reactElement = React.createElement(
35+
"h1",
36+
{
37+
className: "abc",
38+
style: { textAlign: "center" },
39+
onClick: function() {
40+
alert("click");
41+
}
42+
},
43+
"Hello, world!"
44+
);
45+
46+
// JSX shines with simple elements that make up the majority
47+
var anotherElement = <p>A nice text paragraph.</p>;
3948
// Is the same as
40-
anotherElement = React.createElement("p", null, "A nice text paragraph.")
49+
anotherElement = React.createElement(
50+
"p",
51+
null,
52+
"A nice text paragraph."
53+
);
4154

4255
// As we can see, everything else works as before
43-
var renderTarget = document.getElementById("app")
56+
var renderTarget = document.getElementById("app");
4457

45-
ReactDOM.render(reactElement, renderTarget)
58+
ReactDOM.render(reactElement, renderTarget);
4659
</script>

‎03-nested-elements.html

+24-15
Original file line numberDiff line numberDiff line change
@@ -9,48 +9,57 @@
99
<div id="app"></div>
1010

1111
<script type="text/babel">
12-
// Elements can be nested, which will result in nested React.createElement calls
13-
// As you can imagine, writing this without JSX would be pretty tedious
14-
var reactElement =
12+
// Elements can be nested, this results in nested React.createElement
13+
// calls. Writing this without JSX would be pretty tedious
14+
var reactElement = (
1515
<div className="abc">
1616
<h1>Hello</h1>
1717
<h2>world</h2>
1818
</div>
19+
);
1920

2021
// they can also, like mentioned in lesson 2, contain JavaScript in {}
21-
var myClass = "abc"
22+
var myClass = "abc";
2223

23-
function myText() { return "world" }
24+
function myText() {
25+
return "world";
26+
}
2427

25-
// JavaScript insertion has the same syntax in attributes as in normal text or elements
26-
reactElement =
28+
// JavaScript insertion has the same syntax in attributes as in normal
29+
// text or elements
30+
reactElement = (
2731
<div className={myClass}>
2832
<h1>Hello {10 * 10}</h1>
2933
<h2>{myText()}</h2>
3034
</div>
35+
);
3136

3237
// this JavaScript can contain elements too
33-
var nestedElement = <h2>world</h2>
38+
var nestedElement = <h2>world</h2>;
3439

35-
reactElement =
40+
reactElement = (
3641
<div>
3742
<h1>Hello</h1>
3843
{nestedElement}
3944
</div>
45+
);
4046

4147
// it is also possible to "spread" an object as properties
4248
var properties = {
4349
className: "abc",
44-
onClick: function() { alert("click") },
45-
}
50+
onClick: function() {
51+
alert("click");
52+
}
53+
};
4654

47-
reactElement =
55+
reactElement = (
4856
<div {...properties}>
4957
<h1>Hello</h1>
5058
<h2>world</h2>
5159
</div>
60+
);
5261

53-
var renderTarget = document.getElementById("app")
62+
var renderTarget = document.getElementById("app");
5463

55-
ReactDOM.render(reactElement, renderTarget)
56-
</script>
64+
ReactDOM.render(reactElement, renderTarget);
65+
</script>

‎04-components.html

+27-28
Original file line numberDiff line numberDiff line change
@@ -14,65 +14,64 @@
1414
// see them as a mix of controller and view of MVC
1515

1616
// Here we use stand alone elements and some data
17-
var data = "world"
18-
var reactElement =
17+
var data = "world";
18+
var reactElement = (
1919
<div>
2020
<h1>Hello</h1>
2121
<h2>{data}</h2>
2222
</div>
23+
);
2324

2425
// Here the elements are encapsuled in a simple component function
25-
// They have to start with a capital letter and
26-
// return exactly ONE root element with or without nested elements (before React 16)
26+
// They have to start with a capital letter and return exactly ONE
27+
// root element with or without nested elements (before React 16)
2728
function MyComponent() {
28-
var data = "world"
29+
var data = "world";
2930
return (
3031
<div>
3132
<h1>Hello</h1>
3233
<h2>{data}</h2>
3334
</div>
34-
)
35+
);
3536
}
3637

37-
// Since React 16.0.0, components can return an array of elements as well
38-
// In doing so, no additional wrapper element is created
39-
// One caveat is that, similarly to what we do when rendering an array,
40-
// we have to add a unique key to each element in the array, also don't forget the commas
41-
// (we'll see more on this in the next lesson)
38+
// Since React 16.0.0, components can return an array of elements as
39+
// well. In doing so, no additional wrapper element is created. One
40+
// caveat is that, similarly to what we do when rendering an array, we
41+
// have to add a unique key to each element in the array, also don't
42+
// forget the commas (we'll see more on this in the next lesson)
4243
function MyComponent() {
43-
var data = "world"
44-
return [
45-
<h1 key="hello">Hello</h1>,
46-
<h2 key="data">{data}</h2>
47-
]
44+
var data = "world";
45+
return [<h1 key="hello">Hello</h1>, <h2 key="data">{data}</h2>];
4846
}
4947

50-
// Since React 16.2.0, we can use special "wrapper" components called fragments
51-
// that behave the same (no extra wrapper element created)
52-
// but remove the need to explicitly set keys (fragments do this under the hood) and commas
48+
// Since React 16.2.0, we can use special "wrapper" components called
49+
// fragments that behave the same (no extra wrapper element created)
50+
// but remove the need to explicitly set keys (fragments do this under
51+
// the hood) and commas.
5352
function MyComponent() {
54-
var data = "world"
53+
var data = "world";
5554
return (
5655
<React.Fragment>
5756
<h1>Hello</h1>
5857
<h2>{data}</h2>
5958
</React.Fragment>
60-
)
59+
);
6160
}
6261

6362
// a component function can be used like an element
64-
reactElement = <MyComponent/>
63+
reactElement = <MyComponent />;
6564

6665
// this translates to a React.createElement() call
6766
// the null indicates that no properties have been set
68-
reactElement = React.createElement(MyComponent, null)
67+
reactElement = React.createElement(MyComponent, null);
6968

7069
// for reference a react-internal <div> tag
71-
var anotherElement = <div/>
70+
var anotherElement = <div />;
7271
// gets converted to
73-
anotherElement = React.createElement("div", null)
72+
anotherElement = React.createElement("div", null);
7473

75-
var renderTarget = document.getElementById("app")
74+
var renderTarget = document.getElementById("app");
7675

77-
ReactDOM.render(reactElement, renderTarget)
78-
</script>
76+
ReactDOM.render(reactElement, renderTarget);
77+
</script>

0 commit comments

Comments
 (0)