Unlocking the Power of ReactJS: A Modern Approach to Frontend Engineering and Development (EP. 2)

The Core Concepts of ReactJS

"ReactJS has fundamentally changed the way we build web applications, offering a declarative, component-based approach that simplifies development and enhances performance." – React Documentation

In Episode 1, we discussed the growth of frontend programming, the importance of selecting the correct framework, and why ReactJS is becoming popular. In this episode, we'll go over the core concept of ReactJS

In the rapidly evolving realm of software development, ReactJS stands out as the premier toolkit for crafting dynamic and efficient user interfaces. This article, the second in our series on Unleashing the Power of ReactJS, delves deep into the fundamental building blocks that drive this potent tool: components and JSX, state and props, and lifecycle methods.

Components and JSX

Explanation of Components

The core of ReactJS revolves around the idea of components. In React, a component is a self-contained and reusable piece of code that defines a specific part of the user interface. Components serve as the building blocks of a React application, enabling developers to decompose intricate UIs into more approachable parts.

components contains it own data, logic and appearance, components can be reused and nested inside each other, we build complex UIs by building multiple components and combining them

There are two main types of components in React: functional components and class components. Functional components are JavaScript functions that return JSX, while class components are ES6 classes that extend the React.Component class.

// Functional Component 
function Welcome () {
     return <h1> Hello! You are welcome to my page ! </h1>
}


// Class Component
class Welcome extends React.Component {
    render () {
         return <h1>Hello! You are welcome to my page !</h1>   
     }        

Introduction to JSX Syntax

Since component is a piece of UI, we must be able to describe what the component look like, that is where JSX comes in.

JSX is a declarative syntax to describe what the component look like and how they work base on their dat logic and appearance, component must return a block of JSX.

JSX, which stands for JavaScript XML, is a syntax extension for JavaScript that enables developers to write code that looks similar to HTML within their JavaScript files. This makes the code more readable and easier to write because it combines the user interface and logic in a single location.

Here is an example of JSX:

const myElement = <h1> Hello, there </h1>;        

JSX might resemble HTML, but it is actually transformed into JavaScript objects using tools like Babel. This transformation enables React to efficiently update and render the UI by utilizing a virtual DOM.

What does it mean when we say JSX is declarative ?

When we say JSX is declarative, we mean that it allows developers to clearly and straightforwardly describe what the UI should look like, focusing on the "what" rather than the "how." This is in contrast to an imperative approach, where developers would need to specify step-by-step instructions to achieve the desired UI.

Here's a deeper dive into what this means:

1.Descriptive Nature: JSX lets you describe the desired outcome directly in a way that resembles HTML. For instance, you can write:

//This code clearly describes that the UI should contain an <h1> element with the text "Hello, how are you today?"

const myElement = <h1> Hello, how are you today? </h1>;        

2. Readability and maintainability: Declarative code is typically easier to read and maintain. Other developers, or even your future self, can quickly understand the structure and intent of the code without needing to follow procedural steps.

3. Abstraction of Implementation Details: When using JSX, you don’t need to manually create elements and append them to the DOM. You just specify the structure and content, and React handles the underlying operations. This simplifies development and reduces the likelihood of errors:

const myElement = <div className="container">
                  <h1> Hello, how are you doing today? </h1>
                  <p> Welcome to the React world. </p>
                </div>;        

4. Reactivity and Updates: Due to its declarative nature, React can efficiently update the UI to fit the current state. When a component's state or props change, React re-renders it to reflect the changes, eliminating the need for manual DOM manipulation.

For example, consider this imperative approach to creating a DOM element (without JSX and React):

const element = document.createElement('h1');
element.textContent = 'Hello, world!';
document.body.appendChild(element);        

Versus the declarative approach with JSX:

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));        

State and Props

Managing State in React

React components come with a built-in object called State, which allows them to store and manage dynamic data. State is changeable, allowing components to be interactive and responsive to user input.

To manage state in a class component, you initialize it in the constructor and update it using the setState method:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment </button>
      </div>
    );
  }
}
        

In functional components, the useState hook is used to manage state:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
        

Passing Data with Props

Props (short for properties) are used to transfer data from one component to another. Props are read-only and immutable, therefore data flow in React is one-way, from parent to child components.

Here’s an example of passing props:

//Add a "brand" attribute to the Laptop element

const someThingUseful = <Laptop brand = "Macbook air"  />;

//The component receives the argument as a props object
//Use the brand attribute in the component

function Laptop (props) {
   return <h1>Kindly bring the {props.brand}</h1>
}        

Lifecycle Methods

Overview of Component Lifecycle

Every React component undergoes three phases in its lifecycle: mounting, updating, and unmounting. React provides lifecycle methods for developers to execute code at specific points in these phases.

Commonly Used Lifecycle Methods

1. componentDidMount(): When a component is mounted, this function is called immediately afterward. It is used for getting things set up, like making network requests or preparing subscriptions, that rely on DOM nodes

 class MyComponent extends React.Component {

  componentDidMount() {

    // Fetch data or set up subscriptions

  }

}
        

2. componentDidUpdate(prevProps, prevState): After the component updates, componentDidUpdate() is used to make changes to the DOM once the component has been re-rendered.

class MyComponent extends React.Component {

  componentDidUpdate(prevProps) {

    if (this.props.data !== prevProps.data) {

      // Perform actions based on prop changes

    }

  }

}
        

3. componentWillUnmount(): Before a component is unmounted and destroyed, this method is invoked to clear out resources such as timers and network requests.

class MyComponent extends React.Component {

  componentWillUnmount() {

    // Clean up resources

  }

}
        

In functional components, the useEffect hook can be used to mimic these lifecycle methods:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // ComponentDidMount logic

    return () => {
      // ComponentWillUnmount logic
    };
  }, [ ] );

  return <div>My Component</div>;
}
        

Conclusion

Mastering the core concepts of ReactJS Components and JSX, State and Props, and Lifecycle Methods is essential for developers aiming to construct efficient and dynamic web applications. By honing these key principles, developers can craft user interfaces that are both reusable and high-performing, while also being easy to maintain.

What are your experiences with ReactJS? Do you have any tips or insights on mastering these core concepts? Share your thoughts in the comments below, and let's start a conversation!

Stay tuned for our next article, where we will dive into advanced ReactJS features and best practices to take your development skills to the next level.

If you enjoyed this article and found it helpful, follow me on LinkedIn for more insights and updates on web development and ReactJS. Feel free to connect and share your feedback!

Thank you for taking the time to read this article. Your engagement and support mean a lot. Keep coding and keep innovating!

#ReactJS #FrontendDevelopment #WebDevelopment #JavaScript