Install external components using NPM
Published: 2021-06-04 12:14:22

Even if React is harder to learn than other JavaScript front-end frameworks, installing external components is where it all pays off.

Because React is so popular, there are pre-built components for almost anything you can imagine. This makes your work way easier.

---

# Intended result
This is what we will have by the end of the article.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytfak3d5r6r3445bny0c.png)
Figure 1: A basic YouTube video player using external components.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nct9fgxxwxpp3gjj6qia.png)
Figure 2: App hierarchy chart.

### Legend:
* 🟦 **Blue**: Component created by us.
* 🟨**Yellow**: External component installed using NPM.
* ◻️**Grey**: Simple tags.

---

# Getting started
Let build this small YouTube player by first installing the external component called [React Youtube](https://www.npmjs.com/package/react-youtube) by using a terminal window inside your project folder.

```
npm install react-youtube
```

Once it is installed, we proceed to import it and utilize it.

```jsx
import YouTube from "react-youtube";
import { useState } from "react";

export default function App() {
  const [videoId, setVideoId] = useState("1_Aq5rQdPso");

  const options = {
    height: "390",
    width: "640",
    playerVars: { autoplay: 1 },
  };

  return (
    <div className="App">
      <YouTube opts={options} videoId={videoId} />

      <button onClick={() => setVideoId("1_Aq5rQdPso")}>
        Golden Eye
      </button>

      <button onClick={() => setVideoId("rwDUWnOVf0c")}>
        Tomorrow Never Dies
      </button>
    </div>
  );
}
```

Let's analyze the new lines of code:
1. `import YouTube from "react-youtube"` the package we installed using NPM. Note that it uses a route without dots or slashes because it is a global NPM package.
1. `const options = {}` A configuration file for the YouTube player ([see the options available](https://github.com/tjallingt/react-youtube#usage)).
1. `<YouTube/>` The external component you imported.
1. `opts={options}` This is where we put the parameters we set up in the previous step.
1. `videoId={videoId}` The most important element of the player: the **state** that will change the video being played.

**Note:** 
Many React external components behave like Java classes with constructors and allow you to initialize the component using parameters.

In the case of React YouTube is the parameter `options`, but each external component will have their own property names to initialize, so always read the documentation of each component you install.

---

# Conclusion
With this knowledge of how to use external packages you have expanded greatly your ability to make useful front end projects. 

In the next article: [Handling multiple pages with the external component React Router DOM](https://dev.to/softwaredevacademy/handling-multiple-pages-with-the-external-component-react-router-dom-l4a), we will cover one of the most important external components of React, the **React Router DOM**. This external component allows your project to behave like a traditional web page with multiple pages.

If you want to see the finished code, open this [link](https://github.com/softwaredevacademy/sda-react-articles) and open the branch external-components.

---

# Recommended external components
Here is a short list of components so you can get started:
* [React Router DOM](https://www.npmjs.com/package/react-router-dom): Official NPM package of React Router DOM, a package that add multi page navigation to React.
* [Formik](https://www.npmjs.com/package/formik): Official NPM package of Formik to add pre-build forms instead of building and validating yourself.
* [FontAwesome](https://www.npmjs.com/package/@fortawesome/react-fontawesome): Official NPM package of Font Awesome to add its icon library.
* [Material UI](https://www.npmjs.com/package/@material-ui/core): Official NPM package of Material UI, a library of pre-designed components. 
* [React Leaflet](https://react-leaflet.js.org): To embed maps in your apps.
* [React YouTube](https://www.npmjs.com/package/react-youtube): For embedding YouTube videos.

---

# Credits

* Cover picture: Photo by <a href="https://unsplash.com/@lou_szabo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lajos Szabo</a> on <a href="/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
* Golden Eye music theme: By Tina Turner.
* Tomorrow Never Dies music theme: By Sheryl Crow.
* The World is Not Enough music theme: By Garbage.
* Die Another Day theme: By Madonna.