Ho do I add this React project to my website?

[toolman]

Hi there,
I am wanting to add this scrolling feature to my website:

I have not used React before so not sure how I actually include it in my page.

I have done the following:

Installed React and ReactDOM
npm install react react-dom

I can see React in the node modules folder

I have then run:
npm install react react-dom@latest

I’ve added the dependency to the package.json file which now looks like this:

{
  "name": "new",
  "version": "1.0.0",
  "description": "",
  "main": "gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.6.1",
    "grunt-contrib-sass": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0"
  },
  "dependencies": {
    "matter-js": "^0.19.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
    
    "dependencies": {
    "react-infinite-scroll-animation": "^1.0.0"
}   
}

I’ve now got to a part that suggests doing this:
import InfiniteLoopSlider from "react-infinite-scroll-animation";

But get an error when running this in cmd.

Can anyone help with what I have done wrong or what I need to do now?

Thanks!

[Thallius]

@toolman

But get an error when running this in cmd.

Would be very helpful to know the error. So I can only guess:

Not sure if it possible to use react parts in non react projects (Never tried this) but the import function is part of ES6 .mjs files and maybe you try to use it in an .js file?

[toolman]

Thanks for the reply.

This is the error:

[m_hutley]

that looks like a Powershell error.

What context are you trying to run this line under?

[toolman]

That has gone straight over my head!

I have right clicked in my project folder and run the above commands in cmd in the project directory. Not sure if that’s what you mean or helps?

[m_hutley]

well CMD (which… that error isnt.) has no idea what “import from” means.

NODE would know what that means, but not CMD. So if you’re in a node context, thats different than in a cmd context. Javascript would understand that line; (whether it can import it or not is another matter)

@toolman

I’ve now got to a part that suggests doing this:

Who’s making this suggestion? Are you following a guide somewhere?