Day 6: Meeting React
Tags: 100daysofcode, beginners, webdev, react
Published: 2022-04-11 14:46:52

*The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post*

## JSX and React

Writing HTML inside a JS string is a pain in the ass, so JSX is introduced to make this easier for developers to write HTML in JS code:
```jsx
let elem = <h1>Yeet</h1> // HTML made easy in JS! 🚀
```
However, JSX violates the JS syntax, so you need to compile them into vanilla JS first. Babel transpiler is a popular option for this task.

Note that JSX syntax only works with one element at a time. You can nest more elements inside, but not next to each other.

And for commenting, you use `{* comment *}` syntax.

There are a few special cases where the HTML syntax differs in JSX. An important one is `class`:
```jsx
let container = <div className="Nope"></div>;
```
In fact, all HTML attributes in JSX follow `camelCase` 🐪 naming, so `onclick` becomes `onClick`, and such.

Another important point is that JSX allows all elements to be self-closing, but requires all element to *close* itself.
```jsx
let abnormal = <div /> // I'm self closing!
let closed = <br /> // I need to be closed!
```

Finally, you can also insert JS code inside the syntax:
```jsx
let username = "Bob Ross";
let title = <h1>My name is {username}</h1>;
```

## All about React

React is a JS library for building UI, so it has the necessary power to manipulate DOM to our liking.

To render elements into DOM, use `ReactDOM.render()` method:
```jsx
let box = document.getElementById("section1");
let content = <h1>Cool!</h1>;

ReactDOM.render(content, box);
```

React works with the concept of *components*. Basically, React encourages developers to break the website into smaller functional pieces. This makes it easy to separate UI code from functional code.

There are two approaches to writing components in React:

1. Stateless functional component

This approach use `function` in JS to write stateless components (I'm still learning about states, but what can I say is that *stateless* component can receive and render data, but not track or manage data.)
```jsx
const Recipe = (props) => {
  return <ul>
           <li>Flour</li>
           <li>Egg</li>
           <li>Love</li>
         </ul>
}
```
They must have capitalized name, and only return JSX or `null`. `props` is a standard name for its argument, and arrow function syntax is very common practice.

2. ES6 `class` syntax

Here's the syntax:
```jsx
class Drinks extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>Coffee, Tea, and more!</h1>
    );
  }
};
```
This may looks intimidating, but the only important thing for now is the `render()` function. The rest is boilerplate most of the time. Just like the stateless functional component, you must have a capitalized name.

The `Drinks` class inherits the `React.Component` class. The `constructor()` function is responsible to initialize the class. The `super()` functions means that it borrows the constructor function from its parent, which is `React.Component`. The `render()` function is called for DOM rendering.

To draw this component into DOM, we still use `ReactDOM.render()` to do it, but with a different syntax:
```jsx
let target = document.body;
ReactDOM.render(<Drinks />, target);
```
The components can be used as a custom HTML tag in JSX, which would be useful for the next part.

## Mix-and-match elements

As shown before, you can use components to make custom HTML tag in JSX. These tags would show whatever the `render()` function of the component returns. 

Also, as HTML tags, they can be nested 🤯!
```jsx
class Drinks extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>Coffee, Tea, and more!</h1>
    );
  }
};

const Menu = (props) => {
  return (
    <div>
      <Drinks />
      <p>Lorem Ipsum Dolor</p>
    </div>
);
```

Note that this custom HTML tags behave like others, so they are very flexible.

## Afterwords

Woohoo, I got a lot done today. This is a very good progress for me, and I'm proud of it. I hope others who are going through this to share my enthusiasm, and to keep going through it.

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!