` gives it necessary properties and methods to be a home for our React app.
+
+One of them is `render()`, a very important method that dictates what the component should look like. In this case, it renders one component - `App` inside the container.
+
+If you inspect the header, you will see that the `` element is indeed nested in the `
` element is indeed nested in the `` with the `id` of 'root'.
-The [React Virtual DOM](https://facebook.github.io/react/docs/dom-differences.html) exists entirely in-memory and is a representation of the web browser's DOM. Because of this, when we write a React component, we're not writing directly to the DOM, but we're writing a virtual component that React will turn into the DOM.
+## Final words
-In the next article, we'll look at what this means for us as we build our React components and jump into JSX and writing our first real components.
+Tomorrow, you will learn about JSX, the syntax that helps us define components' layout and build dynamic web apps with React.
diff --git a/day-02/post.md b/day-02/post.md
index bbbece2c..c7f6e703 100644
--- a/day-02/post.md
+++ b/day-02/post.md
@@ -15,97 +15,95 @@ imagesDir: /assets/images/series/30-days-of-react/day-2
includeFile: ./../_params.yaml
---
-In our previous article, we looked at what [React](https://facebook.github.io/react/) is and discussed at a high-level how it works. In this article, we're going to look at one part of the React ecosystem: ES6 and JSX.
+In our previous article, we looked at what [React](https://facebook.github.io/react/) is and how it works.
-## JSX/ES5/ES6 WTF??!
+Today, you will learn about JSX and ES6, two essential tools for developing apps with React.
-In any cursory search on the Internet looking for React material, no doubt you have already run into the terms `JSX`, ES5, and ES6. These opaque acronyms can get confusing quickly.
+## What is JSX?
-ES5 (the `ES` stands for ECMAScript) is basically "regular JavaScript." The 5th update to JavaScript, ES5 was finalized in 2009. It has been supported by all major browsers for several years. Therefore, if you've written or seen any JavaScript in the recent past, chances are it was ES5.
+**JSX**, short for JavaScript XML, is HTML-like syntax that helps us define component layouts in React.
-ES6 is a new version of JavaScript that adds some nice syntactical and functional additions. It was finalized in 2015. ES6 is [almost fully supported](http://kangax.github.io/compat-table/es6/) by all major browsers. But it will be some time until older versions of web browsers are phased out of use. For instance, Internet Explorer 11 does not support ES6, but has about 12% of the browser market share.
+Let's go back to our example from day 1.
-In order to reap the benefits of ES6 today, we have to do a few things to get it to work in as many browsers as we can:
+We have a React component that returns an `` element with the text 'Hello World'.
-1. We have to _transpile_ our code so that a wider range of browsers understand our JavaScript. This means converting ES6 JavaScript into ES5 JavaScript.
-2. We have to include a _shim_ or _polyfill_ that provides additional functionality added in ES6 that a browser may or may not have.
+The HTML-like code inside the return statement is JSX.
-We'll see how we do this a bit later in the series.
-
-> Most of the code we'll write in this series will be easily translatable to ES5. In cases where we use ES6, we'll introduce the feature at first and then walk through it.
-
-As we'll see, all of our React components have a `render` function that specifies what the HTML output of our React component will be. **JavaScript eXtension**, or more commonly **JSX**, is a React extension that allows us to write JavaScript that _looks like_ HTML.
+```javascript
+function App() {
+ return (
+ Hello World
+ );
+}
+```
-> Although in previous paradigms it was viewed as a bad habit to include JavaScript and markup in the same place, it turns out that combining the view with the functionality makes reasoning about the view straight-forward.
+Remember that JSX is an extension of JavaScript. Once application runs, JSX is _translated_ into calls to `React.createElement()` and other JavaScript methods on Top-Level API of React.
-To see what this means, imagine we had a React component that renders an `h1` HTML tag. JSX allows us to declare this element in a manner that closely resembles HTML:
+You don't have to use JSX. You can make calls to `React.createElement()` method to get the same result, but the JavaScript code gets complicated very fast.
```javascript
-class HelloWorld extends React.Component {
- render() {
- return (
- Hello World
- );
- }
+function App() {
+ return React.createElement("h1", null, "Hello World");
}
```
-
+JSX is obviously more readable than calling the `React.createElement()` method. Difference is even more evident when you have nested elements and components.
+
+Let's try and add a `
` paragraph under the `
` header.
-The `render()` function in the `HelloWorld` component looks like it's returning HTML, but this is actually JSX. The JSX is _translated_ to regular JavaScript at runtime. That component, after translation, looks like this:
+JSX code is still fairly simple:
```javascript
-class HelloWorld extends React.Component {
- render() {
- return (
- React.createElement(
- 'h1',
- {className: 'large'},
- 'Hello World'
- )
- );
- }
+function App() {
+ return (
+
+ Hello World
+ Lorem ipsum dolor sit amet
+
+ );
}
```
-While JSX looks like HTML, it is actually just a terser way to write a `React.createElement()` declaration. When a component renders, it outputs a tree of React elements or a **virtual representation** of the HTML elements this component outputs. React will then determine what changes to make to the actual DOM based on this React element representation. In the case of the `HelloWorld` component, the HTML that React writes to the DOM will look like this:
+Using the `React.createElement()` method to recreate the same component would look like this:
-```html
-Hello World
+```javascript
+export default function App() {
+ return React.createElement("div", { className: "App" }, [
+ React.createElement("h1", null, "Hello World"),
+ React.createElement("p", null, "Lorem ipsum dolor sit amet")
+ ]);
+}
```
-> The `class extends` syntax we used in our first React component is ES6 syntax. It allows us to write objects using a familiar Object-Oriented style.
-> In ES5, the `class` syntax might be translated as:
->
-> ```javascript
-> var HelloWorld = function() {}
-> Object.extends(HelloWorld, React.Component)
-> HelloWorld.prototype.render = function() {}
-> ```
+Every additional element makes JavaScript code exponentially more difficult to follow. Especially when elements are nested, have conditional classes, and more dynamic features. That's why even experienced React developers use JSX.
-Because JSX is JavaScript, we can't use JavaScript reserved words. This includes words like `class` and `for`.
+### Why `className` attribute instead of `class`?
-React gives us the attribute `className`. We use it in `HelloWorld` to set the `large` class on our `h1` tag. There are a few other attributes, such as the `for` attribute on a label that React translates into `htmlFor` as `for` is also a reserved word. We'll look at these when we start using them.
+In JSX, certain attribute names are different from HTML. For example, we use `className` instead of `class`. This is necessary because in JavaScript, 'class' and 'for' are reserved words, and JSX is a syntax extension of JS. The `for` HTML attribute becomes `htmlFor` in React.
-If we want to write pure JavaScript instead of rely on a JSX compiler, we can just write the `React.createElement()` function and not worry about the layer of abstraction. But we like JSX. It's especially more readable with complex components. Consider the following JSX:
+### A mix of markup and logic
-```javascript
-
- 
- Welcome back Ari
-
-```
+Unlike HTML, you can embed dynamic JavaScript expressions inside JSX. This can be mainly attributed to the fact that JSX is simply an extension of JavaScript.
-The JavaScript delivered to the browser will look like this:
+To embed JavaScript expression in JSX, you need to wrap it with curly braces.
```javascript
-React.createElement("div", null,
- React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
- React.createElement("h1", null, "Welcome back Ari")
-);
+function App() {
+ return (
+ {"Hello" + " World"}
+ );
+}
```
-Again, while you can skip JSX and write the latter directly, the JSX syntax is well-suited for representing nested HTML elements.
+In this example, a simple `+` operator concatenates two strings `"Hello"` and `" World"`, so the component renders the header 'Hello World'.
+
+## What is ES6?
+
+ES6 is the newest version of JavaScript that comes with many useful methods and easier syntax for writing modern web applications. At the time of writing this, most browsers support ES6. According to [caniuse.com](https://caniuse.com/?search=es6), 97% of internet surfers use browsers that support ES6.
+
+ES6 code can be transpiled into ES5, older version of JavaScript, to make sure the rest of users are not left out.
+
+## Final thoughts
-Now that we understand JSX, we can start writing our first React components. Join us tomorrow when we jump into our first React app.
+Now that we understand JSX, it's time write a real web application in React.
diff --git a/day-03/instagram clone.png b/day-03/instagram clone.png
new file mode 100644
index 00000000..7d182c6b
Binary files /dev/null and b/day-03/instagram clone.png differ
diff --git a/day-03/post.md b/day-03/post.md
index d327846a..4ffa1165 100644
--- a/day-03/post.md
+++ b/day-03/post.md
@@ -16,128 +16,128 @@ imagesDir: /assets/images/series/30-days-of-react/day-3
includeFile: ./../_params.yaml
---
-Let's revisit the "Hello world" app we introduced on day one. Here it is again, written slightly differently:
-
-```html
-
-
-
-
- Hello world
-
-
-
-
-
-
-
-
-
-
+Today we will discuss components, UI building blocks in React. You will also learn best practices for building reusable components.
+
+Let's revisit the example from day one.
+
+```javascript
+function App() {
+ return (
+ Hello World
+ );
+}
```
-
+So far, our entire React app is just one `App` component.
-### Loading the React library
+It's time to learn how to create real web applications and make use of all interactive features React has to offer.
-We've included the source of React as a `
-
-
-
-
-
-
-
-
` element with the text 'Hello World'.
-1. We have to _transpile_ our code so that a wider range of browsers understand our JavaScript. This means converting ES6 JavaScript into ES5 JavaScript.
-2. We have to include a _shim_ or _polyfill_ that provides additional functionality added in ES6 that a browser may or may not have.
+The HTML-like code inside the return statement is JSX.
-We'll see how we do this a bit later in the series.
-
-> Most of the code we'll write in this series will be easily translatable to ES5. In cases where we use ES6, we'll introduce the feature at first and then walk through it.
-
-As we'll see, all of our React components have a `render` function that specifies what the HTML output of our React component will be. **JavaScript eXtension**, or more commonly **JSX**, is a React extension that allows us to write JavaScript that _looks like_ HTML.
+```javascript
+function App() {
+ return (
+ Hello World
+ );
+}
+```
-> Although in previous paradigms it was viewed as a bad habit to include JavaScript and markup in the same place, it turns out that combining the view with the functionality makes reasoning about the view straight-forward.
+Remember that JSX is an extension of JavaScript. Once application runs, JSX is _translated_ into calls to `React.createElement()` and other JavaScript methods on Top-Level API of React.
-To see what this means, imagine we had a React component that renders an `h1` HTML tag. JSX allows us to declare this element in a manner that closely resembles HTML:
+You don't have to use JSX. You can make calls to `React.createElement()` method to get the same result, but the JavaScript code gets complicated very fast.
```javascript
-class HelloWorld extends React.Component {
- render() {
- return (
- Hello World
- );
- }
+function App() {
+ return React.createElement("h1", null, "Hello World");
}
```
-
+JSX is obviously more readable than calling the `React.createElement()` method. Difference is even more evident when you have nested elements and components.
+
+Let's try and add a `
` paragraph under the `
` header.
-The `render()` function in the `HelloWorld` component looks like it's returning HTML, but this is actually JSX. The JSX is _translated_ to regular JavaScript at runtime. That component, after translation, looks like this:
+JSX code is still fairly simple:
```javascript
-class HelloWorld extends React.Component {
- render() {
- return (
- React.createElement(
- 'h1',
- {className: 'large'},
- 'Hello World'
- )
- );
- }
+function App() {
+ return (
+
+ Hello World
+ Lorem ipsum dolor sit amet
+
+ );
}
```
-While JSX looks like HTML, it is actually just a terser way to write a `React.createElement()` declaration. When a component renders, it outputs a tree of React elements or a **virtual representation** of the HTML elements this component outputs. React will then determine what changes to make to the actual DOM based on this React element representation. In the case of the `HelloWorld` component, the HTML that React writes to the DOM will look like this:
+Using the `React.createElement()` method to recreate the same component would look like this:
-```html
-Hello World
+```javascript
+export default function App() {
+ return React.createElement("div", { className: "App" }, [
+ React.createElement("h1", null, "Hello World"),
+ React.createElement("p", null, "Lorem ipsum dolor sit amet")
+ ]);
+}
```
-> The `class extends` syntax we used in our first React component is ES6 syntax. It allows us to write objects using a familiar Object-Oriented style.
-> In ES5, the `class` syntax might be translated as:
->
-> ```javascript
-> var HelloWorld = function() {}
-> Object.extends(HelloWorld, React.Component)
-> HelloWorld.prototype.render = function() {}
-> ```
+Every additional element makes JavaScript code exponentially more difficult to follow. Especially when elements are nested, have conditional classes, and more dynamic features. That's why even experienced React developers use JSX.
-Because JSX is JavaScript, we can't use JavaScript reserved words. This includes words like `class` and `for`.
+### Why `className` attribute instead of `class`?
-React gives us the attribute `className`. We use it in `HelloWorld` to set the `large` class on our `h1` tag. There are a few other attributes, such as the `for` attribute on a label that React translates into `htmlFor` as `for` is also a reserved word. We'll look at these when we start using them.
+In JSX, certain attribute names are different from HTML. For example, we use `className` instead of `class`. This is necessary because in JavaScript, 'class' and 'for' are reserved words, and JSX is a syntax extension of JS. The `for` HTML attribute becomes `htmlFor` in React.
-If we want to write pure JavaScript instead of rely on a JSX compiler, we can just write the `React.createElement()` function and not worry about the layer of abstraction. But we like JSX. It's especially more readable with complex components. Consider the following JSX:
+### A mix of markup and logic
-```javascript
-
-
- Welcome back Ari
-
-```
+Unlike HTML, you can embed dynamic JavaScript expressions inside JSX. This can be mainly attributed to the fact that JSX is simply an extension of JavaScript.
-The JavaScript delivered to the browser will look like this:
+To embed JavaScript expression in JSX, you need to wrap it with curly braces.
```javascript
-React.createElement("div", null,
- React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
- React.createElement("h1", null, "Welcome back Ari")
-);
+function App() {
+ return (
+ {"Hello" + " World"}
+ );
+}
```
-Again, while you can skip JSX and write the latter directly, the JSX syntax is well-suited for representing nested HTML elements.
+In this example, a simple `+` operator concatenates two strings `"Hello"` and `" World"`, so the component renders the header 'Hello World'.
+
+## What is ES6?
+
+ES6 is the newest version of JavaScript that comes with many useful methods and easier syntax for writing modern web applications. At the time of writing this, most browsers support ES6. According to [caniuse.com](https://caniuse.com/?search=es6), 97% of internet surfers use browsers that support ES6.
+
+ES6 code can be transpiled into ES5, older version of JavaScript, to make sure the rest of users are not left out.
+
+## Final thoughts
-Now that we understand JSX, we can start writing our first React components. Join us tomorrow when we jump into our first React app.
+Now that we understand JSX, it's time write a real web application in React.
diff --git a/day-03/instagram clone.png b/day-03/instagram clone.png
new file mode 100644
index 00000000..7d182c6b
Binary files /dev/null and b/day-03/instagram clone.png differ
diff --git a/day-03/post.md b/day-03/post.md
index d327846a..4ffa1165 100644
--- a/day-03/post.md
+++ b/day-03/post.md
@@ -16,128 +16,128 @@ imagesDir: /assets/images/series/30-days-of-react/day-3
includeFile: ./../_params.yaml
---
-Let's revisit the "Hello world" app we introduced on day one. Here it is again, written slightly differently:
-
-```html
-
-
-
-
- Hello world
-
-
-
-
-
-
-
-
-
-
+Today we will discuss components, UI building blocks in React. You will also learn best practices for building reusable components.
+
+Let's revisit the example from day one.
+
+```javascript
+function App() {
+ return (
+ Hello World
+ );
+}
```
-
+So far, our entire React app is just one `App` component.
-### Loading the React library
+It's time to learn how to create real web applications and make use of all interactive features React has to offer.
-We've included the source of React as a `
-
-
-
-
-
-
-
-
Hello World
+Lorem ipsum dolor sit amet
+
-