React Components - Zero To Hero Series

This is the second article in the ReactJS – Zero to Hero Series. I recommend reading the first article (link given below), before going through this article.

ReactJS Fundamentals - Zero To Hero Series - Part One

In this article, we will see the explanation of React Components.

Components are the fundamental units of a React application.

Each component corresponds to an element in the DOM.
The component is responsible for rendering the content of that element and for handling any events that occur within it.
Components can be nested inside each other. This is what is meant by composing components and it helps in the reusability. Nested components correspond to nested DOM nodes. The outer component owns the inner component.
The top-level namespace for React is called React with an uppercase R.
New components are defined by calling the createClass The argument to createClass is an object that defines the new components. The minimum requirement is that you supply a render function. In the below image, you might see HTML added in JavaScript code, this is called JSX. This is the reason we have to declare our script block as text/jsx, instead of text/javascript.
When the above code snippet is processed by JSX Transformer, we get the below output.

Now, with this basic understanding, in the next articles, we will see more about Populating Props, Composing components, State, Default props and Validating props.

Summary

Components are the building blocks of React applications
Components are composable.
Each component maps to a DOM node, which may have descendant nodes.
createClass is a function used to define a component. The minimum requirement for the argument passed to createClass is that it must have a render function that must return a single react component.
Props provide the immutable data for a component. Props are the preferred way to get data into a component.
State provides the mutable data for a component.