Introduction

In React, code is written in the form of entities called components that help us organize code modularly. This modular structure allows apps to be scalable and maintainable. React.js, as a JavaScript library, has achieved a lot of popularity in the web domain and has rightly been enjoying this success because it allows developers to build scalable apps rapidly while employing industry best practices.

In the previous chapters, we have largely worked with a specific type of component in React called class components. When the React framework emerged in the scene, the use of class-based components increased. During the early days of React, even before classes were available to us in JavaScript (ES6), React implemented its own take on classes with React.createClass. However, starting with React 0.14.0, ES6 component classes extended React.Component. And so, components can now be defined as Class components that use JavaScript classes to extend React.Component and Function components that are written as JavaScript functions. React works with React DOM, which renders these components in a chosen root element in the HTML DOM to render the React app. Let's start with the structure of React components.