How I Setup My Personal Website Using React in 2021
By: Juan Carlos Fontecha
Tags: Web Development, Learning To Code, Software Engineering, React, Personal Branding

I’ve been a software engineer for a couple of years now, and while I’ve mostly focused on front-end development, I hadn’t really used React much. Back when I was doing more web development Angular was all the fuzz and then right when React was gaining strength, I switched over to iOS development. In my current role at Microsoft I’m still mostly working as an iOS engineer, but I’ve been wanting to go back to web development for a while now. Coincidentally, I’d been wanting to revamp my personal website as well, since it had outdated information and outdated technology. Perfect chance to get my hands dirty with React, I thought.

A quick disclaimer. If you intend to follow along, bear in mind that this article is not a React tutorial but rather a guide to bootstrapping a new React project in 2021. Here are some resources if you’re looking to learn React from scratch.

🌐 Where to start?

“Where to start with React in 2021?” was my first web search, I remember. I was well aware that the tech stack and tooling trends vary often enough, so I was hoping to learn what the cool kids have been using for web development these days.

Not surprisingly, I came across create-react-app . A utility that intended to bootstrap the setup of a new React project from scratch and that was tremendously helpful.

I was excited and wanted to get started right away, but, while I wanted the convenience that create-react-app offered, I also wanted to learn what was going on behind the scenes. I engineer software for a living after all, curiosity around how things are built is kind of part of the job. So let's take a quick look at the basics of any React application and then we’ll start the setup.

💭 Under the hood

I’ll point you here straight away. That is an awesome resource provided in the official React docs about what it takes to build a React app from scratch. Specially the “Creating a Toolchain from Scratch”.

To lay some foundation and build up from some basic web development practices, I’ll mention that you could technically begin using React by just consuming a <script> tag in your traditional website’s HTML file and load up a React component with JavaScript. Feel free to explore this option if you want a minimal React integration with an existing website, but in my case I’ll try to setup a full toolchain for my development.

To create your own toolchain for React, you basically need three things:

A package manager . This will allow you to easily consume and manage dependencies. Popular choices are npm and yarn .

. This will allow you to easily consume and manage dependencies. Popular choices are and . A bundler . This will allow you to split your code into modules and when you’re ready to serve your application, bundle them into an optimized package. Popular choices are Webpack and Parcel.

. This will allow you to split your code into modules and when you’re ready to serve your application, bundle them into an optimized package. Popular choices are Webpack and Parcel. A compiler. This will allow you to write modern JavaScript code and still get the benefits of a compiled version that works in older browsers.

You can of course start your React project with a simple npm init and begin adding these dependencies manually, but I thought I’d stick with create-react-app for now, so let’s pick up where we left off.

🎆 The setup

All right, time to get our hands dirty. First, we’ll need to install Node.js and npm. This step depends slightly on whether you’re using Windows or macOS but, in essence, it is recommended that you install npm using a version manager. For macOS you can use nvm, and for Windows nvm-windows. I was using Windows when doing this, so I followed these steps to use the installer and get nvm-windows installed. Once that was done, I opened a PowerShell terminal and moved into installing npm.

nvm install latest

Now we’ll want to install npx. If you are confused like I was about the difference between npm and npx, it comes down to this: npm installs and manages packages and npx executes packages. This has the advantage of always running the latest version of the package since npx takes care of getting the package for you and executing it in a single command.

npm install -g npx

Now we should be ready to create our React app. I’m a big believer in the importance of type-safety, so I will use the Typescript template here.

npx create-react-app <your-app-name> --template typescript

Okay, let’s take a look at what that got us!

cd <your-app-name>

npm start

If everything went right, a local server should be started and your new React application should be loaded in your browser in http://localhost:3000/ 🎊

🎁 Adding some dependencies

Hopefully at this point you have some idea about what you’d like to build with your new React project. In my case it was a personal website for my work experience and online presence, but up to this point the steps I followed apply to pretty much anything. Still, even though at this point your direction might begin to diverge, I wanted to share some of the dependencies that I found useful.

Bootstrap

Depending on what you’re building, a UI framework can be really helpful. In my case, I’m not going to be creating complex user interfaces, but responsive design was a must. While you can definitely do this on your own using Flexbox and mere CSS, I wanted some convenience here, so I decided I’d consume Bootstrap and use their sizing classes.

You could technically consume Bootstrap in a React application the same way you’d do for a regular website, but thankfully we have a version that nicely wraps the functionality as components that can easily be embedded in your React UI hierarchy. And since they support Typescript as well, it meant that I was getting compile-time safety with my sizing components. No more seeing a weird layout and spending time digging through my browser’s dev tools just to find out I had a typo in a CSS class.

npm install --save react-bootstrap

React Router

It’s not uncommon to have more than a single page in your React application. If this is the case, you will most likely need to support some sort of routing. React Router does just this. Allows you to map paths to the pages you wish to render for them.

npm install --save react-router-dom

Helmet

React Helmet is a package that allows you to customize certain HTML tags in the output of your React application. It is specially useful to customize the <head> section of your different React Router pages. Another big use case for me was supporting Google Analytics. If you want to use the next generation of properties (known as Google Analytics 4) you will need to add the script manually to the DOM, since there are no good wrappers at the moment that support this new version of GA.

npm install --save react-helmet

🧭 Where to go from here?

Depending on what you want, you can start building your website right away or take the time to learn a bit more about React. Here are some things you will probably want to think about for your project next: