React component can be of two types – It can be either class or function component. You might have heard different terms to describe these types, i.e stateless and stateful. This state can be modified according to user action or other factors. Without further ado, let’s get to the heart of the matter which is 2 ways to create simple React components:
1) Stateless Functional Component
This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.
When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”. Props are similar to arguments for pure functions argument. Props of the component are passed from parent component which invokes component. Props in a component cannot be modified (Immutable).
Here we don’t need write render() function. We just return the HTML div. In this way, we can reduce the amount of code.
2) Class Component
A class component is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX.
This internal state is what gives React its reactive nature. When the state of a class component changes, React will re-render that component in browser.
The State and Props objects have one important difference. Inside a class component, the State object can be changed while the Props object represents fixed values. Class components can only change their internal state, not their properties. This is a core idea to understand in React.
You would then use ReactDOM.render() to target the HTML element by id.
And that’s it! These are the 2 ways you can create a React component.