#100DaysOfCode Day 40: A Breather to React.js — The Basics

Hello, World!

Today, I will be taking another intermission from the current project I am working on to go over the basics of React.js. I realized that I have never really touched on the fundamentals of React. And so, today I will be going over concepts such as the following:

• What is a React component?
• ReactDOM rendering
• Class vs Functional Components
• JSX
• State

What is React?

React is a JavaScript library used to build user interfaces. It is known for being modular by letting users compose complex UIs from small and isolated pieces of code called “components”.

Example of a component-based user interface (freecodecamp.org)

In the picture above, we can separate the current user-interface into several different components. We have the Logo component, a WordBox for users to type in, a SearchButton to run the Google search, and a LuckyButton to automatically go to the first result of the search.

A React component is then individual code that represents a page; each component is a JavaScript function that returns a piece of code that represents a part of the website. And so, to build a page inside a website, we call these functions in a certain order, put together the results, and show it to the user via the browser. Something like building LEGO.

Let’s create a component! For this example, our component will be called OurFirstComponent. Here is the code:

const OurFirstComponent = () => {
  return (
    //Stuff to make
  )
};

Inside the //Stuff to make part of the code, we will be using JSX — JavaScript XML. JSX allows users to write HTML code inside their JavaScript components, which is usually an illegal move.

Now, whenever we call our OurFirstComponent component, we will render the JSX code embedded inside. To do this, we will be using a function called ReactDOM:

ReactDOM.render(<OurFirstComponent />, placeWeWantToPlace);

The first parameter for ReactDOM is the component we want to render, while the second is the location in which we want to render our component. The value of placeWeWantToPlace is usually document.getElementById('root');.

Putting Components Together

This is where the React magic happens. You can usually write code like the following:

const OurFirstComponent = () => {
  return(
    <p>My name is Cold Brew Code</p>
  )
};
//export OurFirstComponent

and merge it with another component:

function Container(){
  return(
    <h1>Hello, World</h1>
    <OurFirstComponent />
  )
};

Now, you can just render Container and it will automatically bring OurFirstComponent with it.

ReactDOM.render(<Container />, document.getElementById('root'));

This is how pages are built using React — by nesting components inside of each other.

Class Components

In the code snippets above, we have been writing components as functions, which are usually called as functional components. However, ever since ES6, people have begun to write components as JavaScript classes, which are called as class components.

class Container extends React.Component {
  render(){
    return(
      <h1>Hello, World</h1>
      <OurFirstComponent />
    )
  }
};

When using Class Components, you must include a render() function. The render function will return the JSX part of the component. To call another component, you can use the same method as you would in functional components: <AClassComponent />.

Here’s a Pro-Tip:

You should use functional components over class components because they’re easier to read unless you need a component that has states.

Utilizing JavaScript in JSX

You can also use JavaScript variables inside your JSX code like the following:

class Container extends React.Component {
  render(){
    const greeting = "Hello, World!";
    
    return(
      <h1>{ greeting }</h1>
      <OurFirstComponent />
    );
  }
}

You can also call functions inside your JSX!

class Container extends React.Component{
  render(){
    const addNumbers = (x, y) => {
      return x+y;
    };
 
    return(
      <p>The sum is: { addNumbers(6, 9) }</p>
      <OurFirstComponent />
    );
  }
}

The Component’s State

Class components can store data about their current state. This information can be saved inside the component’s state, which is stored in a JavaScript object.

In the code below, we have an object representing our component’s state. It has a key of isMusicPlaying which has a value of false. This object is assigned this.state in the constructor method, which is called when the class is first used.

class Container extends React.Componoent{
  constructor(props){
    super(props);
 
    this.state = {
      isMusicPlaying: false
    };
  }
  render(){
    return(
      <PlayButton />
    )
  }
};

The constructor method of a React component always needs to be called alongside super(props).

Now, a component’s state can update your UI based on certain events. In this example, we will use state to change the play button from isMusicPlaying: false to isMusicPlaying: true. In other words, we are changing the state of an arbitrary music player from paused to playing. So, when the user clicks on the button, the state should update and these changes should also be reflected on the UI.

We can use a conditional operator to determine the value of a component’s state. A conditional operator takes three operands: a condition followed by a question mark, then an expression to execute if the condition is true, followed by a colon if the expression is false.

const Container extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isMusicPlaying: false
    };
  }
  render(){
    const status = this.state.isMusicPlaying ? 'Playing' : 'Paused';
    return(
      <h1>{ status }</h1>
      <PlayButton />
    );
  }
}

In the render function, the this keyword is always referring to the component within.

Conclusion

Being able to self learn these kinds of things is really helpful, albeit being scary the first time (the thought of approaching a foreign concept is uncomfortable!) Nevertheless, we must always push ourselves to find the first principles in any subject.