DEV Community

loading...

How I set up a brand-new React app

Analogy | Absence | Example
The way I understand things is in relation to other things: Analogy: what can it be compared to? Absence: what would we have to do without it? Example: how does it work?
・2 min read

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:
Alt Text

Helpful Dependencies

npm install react-bootstrap bootstrap@4.6.0
Enter fullscreen mode Exit fullscreen mode
  • React Router Dom makes it easy to create static and dynamic (and bookmarkable) pages. Install it with
npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

Easy-Peasy ReadMe

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

Discussion (0)