I am studying React.js., and I have started by setting the project folders to try some codes. But, some terms are confusing me as a beginner. One of them is "dependency." When I search for it, the result is only related to dependency injection stuff, but what is the "dependency" itself?

I am studying React.js., and I have started by setting the project folders to try some codes. But, some terms are confusing me as a beginner. One of them is "dependency." When I search for it, the result is only related to dependency injection stuff, but what is the "dependency" itself?

• javascript
• reactjs
• project

• From the java tag description: "Java (not to be confused with JavaScript or JScript or JS) ...". From the javascript tag description: "JavaScript (not to be confused with Java) ..." – Turing85 Commented Aug 15, 2020 at 7:23
• Does this answer your question? What is dependency in package.json - nodejs – jonrsharpe Commented Aug 15, 2020 at 7:34

6 Answers 6

A dependency is some third-party code that your application depends on. Just like a child depends on its parent, your application depends on other people's code. A piece of code bees a true dependency when your own application cannot function without it.

If you want to look at the dependencies you're using, you can find them in the package-lock.json file under the packages -> dependencies key.

Well, dependencies are those things that you need to install and import for doing specific things, for example, if you want to add routing(moving from one page to another which changes your URL) in your react project then you need to install react-router-dom dependency by doing

npm install react-router-dom

A dependency is just a package that your project uses.

Very few javascript projects are entirely self-contained. When your project needs code from other projects in order to do its thing, those other projects are "dependencies"; your project depends on them to run.

When you install third-party packages via npm install <package>, you're adding a dependency.

Your project's package.json file includes a list of your project's dependencies.

Dependencies es into picture when you are playing with the API's, or the Data Server for request and response.

for e.g. you are creating a weather web-app using weather API, and for some reason the server in which the weather API is hosted is down. Then you request for data from API will be rejected. i.e. your web-app can't work without that API, therefore it's a dependency for your web-app.

In modern React, is quite mon to talk about dependencies when talking about hooks.

Take the useEffect hook as example:

  useEffect(() => {
    async function fetchCurrentPokemonData() {
      fetch(`https://pokeapi.co/api/v2/pokemon/${currentPokemonId}`)
    }
    fetchCurrentPokemonData()
  }, [currentPokemonId]) // <-- THIS IS THE DEPENDENCIES ARRAY

When the ponent that calls this hook is first added to the DOM, the hook will be executed. From that point on, every time the ponent is re-rendered, React will take a look at the dependencies array and check if it has changed. If so, it will execute the code inside the useEffect hook again.

Reference: https://react.dev/reference/react/useEffect#useeffect

Let's take an example, when developping a react application, a mon use case is to make http request to fetch data from a backend server.

You can use axios which is well known http client used for javascript app.

You need to add a dependency to your project pointing to this library.

 ______________               _____________ 
|              |             |             |
| Your Project | ----------> |    Axios    |
|______________|             |_____________|

To add a dependency with npm, use the mand npm install :

npm install axios --save

The dependency will be installed into the node_modules folder. You can also see the dependency name in your package.json

You can now use the dependency in your code :

import axios from 'axios';

axios.get('/my-service').then(...);

Project dependencies are listed in the package.json :

{
  //  Packages required by your application in production.
  "dependency": {
    ...
  },
  //  Packages that are only needed for local development and testing.
  "devDependency": {
    ...
  }
}