React.js Basics

What Makes React Different

React is a JavaScript library for building user interfaces. Instead of directly manipulating the web page you see, React uses a clever trick to make things fast and efficient. To understand it, we first need to look at the DOM, or Document Object Model.

The DOM is a tree-like structure representing all the HTML elements on a page. When something needs to change, like when you click a button and a message appears, the browser has to update this DOM tree. Changing the DOM directly can be slow, especially for complex applications with lots of updates.

Imagine your web page is a massive, carefully arranged library. Changing one small part is like needing to find a single book, but instead of just swapping it, you have to rearrange the entire shelf it's on, and maybe even the whole aisle. It's a lot of work for a small change.

This is where React's Virtual DOM comes in. The Virtual DOM is a lightweight copy of the real DOM that exists only in memory. When you want to make a change, React first updates this virtual copy. This process is extremely fast because it's not touching the actual browser.

Then, React compares the new Virtual DOM with a snapshot of the Virtual DOM from before the update. This comparison process is called "diffing."

After finding the differences, React figures out the most efficient way to make only those specific changes to the real DOM. It batches these updates together and applies them all at once. Instead of rearranging the whole library shelf, it just swaps out the one book that changed. This makes the application feel much faster and more responsive.

Writing with JSX

When you write a React application, you don't write standard HTML. Instead, you use a special syntax called JSX, which stands for JavaScript XML. It lets you write HTML-like code directly inside your JavaScript files.

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

This might look like a string or HTML, but it's neither. It's JSX. Browsers don't understand JSX on their own. A tool called a transpiler (like Babel) converts your JSX into regular JavaScript that browsers can execute. The code above gets turned into something like this:

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

Writing React.createElement for every single element would be tedious. JSX is simply a more convenient and readable way to describe what your UI should look like.

One of the most powerful features of JSX is the ability to embed JavaScript expressions directly within it. You can do this by wrapping the expression in curly braces {}.

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

In this example, the rendered HTML will be <h1>Hello, Alice</h1>. You can put any valid JavaScript expression inside the curly braces: variables, function calls, or simple arithmetic.

Building with Components

The central idea in React is building your UI out of small, reusable pieces called components.

Components are the fundamental building blocks of any React application.

Think of components like LEGO bricks. You can create a simple component for a button, another for a user profile picture, and another for a navigation link. Then, you can combine these smaller components to build larger, more complex ones, like a navigation bar or a user profile card. Eventually, you assemble these larger components to form your entire application.

This approach keeps your code organized and easy to manage. If you need to change how a button looks, you only have to update the Button component, and that change will be reflected everywhere the button is used.

Here’s what a simple component looks like. It’s just a JavaScript function that returns some JSX.

function WelcomeMessage() {
  return <h1>Welcome to our app!</h1>;
}

To use this component, you would write it like an HTML tag: <WelcomeMessage />.

Making Components Dynamic

Static components are useful, but most applications need to handle dynamic data. In React, components get their data in two ways: through props and state.

Props

Props (short for properties) are used to pass data from a parent component down to a child component. They are like arguments you pass to a JavaScript function. Props are read-only, which means a child component should never change the props it receives. This ensures a predictable, one-way data flow.

// This component receives a 'name' prop
function WelcomeMessage(props) {
  return <h1>Hello, {props.name}</h1>;
}

// This is how you pass the prop to the component
const element = <WelcomeMessage name="Bob" />;

Here, the parent component passes the name "Bob" to the WelcomeMessage component. The child then uses this prop to render a personalized greeting.

State

State is data that is managed inside a component. While props are passed in from the outside, state is born and raised within the component itself. State is used for data that can change over time, like user input in a form, whether a dropdown menu is open, or items in a shopping cart.

When a component's state changes, React automatically re-renders the component to reflect the new data. This is the key to creating interactive UIs.

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

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

In this class component, count is a piece of state. Each time the button is clicked, we call this.setState() to update count. React then re-renders the component to display the new count. State should only be updated using the setState method; you should never modify it directly.

Think of it this way: props are for data that comes from above, and state is for data that the component itself owns and manages.

These are the core concepts of React. By understanding the Virtual DOM, JSX, components, props, and state, you have the foundation needed to start building powerful and interactive web applications.

Ace Your React Interviews