React Definitive Guide: Components

Photo by Christian Burri on Unsplash

To use components you have to create react app first, So I recommend this article to you, it’ll help you a lot: https://medium.com/@sahar.e.hassan/react-definitive-guide-building-your-first-react-app-2df4106a6ac6

What we’re going to discuss in this article:

1- What is props.

2- What is state.

3- Different React components.

Before go deep into React components, there’re two main concepts or features introduced by React: Props and State.

What is Props:

• Mainly it’s how components talk to each other.
• They’re used to pass data from the parent component to the child component.
• Props are immutable (you can’t change it).

Passing props from parent to child component

Receiving props in child component

what is State:

• It referred to the local state of the component which can’t be accessed or modified outside of the component.
• It contains the data that we want to display when the component is rendered.
• It’s saved as an object.
• State is mutable (you can change it)
• You can change the state object anytime inside lifecycle hooks (we will talk about them later) using setState function.
• Updating the state object cause re-rendering the component again.
• We can pass the state data as a prop to another component.
• this.state should not be assigned directly. Use this.setState, instead.

initialize state object in constructor function

Note that when we want to use constructor function in any component we have to call it’s super constructor.

Passing a state property as a Props

Different React components:

One of the key features of React is splitting the project into components. And in React there’re two types of components: Functional components and class components, let’s know the difference between them.

1- Functional Components (Stateless Component):

• It’s just JavaScript functions.
• It takes an optional parameter called Props.
• We can call it Stateless as it doesn’t have local state inside, only Props.
• Props parameter is accessed through props keyword without this keyword.

Functional component

2- Class Components (Stateful Component):

• It offers more features than the functional component.
• The primary reason to choose class component over functional component is that it has State.
• It has Props and local State.
• We can access Props and State using this keyword.
• It has more control through lifecycle hooks.

Create Class Component:

Simple Class Component

Using State:

Class Component Using state object

• In the previous code, I initialize the state object in the constructor (one of the lifecycle hooks).
• We usually initialize the state here as the constructor is the first lifecycle hook that runs when the component is initialized.
• Inside the render method (I’ll explain it in this article), I destruct the state object and use its values.

If you have no idea about ES6 object destructuring, this article will help you: https://medium.com/@sahar.e.hassan/es6-object-destructuring-why-what-and-how-7bc2fe4eb571

Render Method:

• It’s the most used lifecycle hook, You will see it in all React classes.
• It’s the only required method within a class component in React.
• As the name suggests, it handles the rendering of your component to the UI.
• It’ll be called every time the state of your component is updated.
• The output of render Method is react element (javaScript object), it maps the DOM elements (virtual DOM).
• It has to be pure with no side-effects (it’ll always return the same output when the same inputs are passed).

You can’t modify the component state within the render().

Using Props:

Passing Prop to Class Component

Using Props in Class Component

Using lifecycle hooks:

Lifecycle hooks simply are functions that will execute during the component’s lifecycle.

Using componenDidMount lifecycle hook

• componentDidMount() method executes after the component is rendered for the first time. and I’ll explain it in details in upcoming articles.

We have a series of articles about React js:

• React Definitive Guide: What is React?
• React Definitive Guide: Building your first React app.
• React Definitive Guide: Components
• React Definitive Guide: Routing

Thanks for reading, hope you enjoyed the article, feedback and comments are highly appreciated.

See you in other React js article for beginners. 👋