If those weren't good enough reasons to learn React, according to the 2020 Stack Overflow Developer Survey. React.js is catching up to ASP.NET as the most loved and more importantly, is the MOST WANTED web framework technology amongst employers.
This is the first chapter in the multipart series on how to build a full application React. We will be building a Hacker News clone which where we can add posts, delete posts and search for posts. Sounds familiar right? The classic CRUD application. To those of you who are not familiar with CRUD, it is defined as follows:
Create, Read, Update and Delete (CRUD)
In computer programming, create, read, update, and delete[ (CRUD) are the four basic functions of persistent storage. -Wikipedia
The best part about understanding how to build a CRUD application is that almost every application that exists on the web is some form of CRUD. Being able to abstract this idea will allow you to build anything. The idea is to develop an arsenal of patterns that you can tweak and reapply to different problems, if you run into a problem, 99% of the time someone else has already had this problem (and most likely the solution already exists, so don't go reinventing the wheel).
I want you to be able to create other similar applications as soon as you finish this series or start alongside. The best part of being a Software Engineer is that you can manifest all your ideas yourself.
I will be including all the source code on GitHub in case you get stuck anywhere. The source code will be split up by individual branches per tutorial. When I first started I always found that I was getting stuck in tutorials because I would miss one word then my whole application would stop running. This should help you have a reference to make sure you are on the right track.
This series will cover the following React topics:
- Functional Components vs Class-based Components (although we will be focusing on Functional in this tutorial series)
- State handling with useState
- Conditional Rendering
- Fetch API for requests
- React best practices
A React application is made up of multiple components. Components are simply reusable bits of code, they are almost like functions but work in isolation and when React renders it to the DOM it returns an HTML element. Components come in two types, Class-based components and Functional components. We will cover those two in a later post. A component can have other components inside it, this is called component nesting.
Our first step in planning out a React application is deciding how we want to split up the user inferace. I generally like to do this Figma or on paper and just draw out a low fidelity version of the application before diving into the code. It helps me have a sense of direction instead of just winging it. So let's take a look at the Hacker News website.
Step one is to decide how we want to split up the website into components. Looking for distinct sections. We can see that there is a clear Navigation bar, a content area and a footer. This can be our starting point.
Step two is to look for repeating patterns. Look for parts of the layout where something appears consistently. We notice that each post has the same layout, it includes an article number, a title, an author, date, upvote button, URL, etc. We can make this into a component called Post.
So let's get started!
- The first thing you will need to do is to install Node. You can check if you have Node installed by opening a terminal and running
If it returns a version number(at the time of writing I got 6.14.11) means that you have Node installed. If you do not have Node installed you can download it directly from nodejs.org. Once you have run through the installation, you can run the terminal command to ensure it has been set up correctly.
- Open a terminal and cd into a folder you would like to set up your project in then run the following commands. What this will do use npx which from npm to install the CRA dependencies from the npm registry into a folder called hackernews. Then npm start will spin up a local server on port 3000 which has live reload so any changes you make in the code will be reflected here.
npx create-react-app hackernews cd hackernews npm start
This seems like a good point to stop and take a breather. In the next post, we will start working on the project structure and developing the application layout. I'll catch you in the next one where we will be covering the structure of a create-react-app and all the bells and whistles included.