Intro to React

What is react?

Developed by Facebook, React is an open-source library built completely out of JavaScript and commonly used to build single-page applications out of components.

Key Features of React

Component-Based

React applications are built out of smaller components that each handle a different part or function of the application. A header component would handle the header portion of a webpage, a form component would handle a form used in the webpage, and a list component would handle list elements in a list.
This method of modular coding allows developers to easily identify specific components and their functionalities. It also allows easier navigation through the code and makes it easier to find bugs, since they are isolated in these components.

JSX

JSX is a syntax extension used in React to produce code that looks like HMTL in JavaScript. This allows developers to easily visualize the structure of a component.

Example Code 1:

import React from "react"

export function App() {
return (
    <div>
        <h1>Title</h1>
        <p>Description</p>
        <img src="img_url" alt="alt_text" />
    </div>
    )
}

Declarative Programming

In declarative programming, a desired result or outcome is described and the process of producing that result or outcome is left to the program. Whereas in imperative programming, explicit directions are given to the program to produce the desired result or outcome.
An analogy that describes the difference between the two approaches would be ordering a mojito at a bar. An imperative approach would be to give the bartender step-by-step instructions such as:

1. Add five mint leaves to cocktail shaker and muddle.
2. Add 2oz of white rum, 1oz lime juice, 1/2 simple syrup, and ice.
3. Shake, and then strain into a glass.
4. Top with a splash of club soda and garnish with mint leaf.

Whereas the declarative approach would be to ask the bartender for a mojito and leaving the process of creating the mojito to the bartender.

In vanilla JavaScript, imperative programming is commonly used. Explicit instructions must be given in order to manipulate the DOM.

Example Code 2:

const container = document.createElement("div");

const titleH1 = document.createElement("h1");
titleH1.textContent = "Title";

const descriptionP = document.createElement("p");
descriptionP.textContent = "Description";

const img = document.createElement("img");
img.src = "img_url";
img.alt = "alt_text";

container.append(titleH1, descriptionP, img);

Whereas, in Example Code 1, the code describes the final result that is desired and leaves the process of obtaining that result to the program.

Virtual DOM

Since the DOM is manipulated manually in vanilla JavaScript, updates can be less efficient and therefore slow down the application. Whereas in React, changes are first made to a copy of the DOM called the virtual DOM. The differences between the real DOM and the virtual DOM are then found and only those components are updated. This allows faster updates since only updated portions of the web application are changed.

One-Way Data Flow

Data in React flows in one direction, from parent components to child components. The data is sent down in the form of properties, or props.

// Parent.jsx
import React from "react";
import Child from "./Child";

export function Parent() {
const greeting = "Hello World!";
    return (
        <div>
            <Child message={greeting} />
        </div>
    )
}

// Child.jsx 

export function Child(props) {
    console.log(props.message); // returns "Hello World!"
    return (
        <h1>{props.message}</h1>
    )
}

Conclusion

React allows developers to build applications out of smaller pieces of code in the form of components. This component-based programming and the use of JSX syntax increases the readability of the structure of the application. The use of a virtual DOM allows for efficient changes in the web application by only reloading parts of the DOM that were changed instead of the entire DOM.