0

I am brand new to react so I figured that I would learn by tinkering with other peoples code from github but the issue with that is, every time I clone a repo from github to vs code, it just comes with the bare code and not the node modules. Does that mean I have to do npm install every time I try to run a react project from github? Also, suppose I make a react project of my own and put it on github. I am assuming I will also put it without the node modules. Then does that mean everyone who wants to run my project has to do this too? Is there any efficient and fast way to run the project?

Ak01
  • 362
  • 3
  • 19

3 Answers3

3

"I am brand new to react"

First, you could also learn react without a node environment (Its easier to learn the basics by simple examples. You find endless codepens under react docs).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
  </body>
</html>

.gitignore

Under root folder add .gitignore file and type inside node modules (Untracked files that Git should ignore).

** This idea prevents from your repo to store/download endless extra files.

Example from create-react-app repo: enter image description here

Install package.json dependencies

By default, npm install will install all modules listed as dependencies in package.json. https://docs.npmjs.com/cli/install

After you download/clone a repo you should run npm install (i.e. where package.json is located) to install your package.json dependencies (This command adds the dependencies in your local node_modules folder).

enter image description here

react-app

react-app repo works a little difference - by one command it sets up your entire development environment (Include NPM dependencies).

clone react-app related StackOverflow Q: Starting React App from pulled github project

Similar: nextjs

"Create React App" website/docs: https://create-react-app.dev/

Learning curve

My advice: Follow some basic node/npm course (Youtube/Google/Medium/Linkedin-learning/udemy/treehouse/Books and so on). No way to really cover your Q by StackOverflow answer.

Ezra Siton
  • 6,887
  • 2
  • 25
  • 37
  • I see. But is there any way to run the react project from github just to see what it looks like? meaning I am not going to append any changes of my own - i just want to see what the project runs like – Ak01 Aug 31 '20 at 15:42
  • 1
    Github used for version control, you need to host the files somewhere (local/remote) and run node.js server for this. Anyway `clone`/-or- download ZIP and run `npm install` under the root folder takes 3-4 minutes -or- try some Cloud tool like https://www.gitpod.io/ (Also under cloud tool you need to run `npm install`). – Ezra Siton Aug 31 '20 at 16:28
2

Yes, you will need to run npm install (or yarn (or some other alternate Node package manager)) so you get the packages needed to run the app.

The other way is to just run a built version of the app (e.g. see here for Create React App).

AKX
  • 152,115
  • 15
  • 115
  • 172
  • can you specify how to run a built version. The stuff in the link you provided was a bit confusing to me – Ak01 Sep 01 '20 at 12:30
1

The right way is to push your code without node modules to GitHub. All the packages with the corresponding version number are saved in one file (most times called: package.json) and that file is also pushed to GitHub. When someone downloads the code, he can install all the packages defined in the file with a package manager (npm, yarn or any other) and the corresponding command (npm install, yarn install, ...). Once you installed the packages, you can run the code as many times you want. You only have to update the packages when new ones are added to the code (new version). That method belongs to best practice. Package managers like npm are used for many different software projects, not only for React Projects.

You could also push your node modules to GitHub, but it will take lot of space, download / upload could be pain and it's not recommended. But it is possible.

Amel
  • 653
  • 9
  • 15