Basic ReactJS concepts for everyday development

Introduction to ReactJS

ReactJS, often simply called React, stands out as a pioneering JavaScript library in the realm of modern web development. Conceived by Jordan Walke, a software engineer at Facebook, it was first deployed on Facebook's newsfeed in 2011 and later on Instagram in 2012. React's creation stemmed from the need to build user interfaces that could dynamically update with changing data without requiring a full page reload—a common limitation in web applications of the past.

The essence of React lies in its virtual DOM (Document Object Model) system, enabling developers to create highly responsive and efficient web applications. By only updating parts of the page that need to change, React drastically reduces the amount of work needed to keep the UI in sync with the underlying data states, making for a smoother user experience.

React's importance in web development cannot be overstated. It's not just a tool for creating dynamic and fast-loading web pages; it represents a shift towards component-based architecture in web development. This approach allows developers to break down complex UIs into smaller, reusable components, fostering better organization, maintainability, and scalability of code.

As we delve deeper into ReactJS concepts, you'll see how its design principles and features make it an indispensable tool for developers looking to craft modern web applications that are both powerful and user-friendly.

This introduction sets the stage for our deep dive into ReactJS's fundamental concepts, each of which plays a critical role in leveraging React's full potential in everyday development. In the following sections, we'll explore these concepts in detail, starting with setting up your development environment to get your first React application off the ground.

Setting Up the Development Environment

Before diving into the practical aspects of ReactJS, it's crucial to set up a development environment that enables you to write, test, and debug your React applications efficiently. This process involves installing a few essential tools and creating your first React project. Let's walk through these steps to get you started.

Prerequisites

The primary tool you'll need is Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js comes with npm (Node Package Manager), which you'll use to manage your project's dependencies.

1. Install Node.js and npm: Visit the official Node.js website to download and install the version of Node.js recommended for most users. This installation will also include npm, which you can verify by running node -v and npm -v in your terminal to check the installed versions.
2. Code Editor: While you can write React code in any text editor, using a code editor like Visual Studio Code (VS Code) enhances your development experience with features like syntax highlighting, auto-completion, and direct integration with Git.

Creating a New React Project

With Node.js and npm installed, you can now create a new React project using Create React App (CRA), a bootstrapping tool maintained by Facebook that sets up a new React project with sensible defaults.

Install Create React App: Open your terminal and run the following command to install Create React App globally on your machine:
npm install -g create-react-app

Create Your React Project: Navigate to the directory where you want to create your project and run:
npx create-react-app my-react-app

2. Replace my-react-app with your desired project name. This command creates a new directory with your project name, installs the necessary dependencies, and sets up a basic React project structure.

Start the Development Server: Change into your project's directory:
cd my-react-app

and start the development server with:
npm start

3. This command runs the app in development mode, opens your default web browser, and navigates to http://localhost:3000, where you can see your new React application running.

Familiarizing Yourself with the Project Structure

Your new React project comes with a predefined structure. The most important files and directories include:

• public/index.html: The single HTML file where your React app will be rendered.
• src/index.js: The JavaScript entry point for your React application.
• src/App.js: A basic React component that serves as the starting point for your app.

At this point, you've successfully set up your development environment and created a new React project. You're now ready to start exploring React's capabilities, beginning with understanding and using JSX in your applications.

Understanding JSX

JSX stands for JavaScript XML. It is a syntax extension for JavaScript recommended by the React team, which allows you to write HTML elements in JavaScript and place them in the DOM without using functions like createElement() or appendChild(). This section will explore JSX, its syntax, and how it compares to traditional HTML, providing the foundation you need to start building React components.

What is JSX?

JSX allows you to write HTML tags directly within JavaScript code. It looks like a template language, but it comes with the full power of JavaScript. JSX gets compiled into React.createElement() calls which render the specified HTML elements in the React virtual DOM. This process is generally handled by JavaScript bundlers like Webpack or Babel.

Basic Syntax

A basic JSX expression looks like this:

const element = <h1>Hello, world!</h1>;

Here, element is not a string or HTML. It's a JSX expression that represents a DOM node. JSX tags have a tag name, attributes, and children, just like HTML.

Embedding Expressions in JSX

You can embed any JavaScript expression in JSX by wrapping it in curly braces {}. For example:

const name = 'React Developer';
const element = <h1>Hello, {name}</h1>;

