In a previous article we talked about rendering in React and as a simple example rendering React elements. But this doesn’t reflect what everyone who uses React does when creating an application. In this article we will be discussing the concept of components and an important concept called props which goes over how data can flow in React.

React components allow an application to be split into discrete, reusable user interfaces. A somewhat accurate analogy would be that React components are very much like JavaScript functions.

React components can be either function Components or class components. Let’s deal with function components first.

The easiest way to define a React function component is to write a function

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

This almost looks like a regular JavaScript function. This function component accepts a props’ argument. Props stand for properties, we will get to them but for now think of props as an object that carries data with it that can be used in our function component. This function component returns some JSX that accesses the props object key ‘name’.

Rendering a React Component

The way we can represent a React component in JSX is like this

<Welcome />

In our circumstance the React component accepts a props argument. Now when we write a React component in JSX we can define what the props object will be.

<Welcome name='Sarah' />

Here we are saying we want the props object to have the key ‘name’ and the value ‘Sarah’. We call this the JSX attribute. When we define this attribute it means we are defining the prop with a key of name and value of Sarah. So now within our function component we can access this value by props.name!

So knowing that, we can see how we would render this simple component

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

const element = <Welcome name='Sarah' />

ReactDOM.render(
  element, 
  document.getElementById('root')
) 

Here we are calling upon the ReactDOM.render function. React recognises that this is a component. It passes the ‘attribute’ name to the component we call props. React then processes this function. This function returns JSX and this gets rendered by React and updates the DOM. This then displays the output on the screen.

Note! You should always start a component with a capital letter, <div /> represents an HTML tag but <Div /> is interpreted as a component.

Now that we understand what components are and how to render them. We need to take this one step further and see how we would conceivable construct something like a React app. We’ve already talked about the fact that components are discrete pieces of code that can split parts of a user interface.

So the key to components is that we can refer to other components in their output. When we create an App, we create a function component called that we can refer to multiple components that split the application into discrete user interfaces.

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

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Here we have our App component, that returns three iterations of the Welcome component with different attributes. We then call upon the ReactDOM.render() that renders the App component. When we call upon this function we are actually triggering React to render the three Welcome components.

The beauty of this type of setup is that we can split our user interface into ever smaller and simpler components. Notice how we don’t have to have our Welcome function component inside the App component. This allows us to extract away components making the code more readable.

The key to functional components and props is that props should not be modified by the function component. We call this a pure function, that does not change it’s input. However, we know that things within complex applications DO change and there is a way to deal with this possibility in React.

Conclusion

In this article we have defined what a component is and why it’s at the heart of React applications. The concept of a component means we can split a very complex application down into many small components. With a component we also have to have a way to transfer data into these components. This is where the concept of a prop comes in, because a function component acts much like a function, think of props as an object we pass as an argument much like a function. We can define the prop by the attributes of the JSX that represents the component. We saw an example of this. This means we can render multiple iterations of the same component with different data.

Other Articles by Author

1. Why you should know about the Virtual DOM
2. Why should you care about how the Browser works in React
3. Why you should be using Fragments
4. Why the div in React

About the Author

I’m a practising medical physician and educationalist as well as a web developer. Please see here for further details about what I’m up to project-wise on my blog and other posts. If you want to get in contact with me, please do so here
aaron.smith.07@aberdeen.ac.uk or on Twitter @aaronsmithdev.