React needs to create a root element to render components. React will compare previous elements with the changed elements to render only the required parts. 

An element is immutable, like a frame of a movie, representing the current view at a given time.

```tsx
// create root element in element with **root** id
const root = ReactDOM.createRoot(
  document.getElementById('root')
);

// define an element
const element = <h1>Hello, world!</h1>

// render element when is required
root.render(element);
```

Rendering in React

State in React is similar to a private property that is managed by React. Every change in state calls the render method, displaying the new changes in the user interface. 

You can define a state in this way:

```ts
class Clock extends React.Component {
  constructor(props) {
    super(props); // calls parent contructor with props
    this.state = {date: new Date()}; // define state with initial value
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
```

State in React Js

React executes the class constructor to initialize the states. After that, React mounts and renders the component for the first time. React provides us with a function that we can override to be executed at that time, called **componentDidMount**.

States can then be updated, and after re-rendering, we can execute code by overriding the **componentDidUpdate** function.

Finally, when a component is unmounted, we need to remove any unnecessary things from memory, such as timeouts. To do that, React exposes the **componentWillUnmount** function.

Lifecycle Methods in React Class Components

Handling events with React is similar to handling events on DOM elements. 
- In React, event names are written in **camelCase** rather than lowercase.
- Additionally, in React, we can pass functions as event handlers instead of strings.
```js
<button onClick={activateLasers}>
  Activate Lasers
</button>
```
- To prevent default behavior we cannot return `false`, we need to call `preventDefault()`
```js
<button onClick={e=>e.preventDefault()}>
  Activate Lasers
</button>
```
The `e` value is a **synthetic event** is a synthetic event defined by React based **W3C spec**, you don't need to worried about cross-browser compatibility

Handling Events in React

References from React documentation:
- https://reactjs.org/docs/rendering-elements.html
- https://react.dev/learn/describing-the-ui
- https://reactjs.org/docs/state-and-lifecycle.html
- https://react.dev/learn/conditional-rendering
- https://react.dev/learn/conditional-rendering
- https://reactjs.org/docs/introducing-jsx.html
- https://react.dev/learn/rendering-lists
- https://react.dev/learn/keeping-components-pure

React References

React Frameworks

The UI can be described in small units like buttons, titles, and other elements. With React, we can combine these elements into reusable and nestable components. React allows us to:

- Create Component
- Importing and Exporting Components
- Writing Markup with JSX
- JavaScript in JSX with Curly Braces
- Passing Props to a Component
- Conditional Rendering
- Rendering Lists
- Keeping Components Pure

Describing the UI in React

What is true about ReactJS?

Which of the following is true about about React Bootstrap?

Which of the following are true regarding the difference between React events and DOM events?

React is a user interface library that was created by Jordan Walke at Meta. It was first deployed on Facebook's News Feed in 2011 and later on Instagram in 2012. 

React is based on components, allowing you to divide views into smaller pieces of logic and view, and reuse them. React is declarative, allowing you to create simple views and React will render them efficiently. Data is passed in one direction. React has many features such as the Virtual DOM, Lifecycle Methods, JSX, and React Hooks.

University of Michigan - Ann Arbor

Stanford University

JavaScript is a lightweight, interpreted or just-in-time compiled, programming language with first-class functions. It is a prototype-based, multi-paradigm, single-threaded, dynamic language that supports object-oriented, imperative, and declarative programming styles, such as functional programming. It was invented by Brendan Eich in 1995 at Netscape and later continued to be developed under the ECMA standard by the Mozilla Foundation.

JavaScript Programming Language

React documentation

when a web page is loaded in a browser, the code (HTML, CSS, and JavaScript) is executed within the browser tab, which acts like a factory that takes in the code and produces the web page. One common use of JavaScript is to change the HTML and CSS in order to update the user interface using the Document Object Model API. It is important to note that the code is generally loaded and executed in the order it appears on the page and errors may occur if JavaScript is run before the related HTML and CSS. 

What is JavaScript doing on your page?

React Js

JavaScript is case-sensitive and uses the Unicode character set. An instruction is called a statement. We can separate statements with a semicolon, although it is not required if a statement is on one line.

The basic concepts in JavaScript include: 
- Comments
- Declarations
- Variables
- Data structures and types
- Literals

Grammar and types

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

JavaScript - Grammar and types

Node.js, created by Ryan Dahl and first released in 2009, is an open-source server environment designed to run on multiple platforms, including Windows, Linux, Unix, and macOS. It is a back-end JavaScript runtime environment that uses the V8 JavaScript engine to execute JavaScript code outside of a web browser. With Node.js, developers can create command-line tools and server-side scripts using JavaScript. By enabling scripts to run server-side, Node.js allows for the creation of dynamic web page content before it is sent to the user's browser. This approach unifies web application development by promoting the use of a single programming language across both server-side and client-side scripts.

Learn Before

Related

Learn After