Basic Setup for Create React App

October 31, 2021

One of the things I find most valuable is a good quick-start guide. This is the guide I put together to get a React app started and pushed to GitHub, using the Bash terminal in VS Code.

  1. In the terminal, navigate to the folder on your machine where you want to keep the local copy of your repo.
  2. Use create-react-app to create the new application, replacing <app-name> for your application’s name. Additional documentation is available at reactjs.org.

    npx create-react-app <app-name>
  3. Once the application has been created, create a main branch (current GitHub default and preferred name) and delete the master branch (still the current default for create-react-app).

    git checkout -b main
    git branch -d master
  4. To use npm instead of yarn, take the following steps:

    1. Delete yarn.lock
    2. Delete node_modules folder
    3. Reinstall node_modules using npm
    npm install
  5. Clean up the generated README, removing application boilerplate and adding any content desired for the first commit.
  6. Test the basic React setup and enjoy the spinning React logo!

    npm run start

    React tab React logo

  7. Commit code locally.

    git add .
    git commit -m "Initial commit"
  8. Go to your account on GitHub and create the remote repo:

    1. Use the same name used for the app creation
    2. Don’t choose to add any of the options for initializing the repo to avoid conflicts pushing the local repo; local already has README and .gitignore from the app creation and the license can be added later
    3. Use the instructions from …or push an existing repository from the command line to link the local repo to the remote location; example code below, the code generated by GitHub will contain the correct values
    git remote add origin https://github.com/<GitHub user name>/<repo name>.git
    git branch -M main
    git push -u origin main
  9. The basic React app is now ready for further development!