ReactJs Basics

About React:
• React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook.
• React is a JavaScript library for building user interfaces.
• React is used to build single-page applications.
• React allows us to create reusable UI components.
• React is a tool for building UI components.

How does React Work?
• React creates a VIRTUAL DOM in memory.
• Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React.JS History :
• Current version of React.JS is V18.0.0 (April 2022).
• Initial Release to the Public (V0.3.0) was in July 2013.
• React.JS was first used in 2011 for Facebook’s Newsfeed feature.
• Facebook Software Engineer, Jordan Walke, created it.
• Current version of create-react-app is v5.0.1 (April 2022).
• create-react-app includes built tools such as webpack, Babel, and ESLint.

React Getting Started:
• To use React in production, We need npm which is included with Node.js.
• To get an overview of what React is, you can write React code directly in HTML.

React Directly in HTML:
Example:

            <div id="mydiv"></div>

            <script type="text/babel">
              function Hello() {
                return <h1>Hello Baba!</h1>;
              }

              const container = document.getElementById('mydiv');
              const root = ReactDOM.createRoot(container);
              root.render(<Hello />)
            </script>

          </body>
        </html>

*** This way of using React can be OK for testing purposes, but for production you will need to set up a React environment.

Setting up a React Environment:
• Run this command to create a React application named my-react-app:
◦ npx create-react-app my-react-app
• Run the React Application :
◦ Run this command to move to the my-react-app directory:
▪ cd my-react-app
• Run this command to run the React application my-react-app:
◦ npm start

=> A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

Default ReactJs Structure:
Modify the React Application:
• Inside the src folder there is a file called App.js, open it and it will look like this:
/myReactApp/src/App.js:
import logo from ‘./logo.svg’;
import ‘./App.css’;

function App() {
return (

Edit src/App.js and save to reload. Learn React
);
}

export default App;

• Try changing the HTML content and save the file.
** Notice that the changes are visible immediately after you save the file, you do not have to reload the browser!
Example:
function App() {

return (
hello world!

);
}

export default App;

• Now you have a React Environment on your computer, and you are ready to learn more about React.
• In the rest of this tutorial we will use our "Show React" tool to explain the various aspects of React, and how they are displayed in the browser.

If we want to follow the same steps on our computer, start by stripping down the src folder to only contain one file: index.js. You should also remove any unnecessary lines of code inside the index.js file to make them look like the example in the “Show React” tool below:

const myFirstElement = <h1>Hello React!</h1>

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(myFirstElement);

Test Yourself With Exercises:
Exercise:
Enter the correct ReactDOM method to render the React element to the DOM.
ReactDOM._(myElement, document.getElementById(‘root’));

        Ans: createRoot

Upgrading an existing React application to version 18 only requires two steps.
• If you are already using the latest version of create-react-app which uses React version 18 you can skip this section.

• Step 1: Install React 18
    ◦ To install the latest version, from your project folder run the following from the terminal:
        ▪ npm i react@latest react-dom@latest

• Step 2: Use the new root API :
    ◦ In order to take advantage of React 18's concurrent features you'll need to use the new root API for client rendering.

// Before
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

What is ES6?
• ES6 stands for ECMAScript 6.
• ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.

Why Should I Learn ES6?
• React uses ES6, and you should be familiar with some of the new features like:
* Classes
* Arrow Functions
* Variables (let, const, var)
* Array Methods like .map()
* Destructuring
* Modules
* Ternary Operator
* Spread Operator

Classes:
• A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.
    Example:
    A simple class constructor:
        class Car {
              constructor(name) {
                this.brand = name;
              }
        }
** Notice the case of the class name. We have begun the name, "Car", with an uppercase character. This is a standard naming convention for classes.

            create objects using the Car class:
            class Car {
              constructor(name) {
                this.brand = name;
              }
            }

            const mycar = new Car("Ford");

    Method in Classes:
        class Car {
          constructor(name) {
            this.brand = name;
          }

          present() {
            return 'I have a ' + this.brand;
          }
        }

        const mycar = new Car("Ford");
        mycar.present();

Class Inheritance:
• To create a class inheritance, use the extends keyword.
• A class created with a class inheritance inherits all the methods from another class:

    Example:
        class Car {
          constructor(name) {
            this.brand = name;
          }

          present() {
            return 'I have a ' + this.brand;
          }
        }

        class Model extends Car {
          constructor(name, mod) {
            super(name);
            this.model = mod;
          }  
          show() {
              return this.present() + ', it is a ' + this.model
          }
        }
        const mycar = new Model("Ford", "Mustang");
        mycar.show();

• **The super() method refers to the parent class.
• ** By calling the super() method in the constructor method, we call the parent's constructor method and get access to the parent's properties and methods.

Arrow Functions:
            Arrow functions allow us to write shorter function syntax:
                Example:
                    Before:
                        hello = function() {
                          return "Hello World!";
                        }

                    With Arrow Function:
                        hello = () => {
                          return "Hello World!";
                        }

                 **If you have only one parameter, you can skip the parentheses as well:
                        hello = val => "Hello " + val;