Learn React With Me — Components and Props

Photo by Ben Kolde on Unsplash

This is going to be a short introduction into React components and props. We will be going further in depth in a later article.

Components are the building blocks of a React application. They let you split out the UI into independent, reusable pieces. You can think of a component like a JavaScript function. They accept inputs (called props) and return React elements describing what should be on the screen.

If you haven’t read my articles on JSX and React Elements, I recommend you start their first.

The simplest way to define a component is to write a JavaScript Function.

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

Since this function accepts a single prop object with data and returns a React element, this is a valid React component. These are called functional components because they are literally functions!

You may have also seen something like this:

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

The above example is using an ES6 class to define a component. For now, we are sticking with functional components and will discuss class components in a later article.

To render a component, we would do something like this:

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

const element = <Welcome firstName="Courtney" />;
ReactDOM.render(
element,
document.getElementById('root')
);

We are calling ReactDOM.render() with the <Welcome /> element. React calls the Welcome component with {firstName: 'Courtney'} as the props. Our Welcome component then returns ‘Hello, Courtney’ in the h1 element. Super simple! Try creating a component and rendering it to the DOM!

Always start component names with a capital letter! Since they are different than HTML tags, we won’t want the DOM to get confused!

Since all we are doing with that component is passing in props to display the first name, you can use it over and over again on your page and display different names!

function Welcome(props) {
return <h1>Hello, {props.firstName}</h1>;
}
function App() {
return (
<div>
<Welcome firstName="Courtney" />
<Welcome firstName="Katie" />
<Welcome firstName="Max" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

Then you can render App!

It’s best practice to keep your React components nice and small. If you feel like your component is getting too large! Make it its own component.

For example, if you have this:

function Home(props) {
return (
<div className="container">
<div className="wrapper">
<img className="userImage"
src={props.author.iconUrl}
alt={props.author.name}
/>
<div className="userInfo">
{props.author.name}
</div>
</div>
<div className="text">
{props.text}
</div>
</div>
);
}

You can then break out the image, for instance, to be its own component!

function Avatar(props) {
return (
<img className="Avatar"
src={props.user.iconUrl}
alt={props.user.name}
/>
);
}

Then, you can use the Avatar component inside the Home component!

function Home(props) {
return (
<div className="container">
<div className="wrapper">
<Avatar user={props.user} />
<div className="userInfo">
{props.author.name}
</div>
</div>
<div className="text">
{props.text}
</div>
</div>
);
}

Props are read-only. This means that a component should never update its own props!

In the next lesson, we will talk about state! This allows React components to change their output over time.