Back to Next JS Course

What are Components?

Components are reusable pieces of UI in React and Next JS. They help in building modular and maintainable code.

Types of Components

• Functional Components: JavaScript functions that return JSX.
• Class Components: ES6 classes that extend React.Component (less common in modern React applications).

Creating Functional Components

Simple Functional Component

const Greeting = () => {
  return <h1>Hello, World!</h1>;
};

export default Greeting;

Using a Component in a Page

import Greeting from '../components/Greeting';

export default function Home() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

Props

Props (short for properties) are a way to pass data from parent to child components.

Using Props

const Greeting = ({ name }) => {
 return <h1>Hello, {name}!</h1>;
};
export default Greeting;

Passing Props to a Component

import Greeting from '../components/Greeting';

export default function Home() {
 return (
   <div>
     <Greeting name="Praveen" />
   </div>
 );
}

Destructuring Props

Destructuring in Function Parameters:

const Greeting = ({ name }) => {
 return <h1>Hello, {name}!</h1>;
};

Destructuring Inside the Function:

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

Default Props

Setting Default Props:

Provide default values for props to ensure the component works even if no props are passed.

const Greeting = ({ name = "World" }) => {
 return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Prop Types

Type Checking with PropTypes:

Ensure that components receive props of the correct type.

import PropTypes from 'prop-types';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Greeting;

Children Props

Passing Children:

children is a special prop that allows you to pass components or elements between opening and closing tags of another component.

const Container = ({ children }) => {
  return <div className="container">{children}</div>;
};

export default Container;

Using the Container component:

import Container from '../components/Container';
import Greeting from '../components/Greeting';

export default function Home() {
  return (
    <Container>
      <Greeting name="Alice" />
    </Container>
  );
}

Lets see some examples,

User Card Component

const UserCard = ({ user }) => {
  return (
    <div className="user-card">
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
};

export default UserCard;

import UserCard from '../components/UserCard';

export default function Home() {
  const user = {
    name: "Praveen Oruganti",
    email: "praveenoruganti@gmail.com",
    phone: "123-456-7890",
  };

  return (
    <div>
      <UserCard user={user} />
    </div>
  );
}

Navigation Bar Component:

import Link from 'next/link';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

import '../styles/globals.css';
import Navbar from '../components/Navbar';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;