2.1 WHAT IS A COMPONENT?

 Components are the building blocks of React applications.

 A React component is a function or a JavaScript class that optionally accepts data and
returns a React element that describes some piece of the user interface.
 A React user interface is made up of a hierarchy of components that build up to a single
component (called the root component) that is rendered in the web browser.
 It’s possible to create a React application with only a single component, but for all but the
smallest apps, breaking your app up into multiple components makes development and
man- agement of the code easier.

2.2 COMPONENTS VS. ELEMENTS

 The job of a component is to return an element. Each component within an application has a
unique name, which is how you use it.
 The component name becomes the name of the React element when you include a
component in another component
  In this very simple example, WelcomeMessage is a React component that was created using
a function and exported as a JavaScript module.
 Once it’s exported, WelcomeMessage can be imported into any other React component
where you need to make use of its functionality

2.3 Elements Invoke Components

 Once you’ve imported a component into another component, the imported component’s
functionality can be included in your new component’s JSX using an element
 You can include as many components inside another component as you need to, and there’s
no limit to how many levels of components a tree of components can have
 Once you import a component, you can use the element it defines as many times as you
need to and each usage will create a new instance of the component with its own data and
memory
 In general, the point of using components is to provide a higher level of abstraction that
reduces the complexity of an application and enables reuse
2.4 Passing Props
Attributes that you write in JSX elements are passed to the component represented by the element
as properties, or props for short.

You can access props inside the component using the component’s props object.

component called Farms, which includes multiple instances of the Farm component

Note that a string can be passed into a component by surrounding it with quotes, and that any
other type of data can be passed to a component by using curly braces to indicate that the value
should be treated as JavaScript.

2.5 Accessing Props

Once values have been passed as props, you can access that data inside the component.
2.6 Standard HTML Attributes
2.6.1 Attributes Use camelCase
 Whereas HTML5 attributes use all lowercase letters, and a few of them use dashes between
multiple words (such as the accept-charset attribute), all attributes in React’s HTML
components use capital letters for words in the attribute after the first one.
 This type of capitalization is commonly called camelCase. For example, the HTML tabindex
attribute is represented by tabIndex in React and onclick is represented by onClick.

2.6.2 Two Attributes Are Renamed

In a couple of cases, React attributes for built-in elements have different names than HTML
attributes.

The reason for this is to avoid potential clashes with reserved words in JavaScript. The attributes that
are different in React are:

➤ class in HTML is className in React.

➤ for in HTML is htmlFor in React.

2.6.3 React Adds Several Attributes

➤ dangerouslySetInnerHTML, which allows you to set the innerHTML property of an
element directly from React. As you can tell by the name of the attribute, this is not a
recommended practice.

➤ suppressContentEditableWarning, which suppresses a warning that React will give you if

you use the contentEditable attribute on an element that has children.

➤ suppressHydrationWarning. No, it’s not a way to tell React to stop nagging you to drink
more water. This attribute will suppress a warning that React gives you when content
generated by server-side React and client-side React produce different content.
2.6.4 Some React Attributes Behave Differently

➤ checked and defaultChecked. The checked attribute is used to dynamically set and unset the
checked status of a radio button or checkbox. The defaultChecked attribute sets whether a radio
button or checkbox is checked when the component is first mounted in the browser.

➤ selected. In HTML, when you want to make an option in a dropdown be the currently selected
option, you use the selected attribute. In React, you set the value attribute of the containing select
element instead.

➤ style. React’s style attribute accepts a JavaScript object containing style properties and values,
rather than CSS, which is how the style attribute in HTML works.

2.7 USER-DEFINED COMPONENTS

2.7.1 TYPES OF COMPONENTS
[Link] Class Components

 The early versions of the React library had a function called [Link], which was the
only way to create components.

 To use [Link], you could pass an object containing the component’s properties as
a parameter to the function and the result would be a React component.

The preferred way of writing classes was by extending the React .Component base class directly.
[Link] Stepping through a React Class Component
[Link]

[Link] is the base class for every class component that you’ll make. It defines a number
of methods, lifecycle methods, class properties, and instance properties that you can make use of
and extend in your components.

Importing [Link]

Because a custom component is a subclass of [Link], any file that defines a class
component (or more than one class component, in the case of a library) must start by importing
React. You’ll see two ways that this is typically

The Class Header

The Constructor Function

The constructor is where you will bind event handler functions to the instance of the class and set
up the local state for the instance.

A typical constructor in a component looks like this:

Initializing Local State

 Each instance of a React component maintains its own state, and the constructor is where
you initialize this state.
 The state of a component determines whether and when a component should re-render.
 The other object in a component instance that stores data is called props (which is short for
proper- ties). This is data that is passed to a component by its parent component in a React
component hierarchy.
 If you’re going to use the props object in the constructor, you need to pass it to the
superclass’s constructor when you call super.

Binding Event Handlers

Event handlers are the functions that run in response to events. Binding makes the this keyword
work.

By binding an event handler to the component instance, you also make it possible to share the
function with other components while maintaining its link to the state of the instance with which it’s
bound.

The result is that no matter where the event handler is, it always uses and affects the data from its
bound object.
What’s happening here is that we’re passing [Link] into the button component as a prop.

When we do that, it’s passed as a variable and becomes an ordinary function without an owner
object.

When the click event happens inside the button component, this falls back to refer- ring to the global
object, and we get an error because [Link] doesn’t exist.

To solve this problem, you can use the bind function to create a new function that’s bound to the
Foo class
Managing State in Class Components
The constructor function is the only place where you should ever directly update the state object of
a component.

For updating the state after the constructor function has run (during the life of the component, in
other words), React provides a function called setState.

The setState function tells React to update the state of the component using an object or function
that you pass into it.

 A very important point to remember about the setState is that setState is asynchronous,
and changes to state that you make using setState may be batched for performance reasons.

 The reason that the asynchronous nature of setState is important is that if you try to access
state immediately after setting it, you may get the old value rather than the new value that
you expected.
The Render Function

The render function is the only function that’s required in a class-based React component. It runs
when the component mounts and then again each time the component updates. It contains a return
statement that outputs the piece of the user interface that the component is responsible for.

Like any JavaScript function, the render function may contain JavaScript functions and variables. The
return statement inside the render function contains JSX or variables with JSX values.
Creating and Using Props
Props are the arguments that you pass into a component from a parent component. With JSX, the
attributes that you write (which take the form of name=value in JSX elements) become properties
inside the props object of the resulting component instance.

2.8 Function Components

The function component was created to simplify the creation of React components.
How to Write Function Components
Since a function component is simply a JavaScript function, it starts the same way as any other
function—as either a function expression or a function declaration. The choice of whether to use an
expression or a declaration is mostly a matter of style and personal choice.

Managing State in Function Components

Hooks are functions that let you “hook” into functionality of class components without writing a
class. React has many built-in hooks and even lets you write your own hooks.

The hook that lets you persist data with functional components is useState.

The first step in using useState is to import it from the React library, like this: