ReactJS - Using Newly Created Components

Introduction

Hello there, future React developers! I'm thrilled to be your guide on this exciting journey into the world of React components. As someone who's been teaching computer science for years, I can tell you that understanding components is like learning to build with LEGO bricks – once you get the hang of it, you can create amazing things!

What Are React Components?

Before we dive into using components, let's understand what they are. Think of components as reusable building blocks for your user interface. Just like how you can use the same LEGO brick in different parts of your creation, you can use the same React component in various parts of your application.

Types of Components

React has two main types of components:

1. Function Components
2. Class Components

For this tutorial, we'll focus on function components, as they're simpler and more modern.

Creating Your First Component

Let's start by creating a simple component. We'll make a "Greeting" component that displays a welcome message.

function Greeting() {
  return <h1>Hello, React learner!</h1>;
}

This might look simple, but there's a lot going on here:

• We define a function called Greeting
• The function returns JSX (that HTML-like syntax)
• The JSX represents what will be rendered on the screen

Using Your Newly Created Component

Now that we have our Greeting component, let's use it in our app!

function App() {
  return (
    <div>
      <Greeting />
      <p>Welcome to our React tutorial!</p>
    </div>
  );
}

Here's what's happening:

• We have an App component (the main component of our application)
• Inside App, we're using our Greeting component
• We use components just like we would use HTML tags

When you run this code, you'll see "Hello, React learner!" followed by "Welcome to our React tutorial!"

Components with Props

Components become really powerful when we make them dynamic using props. Props are like parameters for your components.

Let's modify our Greeting component to accept a name:

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

Now, we can use it like this:

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

This will display:

Hello, Alice!
Hello, Bob!

Isn't that cool? We've created a reusable component that can greet different people!

Components with Multiple Props

Let's take it a step further and create a more complex component. We'll make a UserCard component that displays a user's information.

function UserCard(props) {
  return (
    <div className="user-card">
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Occupation: {props.occupation}</p>
    </div>
  );
}

Now we can use it like this:

function App() {
  return (
    <div>
      <UserCard name="Alice" age={28} occupation="Developer" />
      <UserCard name="Bob" age={35} occupation="Designer" />
    </div>
  );
}

Nesting Components

One of the most powerful features of React is the ability to nest components. Let's create a UserList component that uses multiple UserCard components:

function UserList() {
  return (
    <div>
      <h1>User List</h1>
      <UserCard name="Alice" age={28} occupation="Developer" />
      <UserCard name="Bob" age={35} occupation="Designer" />
      <UserCard name="Charlie" age={42} occupation="Manager" />
    </div>
  );
}

Now our App component can simply use the UserList:

function App() {
  return (
    <div>
      <Greeting name="React Learner" />
      <UserList />
    </div>
  );
}

Component Methods

Components can also have their own methods. Let's add a method to our UserCard component that calculates the birth year:

function UserCard(props) {
  const calculateBirthYear = () => {
    const currentYear = new Date().getFullYear();
    return currentYear - props.age;
  };

  return (
    <div className="user-card">
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Birth Year: {calculateBirthYear()}</p>
      <p>Occupation: {props.occupation}</p>
    </div>
  );
}

Conclusion

Congratulations! You've taken your first steps into the world of React components. We've covered creating simple components, using props, nesting components, and even adding methods to components.

Remember, practice makes perfect. Try creating your own components, experiment with different props, and see what you can build. Before you know it, you'll be constructing complex UIs with ease!

Here's a quick reference table of the components we've created:

Component Name	Props	Description
Greeting	name	Displays a greeting message
UserCard	name, age, occupation	Displays user information
UserList	None	Displays a list of UserCard components

Keep coding, keep learning, and most importantly, have fun with React!

Credits: Image by storyset