Day 6: Meeting React

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:

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:

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.

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:

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:

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.)

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.

1. ES6 class syntax

Here's the syntax:

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:

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 🤯!

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!
Also on Twitter!