Conditional rendering works the same as JavaScript's if statement and ternary operators.

```jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.state;
  }

  render() {
    if (this.state) return <div>State is true</div>
    return <div>State is false</div>
  }
}
```

Conditional Rendering

JSX is a syntax extension to JavaScript that is used to produce React components. Its syntax is similar to that of HTML. You can use any valid JavaScript expression inside the curly braces. Additionally, you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. 

You can also pass attributes and children. JSX is the representation of objects, and Babel compiles JSX to **React.createElement()** which returns an object.

This is an example
```tsx
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
```

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 
The simplest way to define a component is to write a JavaScript function
```jsx
const Welcome = (props) => <h1>Hello, {props.name}</h1>
```
Also, you can define it in classes. We can pass properties through an object called **props**. You can also pass other components and split them into smaller components like this:

```jsx
const Header = () => <header>Header</header>
const Main = (props) => <main>Hello {props.name} 🏈</main>
const Footer = () => <footer>Footer</footer>

const Page = () => <div>
    <Header/>
    <Main name={'Jimy'}/>
    <Footer/>
</div>
```

Components and Props

To display an array of elements in React, you can use array methods like `map` and `filter` to generate an array of React components, which can then be rendered.

Each item in the array should be given a unique key to enable React to differentiate between elements and components.

```jsx
// 1. Move data into an array
const cakes = [
  { id:'01', name:'Chocolate Cake' },
  { id:'02', name: 'Red Velvet Cake' },
  { id:'03', name: 'Vanilla Cake' },
]

// 2. Map into a new array of JSX nodes
const listItems = cakes.map(cake => <li key={cakes.id}>
  {cakes.name}
</li>);

// 3. return a list of elements
// wrapped in a `ul` component
return <ul>{listItems}</ul>;
```

Rendering Lists in React

Some JavaScript functions are pure functions. A pure function does only one thing and returns the same output for the same input. By building only pure functions, you can avoid confusing bugs and unpredictable behavior as your codebase grows.

Keeping Components Pure on React Js

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

University of Michigan - Ann Arbor

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.

React Js

https://react.dev/learn/describing-the-ui

Describing The UI in React Js

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

Learn Before

Related

Learn After