‍
This renders "Hello, React Developer" in the DOM.

JSX vs. HTML

JSX is similar to HTML, but there are a few key differences:

• Attribute Names: JSX uses camelCase property naming convention instead of HTML attributes. For example, class becomes className in JSX, and tabindex becomes tabIndex.
• JavaScript Expressions: As mentioned, JSX allows you to embed JavaScript expressions directly within your markup, which is not possible in plain HTML.
• JSX is an Expression: Every JSX element is just syntactic sugar for React.createElement(), meaning you can use JSX anywhere you can use JavaScript expressions.

Advantages of JSX

• Visual Structure: JSX clearly represents the UI that will appear in the application, making the code easier to understand and debug.
• Enhanced Development Experience: Most code editors support JSX syntax highlighting and auto-completion, improving developer productivity.
• Optimization: JSX expressions can be optimized at compile time, leading to faster runtime performance.

Example: A Simple Component

Here's how you might define a simple React component using JSX:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single "props" (which stands for properties) object argument and returns a JSX expression. It renders an <h1> element with a greeting that includes the name passed to the component.

Conclusion on JSX

JSX is a powerful syntax extension for JavaScript that allows developers to write their React components in a way that is visually and syntactically similar to HTML, but with the full power of JavaScript. This makes the code easier to read and write, while also providing a more intuitive bridge between the UI and the underlying React component logic.

Components and Props

React's architecture is centered around components and props. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Props (short for "properties") are read-only data passed from a parent component to a child component. This section will cover the basics of creating components, the difference between functional and class components, and how to use props.

What are Components?

In React, components are the building blocks of your application's UI. They describe what should appear on the screen when your app interacts with the user. Each component can be as simple as a button or as complex as an entire app itself.

There are two main types of components in React:

1. Functional Components: Also known as Stateless components, they are JavaScript functions that return JSX. They accept props as an argument and return what should be rendered.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. Class Components: These are more feature-rich than functional components. They are defined by extending React.Component and require a render method that returns JSX. Class components can maintain their own internal state.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Using Props

Props are how components talk to each other. They let you pass data from a parent component to a child component, making your components reusable and dynamic.

