Web Programming for Apps and Services

Welcome to our journey into the world of React components, JSX, and hooks! In this blog post, we'll break down the basics of React and explore how to create components, use JSX, and harness the power of hooks. Let's dive right in.

React Components

Components are the building blocks of web applications in React. Think of them as reusable pieces of your web page. They can range from simple elements like buttons to complex sections of a webpage. In React, components are defined as JavaScript functions, and they determine what should appear on your webpage.

Functional Components

One type of component in React is the functional component, defined as a JavaScript function. Let's take a look at an example:

import React from 'react';

function Hello(props) {
  return <p>Hello, {props.name}!</p>;
}

In this example, Hello is a functional component that accepts a name prop and displays a greeting. You can use this component by including it in your JSX code like this:

<Hello name="John" />

JSX: JavaScript + XML

In the world of React, you'll often come across JSX. JSX is a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files. It's used to describe what the UI should look like and is a fundamental part of React development.

Here's a brief overview of JSX:

• JSX elements look like HTML tags, but they are JavaScript objects.

• You can embed JavaScript expressions within curly braces {} in JSX.

• JSX elements must have a single root element.

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

In this example, the Greeting component uses JSX to render a greeting message with a dynamic name prop.

Creating Your Own Components

Now that you've seen how to use functional components and JSX, let's create our own custom component. We'll call it Hello and have it display a simple "Hello World!" message.

// hello.js
function Hello() {
  return <p>Hello World!</p>;
}

With our Hello component defined, we can use it within our application:

// index.js
import Hello from '@/components/Hello';

export default function Home() {
  return (
    <Hello />    
  )
}

Hooks: Managing State and Side Effects

React introduced hooks in version 16.8, allowing functional components to manage state and side effects. One commonly used hook is useState, which enables you to add state to your components.

Adding State with useState

Let's enhance our Hello component by adding a dynamic greeting message using useState. First, import useState from React:

import React, { useState } from 'react';

function Hello() {
  const [message, setMessage] = useState('Hello World!');

  return (
    <div>
      <p>{message}</p>
    </div>
  );
}

In this example, we initialize the message state with the default value 'Hello World!'. We also get a function setMessage that allows us to update the state. This state will re-render the component whenever it changes.

useEffect: Managing Side Effects

Another important hook is useEffect, which helps manage side effects like data fetching, subscriptions, or manual DOM manipulation.

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

function Clock(props) {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalID = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(intervalID);
    };
  }, []);

  return (
    <div>
      <p>Locale: {props.locale}: {time.toLocaleTimeString(props.locale)}</p>
    </div>
  );
}

In this Clock component, we use useEffect to update the time every second. When the component mounts, it starts an interval to update the time. When the component unmounts, it cleans up by clearing the interval.

Conclusion

React components, JSX, and hooks are essential tools in building modern web applications. Components allow you to create reusable UI elements, JSX makes it easy to describe your user interface, and hooks provide state and side effect management.

As you continue your React journey, you'll discover even more powerful features and patterns to create interactive and dynamic web applications. Happy coding!