To use components you have to create react app first, So I recommend this article to you, it’ll help you a lot: https://firstname.lastname@example.org/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).
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.stateshould not be assigned directly. Use
Note that when we want to use constructor function in any component we have to call it’s super constructor.
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 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.
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:
- 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://email@example.com/es6-object-destructuring-why-what-and-how-7bc2fe4eb571
- 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.
- 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 lifecycle hooks:
Lifecycle hooks simply are functions that will execute during the component’s lifecycle.
- componentDidMount() method executes after the component is rendered for the first time. and I’ll explain it in details in upcoming articles.
Thanks for reading, hope you enjoyed the article, feedback and comments are highly appreciated.
See you in other React js article for beginners. 👋