Props are read-only. If you need to modify the data received from a parent component, you should use state instead (which we'll cover in the next section).

Here's how you might pass a prop to the Welcome component:

function App() {
  return <Welcome name="React Developer" />;
}

In this example, "React Developer" is passed as a prop to the Welcome component, which then uses it to render "Hello, React Developer".

Composing Components

Components can refer to other components in their output. This lets you create complex UIs from simple, isolated pieces. Here's an example of how components can be composed:

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

This App component renders three Welcome components with different names, showcasing the power of composition in React.

Best Practices

• Single Responsibility Principle: Ideally, a component should only do one thing. If it grows too large, it should be decomposed into smaller subcomponents.
• Pure Components: Components should be pure, meaning their output should only depend on their props and state.

Conclusion on Components and Props

React's component-based architecture offers a robust and intuitive method of building web applications. By understanding components and props, you're equipped to start designing and developing modular and maintainable UIs. The next crucial concepts to grasp are state and lifecycle methods, which add interactivity and lifecycle management to your components.

State and Lifecycle

In React, state and lifecycle methods offer a way to add interactive and dynamic behavior to your components. Understanding these concepts is crucial for creating components that react to user input, server responses, or any other form of changing data.

What is State?

State is an object that determines the behavior of a component and how it renders. Unlike props, which are passed to a component from its parent and are immutable within the component, state is managed within the component itself. It can be changed over time in response to user actions, network responses, etc.

Using State in Class Components

In class components, the state is often initialized in the constructor and accessed via this.state:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // State with initial count set to 0
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Using State in Functional Components with Hooks

React introduced Hooks in version 16.8, allowing functional components to use state and other React features without writing a class. The useState hook adds local state to functional components:

import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Component Lifecycle

In React, each component has a lifecycle that you can monitor and manipulate during its three main phases:

1. Mounting: When a component is being created and inserted into the DOM.
2. Updating: When a component is being re-rendered as a result of changes to either its props or state.
3. Unmounting: When a component is being removed from the DOM.

Lifecycle Methods in Class Components

Class components have several lifecycle methods that are called in specific stages of the lifecycle:

• componentDidMount(): Called after the component is mounted to the DOM. It’s a good place to initiate API calls if you need to load data from a remote endpoint.
• componentDidUpdate(prevProps, prevState, snapshot): Called after the component updates. It’s useful for responding to changes in props or state.
• componentWillUnmount(): Called just before the component is unmounted and destroyed. It’s useful for cleaning up timers, cancelling network requests, or removing event listeners.

Hooks in Functional Components

Hooks provide similar capabilities for functional components without lifecycle methods:

• useEffect: Serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Conclusion on State and Lifecycle

State and lifecycle methods/hooks are fundamental for creating dynamic and interactive React applications. They allow your components to respond to user input, server responses, and more. Understanding how to manage state and utilize lifecycle methods/hooks is crucial for developing sophisticated applications in React.

Handling Events

Handling events in React is similar to handling events on DOM elements, but there are some syntax differences and specific patterns you should be aware of. React events are named using camelCase, rather than lowercase, and with JSX you pass a function as the event handler, rather than a string.

Basic Event Handling

In React, you can add event handlers to elements such as buttons, forms, or inputs using the React event system. Here’s a simple example of an event handler in a React component:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

In this example, handleClick is the event handler function that gets called when the link is clicked. Notice how we call e.preventDefault() to prevent the default action of the link (which is to navigate to the URL specified in the href attribute).

Using this in Event Handlers

In class components, the common pattern is to bind an event handler to the component instance to make the this keyword work correctly in callbacks. There are a few ways to do this:

• Binding in the Constructor: This is a common pattern and ensures this binds correctly within your callback:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

• Class Fields Syntax: If you're using class fields syntax, you can use class fields to correctly bind callbacks:

class Toggle extends React.Component {
  state = {isToggleOn: true};

  // This syntax ensures `this` is bound within handleClick.
  handleClick = () => {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Passing Arguments to Event Handlers

Sometimes you might need to pass an extra parameter to an event handler. This can be done by using an arrow function or the bind method:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Both lines inside the render method are equivalent, and use arrow functions and Function.prototype.bind respectively to pass arguments.

Conclusion on Handling Events

React’s event handling system provides a consistent way to handle user interactions across different browsers. Understanding how to bind event handlers to class components and use them in functional components with hooks is essential for creating interactive React applications.

Conditional Rendering

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

Using if Statements

Just like in JavaScript, you can use if statements to perform different actions based on different conditions. For example, consider two components, UserGreeting and GuestGreeting, which are rendered based on the user's login status:

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

Element Variables

You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn’t change. For example:

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        {button}
      </div>
    );
  }
}

Using the Logical && Operator

If you want to render something based on a condition, you can use {condition && expression} which works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

Using the Conditional (Ternary) Operator

Another method for conditional rendering in React is to use the JavaScript conditional operator condition ? trueExpression : falseExpression:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Conclusion on Conditional Rendering

Conditional rendering in React allows you to render different components or elements based on the state of your application. It's a powerful feature that makes your app more interactive and dynamic, enabling you to respond to user input and changes in application state effectively.

Lists and Keys

Rendering lists of elements in React involves creating multiple components from an array of data. When rendering a list, React needs to identify each element uniquely to provide efficient updates. This is where keys come into play, serving as a hint to React about the identity of each element in a list.

Rendering Multiple Components

You can build collections of elements and include them in JSX using curly braces {}. For example, if you have an array of numbers and you want to double each number and render the result, you can do so with the map() function:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

To render a list of numbers in React, you can embed the result of calling map() on an array inside a JSX expression:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

Basic List Component

You can refactor the previous example into a component that accepts an array of numbers as a prop and outputs a list of elements:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Keys

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often, you would use IDs from your data as keys:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Extracting Components with Keys

Keys only make sense in the context of the surrounding array. For example, if you extract a ListItem component, you should keep the key on the <ListItem /> elements in the array, not on the <li> element in the ListItem itself:

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>{listItems}</ul>
  );
}

Keys Must Only Be Unique Among Siblings

Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays:

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

Conclusion on Lists and Keys

Understanding how to render lists and use keys is fundamental in React, especially when dealing with dynamic content. Proper use of keys improves the performance of your app and helps avoid common pitfalls in rendering lists of elements.

Forms and Controlled Components

In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components and only updated with setState().

Controlled Components

