Frontend Development

Join me as I document the things I learn while developing a custom application! I’m starting with a frontend, which is the code that is a user interface. The frontend connects the user (via buttons and pretty images) to the backend (the business logic).

1. HTML and CSS

Underneath the hood all websites are coded using HTML and CSS. These are like the fundamental building blocks which tell your browser what to render and how to render it.

But HTML and CSS are static. This means you can’t code things like a clock that updates in real time (but you could code a static clock). Luckily there’s Javascript. Javascript is a multi-purpose language which can create the illusion of a dynamic website.

This website you're reading right now is a static website. Underneath the hood, it's just a bunch of HTML and CSS that gets rendered by your browser. I use a program called Jekyll, which is a content management system. It converts the content I write (which is in markdown) into a .html file.

2. Javascript Libraries

Javascript by itself is plenty powerful, but still many steps removed from the end product (the visual UI). In the same way that you would use something like TensorFlow instead of raw Python for machine learning, you’d likely use a JS library instead of raw JS for UI development. For my project, I’m using React. There’s also something called a JS framework, which is a bit different from a library. Two popular JS frameworks are Angular and Vue.

3. UI Design Tools

Let’s step away from code and talk about UI as a visual design task. Questions like, what’s the right spacing? What’s the right color? Where should the navigation bar be? You could, and probably should, answer questions like this on a canvas. It’s a lot of work to code a visual element, and it’s all work that isn’t needed to answer these questions. For this kind of task there are vector design tools. Two popular ones are Adobe XD and Figma.

4. Features

Before jumping into React, I want to take a step back and think about the different types of features we could expect to see in a website, in a very generic sense.

5. Setting Up a Project

Install Node.js

Do it! It’s easy. Node is a javascript runtime. Normally, your browser can run javascript and for frontends this is the runtime we use. But, sometimes we might want to run js locally on our machine and not through a browser.

Package Manager

Once you have Node.js, you’re gonna want a package manager. This is a tool to help you install, track, and manage libraries. For JS, you’ll probably want either NPM or YARN.

Bundlers

Next, you’ll want to think about a bundler. A bundler takes the files you have written (with all their messy dependencies) and turns it into static assets for your browser to run. Most bundlers will also throw up a local server, allowing you to check out how your website actually renders without pushing to the internet. As of this writing, webpack is the most popular, but I’m using parcel, because it’s simpler.

Simpler how? Well there’s nothing to configure with parcel. You just write your .js and .html and .jsx files and then run parcel!

Install parcel with npm install -g parcel (the -g is an option tag which tells npm to install as a global package).

If you’re using parcel, I’ve found that your index.html file needs this in the body section. Also, I place the index.html file into the /src/ folder.

<div id="root"></div>
<script type="module" src="./index.js"></script>

Components of a React Project

package-lock.json records the exact version of each installed package which allows you to re-install them. Future installs will be able to build an identical dependency tree.

package.json records the minimum version your app needs. If you update the versions of a particular package, the change is not going to be reflected here. If you’ve lost your node_modules folder somehow, you can call npm install which will look at this .json file and install your dependencies.

To create a package.json file, you can run npm init -y

node_modules this stores all your project dependencies. For the most part, you won’t need to change anything in here.

src this folder contains 99% of the files you’ll be working with. Here is where you will initialize your index.js, and create your React components.

index.js this usually contains a simple section of code which just renders your App.js component to your DOM, and then this gets placed into your index.html file.

index.css this is a .css file which provides all the styling for your project. A quirk about React is that different .css files are combined into a single file when you compile your code. This means that even if you create many components, they’ll all share the same css.

App.js this is usually the root component. It serves as the container which holds all your other components (maybe your navbars, your content, your sidebars, etc.). You can think of a React project as basically just a tree of components, all pointing back to your root, which is what gets rendered to the reactROM in your index.js.

6. Using React

JSX

In JSX, you can indicate a dynamic variable using a curly bracket. Here’s a few examples:

const Title = My Blog
const link = http://google.com

<h1>{Title}</h1>
<a hred={link}> Google </a>

Click Events

It’s important that the onclick event is provided a function reference, and that you aren’t actually calling the function. The following code won’t work, because doSomething() with the parentheses is a function call.

<button onClick() = {doSomething(variable)}>Do It!</button>

Instead, place the function into an anonymous wrapper.

<button onClick() = {() => doSomething(variable)}>Do It!</button>

Hooks

At a high level, hooks are like functions, which help you manage stateful objects in your project.

In React, the state of a component is like its memory. Things like the items added to your cart, or the current image in a carousel of images you're scrolling through.

import { useState } from 'react';

const [number, setNumber] = useState(25);

const handleClick = () => {
    setNumber(50)
}

Lists

Let’s say you wanted to maintain a list of something on your website (maybe a directory of employees). To store this information, we want a variable that can be edited and additionally one that is Reactive.

const [employees, setEmployees] = useState([
    { name: Joe, id: 1},
    { name: Bob, id: 2}
]);

And then to display these items, we can use the map function from javascript.

{employees.map((employee) => (
    <div className="employee-preview" key={employee.id}>
        <h2>Name</h2>
    </div>
))};

Props

Props are used to pass data from a parent component into a child component. Conceptually, this is like passing argument to a function. This makes a lot of sense since components in React are basically declared as functions.

const function = (props)
const name = props.name     

Serve it Up

Bundle your home and auto insurance project and launch with npx parcel src/index.html. You can also adjust you .json file to shortcut this call.

Material UI

MUI is a React library, which implements Google’ material design guidelines. In other words, it provides a bunch of components which you can import and use without having to style them! It’s very easy, and the website is pretty well documented.

7. Conclusion

And that’s it for now! For further reading, I highly recommend NetNinja’s youtube series on React.