reactjs - Properly setting up React app to work with other devs in VS Code

Question

I am learning React with my son using VS Code a and we are having a hard time properly syncing and setting up how to work with the same files on Github.

We have a repo with source files. Let's call it 1st-repo. His PC is fine as he has control of the repo (master). I would like to fork this repo (I think?) so I can have all the files and make my own changes.

I'm really not sure how to start in VS Code. DO I first do a blank app "npx create-react-app {name}" then clone? Or do I set it up through git/github in VS code.

Once there is the initial setup I would love to see how people work together.

Answer 1

You definitely don't want to npx create-react-app {name} as this will create a new application project.

If you are simply wanting to work on the same project at the same time then you only need to clone the Github repo to your machine.

git clone <link to repo>

Then change directory into the project and install the project's dependencies. This assumes you already have node installed on your machine.

cd <project directory>
npm install

From here you can open the project up in VSCode, make your changes, and commit & push them back to the remote repo. I suggest getting familiar with Git and the pull, commit, and push commands. Also get familiar with creating and switching between working branches.

Git cheet sheet

If you and your son are working on the same code in the same branch at the same time then merge conflicts will likely arise when either of you are pushing your changes back to the remote. Get in the habit of pulling any changes from the remote before you commit and push your changes, it's easier to resolve conflicts this way. VSCode even makes this stupid simple in the GUI.

VSCode also features a VS Code Share extension, called Live Share, that allows you to work in a shared window. You can see each other's cursors and position in the code.

Good Luck.