A discrete way to write reactjs components
In this article, I will tell you how we can write a different type of reactjs components in a simple and easy way, according to need. In reactjs either we can create a functional based component or a class component based. And we will also learn many methods of creating components and in which case, what method is fit according to need.
The default component class
The above code you see this is a default method of creating the component in reactjs. In this method, we are using “React.Component” for inheriting the class and defining the render method. And in render method, we are creating const variable title for requiring title value from the state. Render method return the view content of the component. And this is the most used method in react application for creating the component.
The presentational component
The above code you see this is a presentational component. This component renders only the HTML. The Presentational components fewer chances having a state. This component is responsible for how the view will look. And they don’t have to deal with state and the redux store(if redux is used). These components don’t define how data is stored or mutated into the component.
The stateless functional component
The below given code is the simple example of a stateless functional component. This is the best method if we don’t need to define the state for our component. If we are not using the lifecycle hooks or state in the component, then the stateless functional component can be the best method.
The component using “createClass” Method
Defining component using createClass method is an old method. And this method is quite similar to the default component method. In the default component method, we are using React.Component. ‘React.Component’ is useful when we are using ES6 syntax and this method allows us to create the component using ES6 syntax. And if you are not using ES6 syntax in your class then createClass method is the best approach for creating component because of every ES6 syntax finally converts into ES5 syntax.
Important points to be remember
- If you are using lifecycle hooks and state in your component, then the default component method is the best approach for the application.
2. If you are not using state in your component, then the stateless functional component is the best approach for the project.
3. If you are creating the component for rendering only HTML, then the presentational component is the best approach for the application.
I hope you enjoyed this article on A discrete way to write reactjs components.
Clap 👏 for this article if you find it useful 😃
Feel free to comment and like this article so that others can find it easily on Medium!
Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.
Want to learn more about JavaScript, Reactjs and Life? Check out my other articles:
- How to handle multiple form inputs in reactjs
- Thinking about something
- Power of Gratitude in life
- Create and deploy react app on Heroku
- Closures in JavaScript
- Understanding Hoisting in JavaScript
- Login with GitHub and Microsoft in reactjs
8. Login with Facebook and Google in reactjs
9. How to setup redux and react router v4 in your react app
10. Setting up a React.js project with simple steps
And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript, react.js, stay connected with me.
