There are a lot of nice React components available for different purposes. Our first task is to find a suitable component for your needs. One good site for searching components is JS.coach (https://js.coach/). You just have to type in a keyword, search, and select React from the list of frameworks. In the following screenshot, you can see the search of the table components for React:

Another good source for React components is Awesome React Components (https://github.com/brillout/awesome-react-components).

Components often have good documentation that helps you to utilize them in your own React app. Let's see how we can install a third-party component to our app and start to use it. Navigate to the JS.coach site, type list to search the input field, and filter by React. From the search results, you can find the list component, called react-tiny-virtual-list:

Click the component link to see more detailed info about the component. Quite often, you can find the installation instructions there and also some simple examples of how to use the component. The info page often provides the address of a component's website or GitHub repository, where you can find the full documentation:

As you can see from the component's info page, the installation of the components is done using npm. The syntax of the command is as follows:

npm install component_name --save

Or, if you are using Yarn, it is as follows:

yarn add component_name

The --save parameter saves the component's dependency to the package.json file that is in the root folder of your React app. If you are using npm version 5 or greater, this is done by default, without the --save parameter. With Yarn, you don't have to specify that because it saves the component dependency by default.

Now we install the react-tiny-virtual-list component to the myapp React app that we created in the previous chapter. You have to move to your app root folder and type the following command:

npm install react-tiny-virtual-list --save

If you open the package.json file from your app root folder, you can see that the component is now added to the dependencies:

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4",
    "react-tiny-virtual-list": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Installed components are saved to the node_modules folder in your app. If you open that folder, you should find the react-tiny-virtual-list folder:

Now, if you push your React app source code to GitHub, you should not include node_modules because that folder is really big. The create-react-app contains .gitignore file that excludes node_modules folder from the repository.  The content of the .gitignore file looks following:

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

The idea is that when you clone your app from the GitHub, you type the npm install command, that reads dependencies from the package.json file and downloads these to your app.

The final step to start using your installed component is to import it into the files where you are using it:

import VirtualList from 'react-tiny-virtual-list';