Day 2: ReactJS - Components and Props

Well well well, Now you are talking MAJOR things!!

Welcome to this Blog Series on ReactJS. We seen basic introduction and introduction to JSX previous day. Oh Yeah ! talking ablout previous day, here is the solution to the Practice Assignment Question from the end of the blog:

function App() {
  const name = 'John Doe';
  const hobbies = ['Coding', 'Reading', 'Gaming'];

  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <h2>My name is {name}</h2>
      <p>Here are my hobbies:</p>
      <ul>
        {hobbies.map(hobby => (
          <li key={hobby}>{hobby}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Let’s move on to Day 2, where we’ll dive into React components and props. This is a key part of understanding how React apps are structured and how data flows between components.

Component Types in React

As we know that for any React Applications, Components are its building blocks. These components are basically different UI parts which when combined together forms a complete product.

There are 2 types of components in React

Functional Components
Class Components

We will be covering Class Components on Day 3 Blog as it requires the use of Hooks. We will also be discussing basic differences between Functional and Class Components also on Day 3. In this blog, let us keep things for understanding Functional Components.

Functional Components

Functional Components are basically simple JavaScript functions which returns JSX. To present things simple, let us create a "Greeting.js" file.

function Greeting() {
  return <h1>Hello, World!</h1>;
}
export default Greeting;

In React, the export keyword is used to make code reusable and modular by sharing it across different parts of an application. It allows developers to expose functions, objects, values, classes, or React components from one file (module) so they can be used in other files.

This component named Greeting returns a simple heading of "Hello World!". This is the basic example of Functional Component. Now to use this in action inside our React App, you have to change some (I mean few) things in your "App.js".

In React terms, if you want to use this component in your app, you would import and render it inside another component, like App.js.

Here is how you can use Greeting Component in App.js.

import React from 'react';
import Greeting from './Greeting';  // Make sure Greeting.js is in the same directory as App.js

function App() {
  return (
    <div className="App">
      <Greeting />
    </div>
  );
}
export default App;

Here, the Greeting component is imported and used inside the App component. When you run your app, it should display "Hello, World!".

Passing Data with Props:

Props is a short-word for "Properties" in React.

Props are like passing arguments in React. We can make our React Application more dynamic and reusable with the use of Props. We pass the Props to React Components in the form of HTML attributes. Using HTML attributes, we are able to access and render necessary information.

Enough talk. Lets see Props live. We have to update "Greeting.js" a bit.

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

Here, props is an object that contains all the props passed to the Greeting component. {props.name} accesses the name prop and inserts it into the JSX.

Ok now it is the turn of "App.js"

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      <Greeting name="John" />
      <Greeting name="Jane" />
      <Greeting name="Doe" />
    </div>
  );
}

export default App;

Lets have a look at Output.

In this example, the App component passes different name values to each Greeting component. As a result it will display the values which we have passed to the components as props.

Okay, so in case basic foundation is clear, Lets try our hand in styling the things. As a part of our exercise, we will be making a simple profile card and then style it with some CSS.

Into the design:

So as per our discussion just now, let us build a simple profile card. It will contain the person's name, age and bio; as seen on social media. We will pass these 3 things as props using Functional Class as a concept.

Create a new file called "ProfileCard.js". This will be serving us as our component.

function ProfileCard(props) {
  return (
    <div className="profile-card">
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Bio: {props.bio}</p>
    </div>
  );
}
export default ProfileCard;

This component accepts name, age, and bio as props and displays them in a card format.

Lets modify "App.js" a bit.

import React from 'react';
import ProfileCard from './ProfileCard';

function App() {
  return (
    <div className="App">
      <ProfileCard name="John Doe" age={30} bio="Software developer with a love for React." />
      <ProfileCard name="Jane Smith" age={28} bio="Passionate about design and user experience." />
      <ProfileCard name="Alice Johnson" age={35} bio="DevOps engineer and cloud enthusiast." />
    </div>
  );
}
export default App;

So far, our output should look like this:

We are passing name , age and bio as props to ProfileCard Component. As seen in result it should be 3 profile card on the page.

Time for CSS. Create a file called "ProfileCard.css"

.profile-card {
    border: 1px solid crimson;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    background-color: wheat;
    width: 50%;
  }

  .profile-card:hover{
    background-color: lightcoral;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .profile-card h2 {
    margin-top: 0;
  }

Import this CSS into your React App by adding this line in App.js:

import './ProfileCard.css';   // Doing all these in src folder itself, so ./filename

Now your final App should look like this:

Just try hovering over cards for some good CSS effects.

As you can see, the data inside these profile cards are passed as prompts.

Homework Time:

Try creating a new component, ProductCard, that displays product information like name, price, and description.

Conclusion:

That’s it for Day 2! You’ve learned how to create and use functional components, pass data using props, and even style your components. Certainly we will look into more concepts in Day 3 such as Events and Hooks. But let progess only one step at a time.

Until then, Happy Coding / Hacking !!