Intro to React Components and props

• 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

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

npx generate-react-cli component {MyComponent}

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!

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.

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!

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>

);

}

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.

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.

• 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>
);
}

• 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;

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;

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