What is a React Component?

This week, as I'm diving into the front-end portion of learning MERN stack, I'd like to take some time to talk about React Components. Components are probably the most important aspect of React, and I see in a lot of tutorials people having a hard time grasping the concept. I know it certainly took me a little bit to get the hang of. Let's start with a brief overview of React and why Components are so important.

Brief intro to React

So what is React? For those that aren't familiar, React is a declarative and component based JavaScript library for building user interfaces. Whew, that was a mouthful - let's break that down.

Declarative programming is a (non-imperative) style of programming. Basically what this means is that you are programming in such a way that describes what you want to happen without necessarily caring about how it happens. Think about writing HTML, and how you write out tags describing what you want to be rendered to the page, not the actual steps themselves to render those items. You may want an unordered list, but you're not overly concerned how the program makes that happen.

Component based - this is one of the things about React that makes it unique, and we will be talking more in depth about them later. What you should know for now though is that Components are little encapsulated bits of code that make up our React application.

Components

Pretty much everything in your React application will be a Component. They are independent, reusable pieces of code that are isolated. Each Component manages its own state, and we can use these small reusable code capsules to build larger and more complex ones. In a React application, its basically Components all the way down. Your App itself is a component that renders other components, that renders other components, and so on. Think of them like how we can use functions to separate out our code into individual bits of logic.

There are two type of Components in React, Functional and Class components. Remember our function analogy earlier, well you can actually write React Components as functions. In fact it is the simplest way to do so.

// Functional component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

The other way to write Components is as an ES6 class:

// Class component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Above we have just created two identical React Components that simply render a welcome message. Now, functional and class components do have some differences from each other and there are reasons to use one over the other in certain circumstances, but today I'd like to just give a quick overview of what they are. Just know that these are both valid ways of which to create React Components.

What's in a Component

So we've talked a bit about what Components are and given a little bit of an idea on why you would want to use them, but let's get a little more in depth on what the Components actually do.

You can see in the code above that each component accepts this single thing called a prop. A prop is simply an object that the component takes in as an argument (think functions here). We can then use that data however we would like in our component. Imagine the Welcome component above. We could pass in a User object with a name property in order to display the user's name. In fact, if our component is made up of other components, we can take that props object and pass data from it to other components as well. You can begin to see how we can scale this concept up to bigger and bigger components. Say we built up a larger Profile component to display a user's profile data. We could pass in a singular User object as props into the parent component and it can handle the delegation of the data to its children components, which are all individually responsible for rendering the data they are given.

There's a second aspect of components that is important to talk about: the return value. React Components each return a single HTML element that will be rendered to the application page. In a functional component it is the return value of the function, and in a class component it is the return value of the render() function. This is basically the body of your component and will be what is displayed to the page when that Component gets rendered in your application.

Using Components

You might be thinking, all of this is great and all but how do we actually use Components. Typically React apps have a singular App component that exists at the top that you will use to render all of your other components. Let's take a look at an example from the React docs as to how we might render our Welcome component above inside our App.

// Welcome component 
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// App component
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// This bit of code here is how we insert our React code into our HTML file.
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

On a basic level, that's all there is to Components in React. There are certainly more advanced concepts involving Components to be explored and if you want to learn more, I certainly encourage you to keep learning. The detailed component API reference is a great place to start, and React has wonderful documentation and tutorials if you'd like to learn more about the library. I hope this basic overview has you itching to learn some more about React!