In a controlled component, the React state is the "single source of truth". This means that the form data is handled by the state within the React component. The React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

The textarea Tag

In HTML, a <textarea> element defines its text by its children. In React, a <textarea> uses a value attribute instead. This way, a form using a <textarea> can be written very similarly to a form that uses a single-line input:

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

The select Tag

In HTML, <select> creates a drop-down list. Like the <input> and <textarea> tags, it's also written using the value attribute in React so that the form select is a controlled component:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Handling Multiple Inputs

When you need to handle multiple controlled input elements, you can add a name attribute to each element and let the handler function choose what to do based on the value of event.target.name:

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

Conclusion on Forms and Controlled Components

React's controlled component approach for managing form data offers a streamlined way to handle user input in a way that is consistent with React's approach of state management. This approach facilitates the integration of form data into the rest of your application's state management flow, making it easier to respond to user input changes and validate form data.

Lifting State Up

In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This process is known as "lifting state up." We often find several components need to reflect the same changing data. We can lift the shared state up to their closest common ancestor. Let's explore how and why to lift state up in your React applications.

Why Lift State Up?

Consider two components that need to reflect the same changing data, such as a TemperatureInput component that allows users to input temperature in either Celsius or Fahrenheit. If you have two separate inputs for these and want to keep them in sync (e.g., when you update the Celsius input, the Fahrenheit input should update accordingly), you need a way for them to share and manage state.

The React way to solve this problem is to find their closest common parent component and move the state up to it. This way, the parent becomes the "source of truth" for the shared state, and it can pass the state back down to the children via props. This keeps the child components in sync with each other and with the parent's state.

How to Lift State Up

1. Move the state to the common ancestor: Identify the closest common ancestor of the components that need the shared state. Move the state to this ancestor.
2. Replace the local state with props: In the components that previously owned the local state, replace the state with props received from the ancestor. These components will now receive the state as props from the ancestor.
3. Use callbacks to sync changes: To keep the components in sync, the ancestor will pass callbacks to the components that modify the state. These callbacks are used by the child components to update the ancestor's state.

Example

Let's consider a simple example with two components, ChildA and ChildB, which both need to display the same data and have the ability to update it:

1. Initial Setup (Before Lifting State Up):

function ChildA() {
  const [data, setData] = useState('Initial Data');
  // Component logic...
}

function ChildB() {
  const [data, setData] = useState('Initial Data');
  // Component logic...
}

2. Lifting the State Up:

Move the state to their common parent, ParentComponent, and manage the data there:

function ParentComponent() {
  const [data, setData] = useState('Initial Data');

  return (
    <>
      <ChildA data={data} setData={setData} />
      <ChildB data={data} setData={setData} />
    </>
  );
}

function ChildA({ data, setData }) {
  // Component logic using data and setData...
}

function ChildB({ data, setData }) {
  // Component logic using data and setData...
}

Now, ParentComponent manages the state and passes it down to ChildA and ChildB as props. The setData function is also passed down so that the child components can update the state, which is then reflected in both child components.

Advantages of Lifting State Up

• Consistency: Ensures that the shared state is consistent across all components that depend on it.
• Centralization of state logic: Helps in managing and debugging state changes since the state logic is centralized in a single location.
• Reusability and separation of concerns: Components become more reusable and focused on their own logic rather than managing shared state.

Conclusion on Lifting State Up

Lifting state up is a useful pattern in React for managing shared state across multiple components. It involves moving the state to the closest common ancestor of the components that need it, thus centralizing the state management and keeping the components synchronized.

Composition vs Inheritance

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. In this section, we'll explore why composition is preferred over inheritance in React and how you can use it to solve common problems.

Why Composition?

Composition refers to the practice of assembling objects to obtain new functionality. React components can contain other components in their output, a principle that applies well for a variety of problems in component logic and UI. In contrast, inheritance involves creating a class hierarchy where subclasses inherit behavior from their parent classes. While inheritance can be useful in traditional object-oriented programming, React's composition model offers a more flexible way to reuse code and manage component hierarchies.

Containment

Some components don't know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic "boxes". We recommend using the special children prop to pass children elements directly into their output:

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

Specialization

Sometimes we think about components as being "special cases" of other components. For example, we might say that a WelcomeDialog is a special case of Dialog.

In React, this is also achieved through composition, where a more "specific" component renders a more "generic" one and configures it with props:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

