How I set up a brand-new React app

Create your first branch and push it the right way

The first thing I do with a new app is to create a new git branch to work on so I'm not pushing to main. I never know what I'm going to do first, so I just call it "first". Yes, I know that's basic of me. Type the following into your terminal: git checkout -b first or git checkout -b whateveryouwannacallit.

Ok, so you've checked out a new branch called first. Once you're ready to make your initial push of the branch first to git, make sure you use the command git push -u origin first. The added u sets up tracking information so that during future pushes, you can do git pull without having to specify the remote or the branch.

Remove Unnecessary Cruft

There's a bunch of files in your automatically-created new app that you don't necessarily need. Some people delete them but I just move them to a new folder I create called "DELETE" juuuuust in case I need them at some point down the road. They include the following:

remove from public directory:

favicon.ico

logo192.png

logo512.png

manifest.json

robots.txt

remove from src directory:

App.test.js

logo.svg

reportWebVitals.js

setupTests.js

Once I'm done, my directory looks like this:

Helpful Dependencies

React-Bootstrap makes it super easy to build screen layouts with their Grid System of Containers, Rows, and Columns. It also has a ton of components for common UI widgets like Alerts, Breadcrumbs, Buttons, Forms, Modals, Navbars, and on and on. Install it with

React Router Dom makes it easy to create static and dynamic (and bookmarkable) pages. Install it with

Easy-Peasy ReadMe

At some point, fill that README with useful content by visiting MakeAReadMe.com which provides handy Read Me templates.