React is one of the most popular libraries for creating front end apps. It can also be used to create mobile apps with React Native.
In this article, we’ll look at the basics of React that we may have missed or forgotten.
Components Can Be Reused Anywhere in Our App
The whole point of creating a React component is that we create a group of elements and components that we can use anywhere in our app.
For instance, we can define our components and use them anywhere as follows:
import React from "react";
const Foo = () => <p>foo</p>;
const Bar = () => <p>bar</p>;
export default function App() {
return (
<div className="App">
<Foo />
<Bar />
<Bar />
</div>
);
}
In the code above, we created the Foo and Bar components, which we used in our App component.
We can reference them as many times as we want. Although if we reference them more than twice we should use the map method to return multiple instances of a component instead of repeating them everywhere.
For example, if we want to show the Bar component 5 times in App, we can write the following code:
import React from "react";
const Bar = () => <p>bar</p>;
export default function App() {
return (
<div className="App">
{Array(5)
.fill()
.map((_, i) => (
<Bar key={i} />
))}
</div>
);
}
In the code above, we created an array, fill them with undefined with filland then map all the entries to Bar so that we can display Bar 5 times.
Also, we always have to remember to set the key prop so that React can identify them properly. The key prop’s value for each entry should be a unique value like the array index or another unique ID.
Data Can Be Dynamically Passed to Components with Props
Without props, most components are useless since almost all of them need data for them to be useful.
For instance, we can create a component that takes a prop and use it as follows:
import React from "react";
const names = ["jane", "joe", "alex"];
const Name = ({ name }) => <p>{name}</p>;
export default function App() {
return (
<div className="App">
{names.map((n, i) => (
<Name key={i} name={n} />
))}
</div>
);
}
In the code above, we created the Name component which takes the name prop and display it inside the component.
Then we used it by calling map on names to map them name strings in the array into the Name component to render it.
We passed in the name prop with the value n from the names array so the the name property will be populated by the name string from the array.
Therefore, we’ll see:
jane
joe
alex
displayed on the screen.
If we have multiple props, we can use the spread operator to spread them all into props so that we don’t have to write them out all at once.
For instance, we can write the following to spread our props into a component as follows:
import React from "react";
const names = [
{ firstName: "jane", lastName: "smith" },
{ firstName: "john", lastName: "smith" },
{ firstName: "alex", lastName: "jones" }
];
const Name = ({ firstName, lastName }) => (
<p>
{firstName} {lastName}
</p>
);
export default function App() {
return (
<div className="App">
{names.map((n, i) => (
<Name key={i} {...n} />
))}
</div>
);
}
In the code above, we have the names array, which has the firstName and lastName properties.
To make our code shorter when we are passing props into the Name component, we spread the properties of each entry as props by using the spread operator as we did in:
<Name key={i} {...n} />
As long as the property and prop names match exactly and in the name nesting level, then they’re spread as props properly.
Since firstName and lastName are all at the top level, we can spread them easily with the spread operator and they’ll be the value of the props with the same name.
Conclusion
React components can be anywhere in our app. They can be referenced as long as they’re defined.
We can pass in data to components via props. This makes them useful. We can pass in props by passing them explicitly in a way that looks like their HTML attributes, or we can use the spread operator to pass in multiple props with the same name all at once.