Composition Works Well for Customized Components

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. Components may import it and use that function, object, or a class, without extending it.

Conclusion on Composition vs Inheritance

React's composition model provides a cleaner and more straightforward way to build component trees and reuse code, compared to an inheritance hierarchy. It encourages building simple, isolated components that can be combined to create complex UIs, aligning with the overall React philosophy.

By embracing composition and understanding its benefits over inheritance, developers can create more flexible, maintainable, and scalable React applications.

Using External Data

React components can interact with external data sources, such as APIs or databases. Managing external data involves fetching data, displaying it in your components, and updating your UI based on data changes. This section will guide you through fetching data from an API and integrating it into your React application.

Fetching Data from an API

The most common side effect in React apps is data fetching. React provides lifecycle methods in class components and hooks in functional components for handling side effects, including data fetching.

In Class Components: Using componentDidMount

componentDidMount is a lifecycle method that gets called right after a component is added to the DOM. It's a perfect place to fetch data:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
      error: null,
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });

    fetch('https://api.example.com/data')
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error('Network response was not ok.');
      })
      .then((data) => this.setState({ data, isLoading: false }))
      .catch((error) => this.setState({ error, isLoading: false }));
  }

  render() {
    const { data, isLoading, error } = this.state;

    if (error) {
      return <p>{error.message}</p>;
    }

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    );
  }
}

In Functional Components: Using useEffect

The useEffect hook lets you perform side effects in function components. It's suitable for data fetching, setting up a subscription, and manually changing the DOM:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    fetch('https://api.example.com/data')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok.');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setIsLoading(false);
      })
      .catch((error) => {
        setError(error);
        setIsLoading(false);
      });
  }, []); // The empty array ensures this effect runs only once after the initial render

  if (error) {
    return <p>{error.message}</p>;
  }

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

Handling Loading and Error States

When fetching data, it's important to handle the loading state and display any potential errors to the user. This involves setting state flags like isLoading and error and using them to conditionally render UI elements, as shown in the examples above.

Conclusion on Using External Data

Fetching data from an API and integrating it into React components is a common requirement for many applications. By utilizing lifecycle methods like componentDidMount in class components or hooks like useEffect in functional components, you can effectively manage external data. Handling loading and error states ensures a smooth user experience, even when network requests are slow or fail.

Conclusion

Throughout this comprehensive journey into the world of ReactJS, we've uncovered the foundational pillars that make React a powerful and popular library for building user interfaces. Starting from the basic setup, JSX syntax, and the anatomy of React components, we ventured through the dynamic realms of state and props, understanding their pivotal roles in creating interactive and responsive applications. We delved into the intricacies of handling events, rendering lists, managing forms, and the essential practices of lifting state up and leveraging composition over inheritance, all of which are fundamental to crafting well-structured React applications.

React's design and development philosophy emphasize declarative UIs, component-based architecture, and efficient data management, enabling developers to build complex, high-performance web applications with minimal coding overhead. The insights into fetching and managing external data further illustrate React's capabilities in handling real-world, data-driven applications that are both scalable and maintainable.

As we wrap up this exploration, it's clear that ReactJS offers a rich ecosystem and a robust framework for developers to bring their creative visions to life. The journey doesn't end here, though. The React landscape is continually evolving, with an active community and ongoing developments that promise new features, optimizations, and best practices.

Whether you're just starting out or looking to deepen your understanding of React, the path is lined with resources, tutorials, and community support to guide your learning journey. Experiment with what you've learned, contribute to projects, and engage with the React community. Remember, the best way to solidify your understanding of React and its concepts is by building projects, facing challenges, and finding solutions.

Thank you for joining me on this enlightening journey through ReactJS. Here's to creating inspiring and innovative web applications with React!

Read more resources ReactJS concepts

• Basic ReactJS concepts for everyday development
• 18 common React errors and a comprehensive guide on React error handling
• 13 best React debugging tools
• React Debugger for Bug Tracking & Resolution | Zipy AI
• Troubleshooting "window is not defined" Error in React Applications
• Navigating React Router: A Guide for Developers
• Mastering Loops in React: A Developer's Guide to Efficient Dynamic Content Rendering
• React Rerendering: Beyond setState
• The Foundation of React Props
• Unpacking Magic: Mastering the React Spread Operator