The building block of React Series 1: Components

React JS is basically like the better twin brother of JavaScript. React allows programmers to build websites easier and these websites also run more smoothly through the use of components, props, state, event handlers, and much more.
If we were to compare React as a whole to a house then components would be to React, what the foundations are to a house. Components are independent pieces of code that can be reused in other components. They are essentially enhanced functions that return JSX ( Javascript XML) rather than vanilla Javascript. The cool thing about components is that they're independent so you can work on each part of the website without having to worry about being overwhelmed with everything at once. Even cooler is how these components are able to work together if needed through the passing of props, which we will talk about in the next blog of this series.
Let's break down the syntax of a component. Components are similar to a function but there are a couple of key aspects that are different.
Components VS Js function

1. Components start with a capital Components = function Component(){} VS JS function = function boringOlething(){}
2. Components return JSX(Javascript XML), which is one of the key aspects of components.JSX is basically HTML in JavaScript. So instead of having to create a div or header in a separate HTML file, you can write the HTML code in that component's return and it will have the same outcome.

There are many other aspects to components that I will talk about in future series but these are the main points; it must start with a capital and return JSX. Hope this is helpful to anyone just learning React JS. HAPPY CODING!