Scribd
Upload
8 views4 pages

15 - Summary Building Components

React 15- Summary Building Components

Uploaded by

usevinodkr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views4 pages

15 - Summary Building Components

React 15- Summary Building Components

Uploaded by

usevinodkr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Building Components 1

Building Components
Terms
Fragment
Immutable
Props
State hook

Summary
• In React apps, a component can only return a single element. To return multiple
elements, we wrap them in a fragment, which is represented by empty angle brackets.

• To render a list in JSX, we use the ‘array.map()’ method. When mapping items, each
item must have a unique key, which can be a string or a number.

• To conditionally render content, we can use an ‘if’ statement or a ternary operator.

• We use the state hook to de ne state (data that can change over time) in a component. A
hook is a function that allows us to tap into built-in features in React.

• Components can optionally have props (short for properties) to accept input.

• We can pass data and functions to a component using props. Functions are used to
notify the parent (consumer) of a component about certain events that occur in the
component, such as an item being clicked or selected.

• We should treat props as immutable (read-only) and not modify them.

• When the state or props of a component change, React will re-render the component
and update the DOM accordingly.

Copyright 2023 Code with Mosh codewithmosh.com


fi
Building Components 2

• In React apps, a component can only return a single element. To return multiple
elements, we wrap them in a fragment, which is represented by empty angle brackets.

• To render a list in JSX, we use the ‘array.map()’ method. When mapping items, each
item must have a unique key, which can be a string or a number.

• To conditionally render content, we can use an ‘if’ statement or a ternary operator.

• We use the state hook to de ne state (data that can change over time) in a component. A
hook is a function that allows us to tap into built-in features in React.

• Components can optionally have props (short for properties) to accept input.

• We can pass data and functions to a component using props. Functions are used to
notify the parent (consumer) of a component about certain events that occur in the
component, such as an item being clicked or selected.

• We should treat props as immutable (read-only) and not modify them.

• When the state or props of a component change, React will re-render the component
and update the DOM accordingly.

Copyright 2023 Code with Mosh codewithmosh.com


fi
Building Components 3

CREATING A COMPONENT

RENDERING A LIST

CONDITIONAL RENDERING

Copyright 2023 Code with Mosh codewithmosh.com


Building Components 4

HANDLING EVENTS

DEFINING STATE

PROPS

PASSING CHILDREN

Copyright 2023 Code with Mosh codewithmosh.com

You might also like