You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: src/tutorial/01-HelloWorld.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -26,7 +26,7 @@ You should try this for yourself. Open the exercise file and edit the function t
26
26
27
27
<!--exercise-->
28
28
29
-
Notice that `React.createElement` is a simple javascript function which takes three arguments. First argument is the element you want to render. In our case it's a `div` element. Second argument is any properties we want to pass to that element. In our case we are not passing anything so it's null. Third argument is the children for this component. In this case it's the text we want to display - `Hello World`. So with this we are telling React to render a div element like this:
29
+
Notice that `React.createElement` is a simple JavaScript function which takes three arguments. First argument is the element you want to render. In our case it's a `div` element. Second argument is any properties we want to pass to that element. In our case we are not passing anything so it's null. Third argument is the children for this component. In this case it's the text we want to display - `Hello World`. So with this we are telling React to render a div element like this:
30
30
31
31
```html
32
32
<div>
@@ -36,11 +36,11 @@ Notice that `React.createElement` is a simple javascript function which takes th
36
36
37
37
Congratulations, you have created your first Hello World React component.
38
38
39
-
Now your inquisitive mind is probably asking - how in the world React renders this thing on the browser?
39
+
Now your inquisitive mind is probably asking - how in the world does React render this thing on the browser?
40
40
41
41
## Rendering
42
42
43
-
Let's step back from React for a moment and think about how we can create the similar Hello World `div` using pure Javascript. Yes pure Javascript - without any frameworks.
43
+
Let's step back from React for a moment and think about how we can create the similar Hello World `div` using pure JavaScript. Yes pure JavaScript - without any frameworks.
44
44
45
45
### Good Ol' Days
46
46
@@ -55,7 +55,7 @@ Let's imagine you have a barebone `html` file that looks like below. It has a `d
55
55
</html>
56
56
```
57
57
58
-
Now imagine inside the `div` with id `root` we want to render another `div` that says `Hello World`. The only catch is we want to do that programmatically using pure Javascript.
58
+
Now imagine inside the `div` with id `root` we want to render another `div` that says `Hello World`. The only catch is we want to do that programmatically using pure JavaScript.
59
59
To achieve this we can probably do something like this:
60
60
61
61
```js
@@ -73,7 +73,7 @@ Here we are creating a `div` node with `Hello World` text and appending that `di
73
73
We can actually write our entire application this way - creating elements, removing elements, appending elements, etc ourselves. As a matter of fact we did write applications this way before all these UI frameworks/libraries started to mushroom.
74
74
75
75
### Age of React
76
-
A simple example like the one above are not that hard to write with pure Javascript but once your application gets bigger, it gets messier. That's where libraries like React come to the rescue - they hide away from us the messier part of rendering on the browser.
76
+
A simple example like the one above are not that hard to write with pure JavaScript but once your application gets bigger, it gets messier. That's where libraries like React come to the rescue - they hide away from us the messier part of rendering on the browser.
77
77
78
78
The Core React library itself doesn't really know how to render anything on the browser because it is designed to work in a web browser as well as native applications. Thus the job of rendering your component on the browser is done by another library provided by React team called `ReactDOM`.
Here we are calling a function called `render` on `ReactDOM` object. The first argument of the function is the component you want to render - in our case `HelloWorld`. Second argument is a document selector. ReactDOM appends the component we want to display (first argument) as a child of the node returned by the selector (second argument).
87
87
88
-
Compare this solution to the pure Javascript solution we looked at earlier. With pure Javascript we were doing the DOM manipulation ourselves - creating the `div`, appending the text and appending the newly created `div` to the `div` with id `root` as its child. But with React we are not doing any DOM manipulation ourselves. Basically we are saying to React -
88
+
Compare this solution to the pure JavaScript solution we looked at earlier. With pure JavaScript we were doing the DOM manipulation ourselves - creating the `div`, appending the text and appending the newly created `div` to the `div` with id `root` as its child. But with React we are not doing any DOM manipulation ourselves. Basically we are saying to React -
89
89
90
90
> Hey React I have a component I want to render. I will tell you what the component should look like when it's rendered (remember this is what the return of the Component function tells). I will also tell you where to render this component (second argument we passed to `ReactDOM.render` function). But I don't want to get involved in DOM manipulation - I will let you do all the DOM manipulation yourself. You can call all these DOM api like `document.createElement`, `.append`, `.appendChild` etc. whenever you wish - I trust you and I don't care as long as I see on the browser what I expected to see.
Copy file name to clipboardexpand all lines: src/tutorial/02-IntroToJSX.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,18 @@
1
-
In the [previous section](/tutorial/hello-world) we created our first Hello World function component. Remember we returned `React.createElement` from the function to tell React what the DOM should look like when we render this component. Another alternative way of telling React what the DOM should look like is by using JSX. JSX is a very common and recommended way (preferred over `React.createElement` syntax in most cases) to write React code. JSX is a funny looking syntax though - it's not purely HTML, it's not purely Javascript. But it's an extension of Javascript where you can write HTML like syntax with full power of Javascript. For example, the equivalent of return statement we saw in [previous page](/tutorial/hello-world) (using `React.createElement`) in JSX would be:
1
+
In the [previous section](/tutorial/hello-world) we created our first Hello World function component. Remember we returned `React.createElement` from the function to tell React what the DOM should look like when we render this component. Another alternative way of telling React what the DOM should look like is by using JSX. JSX is a very common and recommended way (preferred over `React.createElement` syntax in most cases) to write React code. JSX is a funny looking syntax though - it's not purely HTML, it's not purely JavaScript. But it's an extension of JavaScript where you can write HTML like syntax with full power of JavaScript. For example, the equivalent of return statement we saw in [previous page](/tutorial/hello-world) (using `React.createElement`) in JSX would be:
2
2
3
3
```jsx
4
4
return (
5
5
<div>Hello World</div>
6
6
)
7
7
```
8
8
9
-
Instead of returning Javascript code, it's returning HTML-like code (it's not HTML) and notice it's not a string. Wait, what?!! Welcome to JSX!
9
+
Instead of returning JavaScript code, it's returning HTML-like code (it's not HTML) and notice it's not a string. Wait, what?!! Welcome to JSX!
10
10
11
11
You don't trust that this weird syntax works, do you? Open the exercise file and edit the return statement with the JSX and save to see the magic happen!
12
12
13
13
<!--exercise-->
14
14
15
-
Although you write HTML looking syntax, your JSX code is compiled into a Javascript function like the one we saw in the previous page. The above JSX code is compiled into:
15
+
Although you write HTML looking syntax, your JSX code is compiled into a JavaScript function like the one we saw in the previous page. The above JSX code is compiled into:
0 commit comments