Part I: Building a Full Stack Web Application from Scratch(ish)

Initializing our Front End with React!

Brain Blast AYYYYY!

*2 initial notes:

-Anything in bold in this article series is code

-Coding steps that are critical will be outlined with this handy black line to the left, in case you don’t feel like reading my explanations, banter, and corny jokes, just focus on the steps outlined next to this black line

Hello future web devs!

Today we’re going to build a full stack app from scratch. This is for beginner web-devs/current Comp Sci students/bootcampers/the bored and curious/rick and morty-ers who want to start dabbling in web development but don’t really know where to start. I’m going to assume you’re already coding a bit and know the ins and outs of basic coding languages but just have no idea where to start with building a website with a front and back end (more on that too, if you think I’m talking about cars), skrrt skrrt.

First thing’s first, let’s make a front end.

I’ll be using GitHub to save and track my projects. I’ll try my best to write an article on how to do that as well in the near future in case you don’t know how to. But for now, let’s focus on our website.

I’m going to initialize a front end and start building out a basic layout using React as our “front-end.” The “front-end” of a website simply refers to the part your user sees and interacts with visually and on their computer, iPhone, smart eyeglasses, or whatever new gizmo kids are using these days. Any part of your website that your user can actually see and interact with is called the front-end. (Yes, this article is not about cars, excuse my very corny humor!)

1. Let’s navigate to our Terminal on Mac,

2. Make sure you have Node and NPM installed.

2a. In case you don’t, we can use Homebrew to do that. Do you have Homebrew installed?

2b. If Homebrew is NOT installed, copy and paste this command into terminal:

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2c. Now to install Node (the runtime engine for running Javascript on your computer) and NPM (the package manager of Javascript packages.) After installing homebrew, run.

brew install node

3. cd into the directory/folder you want to make your website’s folder in

4. use the create-react-app function from React to initialize a project

Use the following function to initialize and execute the create-react-app function Facebook has graced us with to start coding websites as fast as possible!

“npx create-react-app the-name-of-your-app”

Awesome! We’re done. We now have a fully functional front-end website…

Don’t believe me?

4. cd into the folder you just made

5. type in npm start inside the folder.

“npm start”

What’d I tell you? You gotta trust me here, for the rest of this series, I got you. If everything went according to plan, you should see this beautifully crafted website Facebook designed for us (credits to Jimmy Neutron for that logo though) automatically pop up in your browser:

You are now officially a React web developer.

In your terminal, you should also see this:

This basically says that your website is now being locally hosted on your machine and you are now viewing it through your browser (@ http://localhost:3000). Feel free to leave this running while you code (if your computer is decently fast and maintained well, otherwise it could explode.) It will “live update” your changes as you go and let you know if there are any errors compiling which is greatttttt for debugging because we can fix errors instantly when we see them!

Cool! Now let’s dive in and start messing around with our preset files and folders in part 2 of this series!

*Feel free to contact me and let me know if I made any mistakes/you think I should add a step/general feedback/criticism/hate mail/open to everything really.

Software Engineer, professional amateur chef & dog dad.