Learning Different Kinds of React Components.

What are React Components?

Is this your first time entering an immersion for a software engineering program have been introduced to React for the first time and not sure what React Components do and how they work or helpful, well in this article we will go over the basics of what are React Components. Components are like JavaScript functions, they accept random inputs called props and states which are like JavaScript objects, and return React elements that will go into detail and show what needs to go on the screen. These are helpful because they are reusable pieces used on the UI.

Components can take data and render that data as HTML in the DOM. So a Component can tell you what to render to a page. They are like building boxes or cubes of a React App. There different types of components but we will go over the two main components known as Functional Components and Class Components.

The example below is showing how you can define a component by just writing a JavaScript function.

A functional component is a JavaScript function that can be used when a component does not require to interact with another component or use any data from another component.

Here below is an example of a Class Component.

A Functional Component and a Class Component are similar, but with Class Components, you can have more features that make it more complex. Class Components can actually work together and interact with each other. You can also pass in data to and from another Class Component.

Another React Component that you will run into is the Container Component.

The Container Components are basically a Class Component, but it fetches data and can render the corresponding sub-component. These components are concerned with how things work and they call flux actions and provide callbacks to presentational components. Presentational components are concerned with how things look and can contain presentational and container components, they receive data and callbacks via props.

Here below is an example of a Container Component.

So here are some react components that will be using when working on a React app. So to summarize this article, React components are reusable bits of code that are similar to JavaScript functions but return HTML via a render function. Hope you enjoy working with React!