fullstackreact · irakli12345 · Sep 30, 2023 · Sep 30, 2023 · Sep 30, 2023 · Sep 30, 2023
diff --git a/day-01/post.md b/day-01/post.md
@@ -28,51 +28,47 @@ Let's get started. We'll start [at the very beginning](https://www.youtube.com/w
 
 [React](https://facebook.github.io/react/) is a JavaScript library for building user interfaces. It is the view layer for web applications.
 
-At the heart of all React applications are **components**. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are _composable_. A component might include one or more other components in its output.
+At the heart of all React applications are **components**. These are self-contained pieces of UI that when put together, make up the web application. A component can be as small as a button or an input field, or a Form component that contains smaller Button and Input components.
 
-Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application.
+Process of building React apps is writing and organizing small components into larger structures, making sure that individual components are flexible and reusable, but also consistent.
 
-For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We'd then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it.
-
-Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances. We dig into these principles later in the course.
+React provides guardrails to guide us through this difficult process, so we, developers, can focus on building user interfaces.
 
 ## Okay, so how do we use it?
 
-React is a JavaScript framework. Using the framework is as simple as including a JavaScript file in our HTML and using the `React` exports in our application's JavaScript.
-
-For instance, the _Hello world_ example of a React website can be as simple as:
-
-```html
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Hello world</title>
-  <!-- Script tags including React -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
-  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="text/babel">
-    ReactDOM.render(
-      <h1>Hello world</h1>,
-      document.querySelector('#app')
-    );
-  </script>
-</body>
-</html>
-```
-
-<div id="demo1"></div>
-
-Although it might look a little scary, the JavaScript code is a single line that dynamically adds _Hello world_ to the page. Note that we only needed to include a handful of JavaScript files to get everything working.
+There are several ways to approach building web applications in React.
+
+For now, let's work with cloud-based IDEs to instantly set up a React project, write React components and see changes in real time. 
+
+Let's look at a simple React app that says 'Hello World'.
+
+[![Edit hello world!](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/hello-world-p4wj53?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark)
+
+In this code example, we have a function `App` that returns what looks like an HTML code - a header with the text 'Hello World'.
+
+`App` is a React component. React components can be written as a function (like `App` is) or using ES6 class syntax. Because functions are more familiar and easier to write, let's stick with function components for now. 
+
+All React components return HTML-like (**not HTML**) code to describe what UI should look like.
 
 ## How does it work?
 
-Unlike many of its predecessors, React operates not directly on the browser's Document Object Model (DOM) immediately, but on a **virtual DOM**. That is, rather than manipulating the `document` in a browser after changes to our data (which can be quite slow) it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React intelligently determines what changes to make to the actual browser's DOM.
+In `index.html` file, there is an empty `<div>` container with the id of 'root'. Obviously an innocent HTML element doesn't have capabilities to render React components. 
+
+[![Edit hello world!](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/hello-world-p4wj53?fontsize=14&hidenavigation=1&module=%2Fpublic%2Findex.html&theme=dark)
+
+That is why, in `index.js` file, we use `document.getElementById()` method to get the empty container and store it the variable named `rootElement`.
+
+[![Edit hello world!](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/hello-world-p4wj53?fontsize=14&hidenavigation=1&theme=dark)
+
+> `document.getElementById()` method is frequently used in JavaScript DOM manipulation. It accepts one argument - `id` of the DOM element you want to select.
+
+Calling `createRoot()` on a plain `<div>` 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 `<h1>` element is indeed nested in the `<div>` 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
@@ -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 `<h1>` 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 (
+      <h1>Hello World</h1>
+  );
+}
+```
 
-> 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 (
-      <h1 className='large'>Hello World</h1>
-    );
-  }
+function App() {
+  return React.createElement("h1", null, "Hello World");
 }
 ```
 
-<div id="demo1"></div>
+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 `<p>` paragraph under the `<h1>` 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 (
+    <div className="App">
+      <h1>Hello World</h1>
+      <p>Lorem ipsum dolor sit amet</p>
+    </div>
+  );
 }
 ```
 
-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
-<h1 class='large'>Hello World</h1>
+```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
-<div>
-  <img src="profile.jpg" alt="Profile photo" />
-  <h1>Welcome back Ari</h1>
-</div>
-```
+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 (
+      <h1>{"Hello" + " World"}</h1>
+  );
+}
 ```
 
-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