Intro to React Components and props

Introduction to React Components

Understanding Components and Props

What are React components?

• React apps are made out of components.

• A component is a piece of the UI (user interface) that has its own logic and appearance.

• A component can be as small as a button, or as large as an entire page.

​https://react.dev/learn/your-first-component

How to create a component?

In Command-line interface (CLI), run the following command:

npx generate-react-cli component {MyComponent}

Component

Examples:

• MyButton

• TableOfContent

• Profile

• Footer
  

React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!

Component

function MyButton() {

return (

<button>Click</button>

);

}

A React component typically returns JSX. When your JSX markup spans multiple lines, it should be enclosed in parentheses to ensure proper rendering.

Using a Component

function MyButton() {

return (

<button>Click</button>

);

}

function App() {

return (

<div>

<MyButton />

</div>

);

}

Now that you’ve defined your component, you can nest it inside other components. It can be utilized multiple times to enhance reusability!

Components in different files

You can use export and import to use components in different files

function MyButton() {

return (

<button>I'm a button</button>

);

}
export default MyButton;

import MyButton from './MyButton';
function App() {

return (

<div>

<MyButton />

</div>

);

}

Passing Props to a Component

In React, components employ props (short for properties) for inter-component communication.

Parent components can share data with their child components passing data from one component to another.

Passing Props to a Component

Scenario: Blog Post

Imagine you're creating a blog application, and you want to build a component for displaying individual blog posts.

You want to make this component reusable so that it can display different blog posts with varying titles, authors, and content.

Step 1) Passing props to the child component

• In this example, we import the BlogPost component and use it within the App component to display a blog post.

• The App component passes three props: title, author, and content to the BlogPost component.

import BlogPost from './BlogPost';

function App() {

return (
<div>

<BlogPost

title="How to Use React Props"

author="John Doe"

content="Explore how to use props">

</div>
);
}

Step 2) Reading props inside the child component

• In this example, we specify that our BlogPost component will receive a prop called props.

• We will utilize the data provided by the props object, extracting the `title`, `author`, and `content` from it for displaying in our BlogPost component.

//BlogPost Component
function BlogPost(props) {

return (

<div>

<h2> {props.title} </h2>

<p>By {props.author}</p>

<p>{props.content}</p>

</div>

);

}

export default BlogPost;

Scenario: Blog Post

In this scenario, you can use React props to pass the specific information for each blog post to the component.

//BlogPost Component
function BlogPost(props) {

return (

<div>

<h2> {props.title} </h2>

<p>By {props.author}</p>

<p>{props.content}</p>

</div>

);

}

export default BlogPost;

import BlogPost from './BlogPost';

function App() {

return (
<div>

<BlogPost

title="How to Use React Props"

author="John Doe"

content="Explore how to use props" />

<BlogPost

title="Creating Reusable Components"

author="Jane Smith"

content="Learn to reuse Components"/>

</div>);}

export default App;

Multiple Choice

What is the primary purpose of React components?

• To define and render user interface elements.

• To style HTML elements.

• To store data.

• To manage server-side logic.

Multiple Choice

In React, which of the following represents the correct way to pass data from a parent component to a child component?

• Using the state property.

• Using the parent attribute.

• Using the props property.

• Using the this keyword.

Multiple Choice

What is the key benefit of using props in React components?

• To define CSS styles for components.

• To manage internal component state.

• To access the DOM directly.

• To enable communication between parent and child components.

Multiple Choice

Which of the following defines a functional React component called HelloWorld that renders "Hello, World!" to the screen?

• const HelloWorld = () => {

  return (

  <div>

  <h1>Hello, World!</h1>

  </div>

  );

  }

• class HelloWorld extends React.Component {

  render() {

  return (

  <div>

  <h1>Hello, World!</h1>

  </div>

  );

  }

  }

• function HelloWorld() {

  return (

  <div>

  <h1>Hello, World!</h1>

  </div>

  );

  }

• <h1>Hello, World!</h1>

Multiple Choice

What is the correct way to pass a prop called title with the value "Hello, React!" to a React component named MyComponent?

• <MyComponent title="Hello, React!" />

• <MyComponent {title="Hello, React!"} />

• <MyComponent props={title: "Hello, React!"} />

• <MyComponent "Hello, React!" />

Multiple Choice

In a React component, how can you access a prop named message and display it within the component?

• props.message

• const {props.message}

• this.props.message

• {props.message}

Summary

In this lesson, you have learnt:

• What are React components

• How to create a component

• How to nest a component

• How to use a component in multiple files

• What are React Props

• How to use Props to pass data from parent to child components

• How to read props inside the child component