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

npm install react-bootstrap bootstrap@4.6.0

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

npm install react-router-dom

Easy-Peasy ReadMe

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