How to build a fullstack CRUD Application with React (+ authentication) ~ Part 2
In the last article, we learnt how to set up a basic server that will provide us with the data we need. Now it’s time to build the front-end, what the user will actually see when it access our app! For this tutorial, I will be making a very simple app in React. Time to start ⚡️.
As always, before setting off, we need to install the needed dependencies and to bootstrap our React app. Let’s start with the latter. React has an handy CLI-command that will help you create the boilerplate of your app in no time. Go to your project folder, and initialise it to a npm folder (
npm init -y ). Inside the same folder, just run:
npx create-react-app client
and wait for the magic to happen ✨. When the build has completed, you will be able to jump right into your newly created React app by running
cd client . From here, you can run
npm start and you will see your React app open on your browser. It should look like this:
Now, open your
App.js file that React has so nicely created for you, and delete all the content in between the
<div> tags. At the end, you should have something like this:
Also, delete the
App.css file, and overwrite everything you find in
Well done 😎 Before we get our hands dirty, I want to show you how to properly set up your working environment with two tools: ESLint and Prettier. One will help you format your code in a consistent way (Prettier), while the other will yell at you every time there is something wrong in the code (ESLint). They might seem annoying at first, but they will save you a ton of time on the long run and make you a better developer overall.
First of all, make sure to have both extensions installed in your VSCode. After that, create a
.eslintrc.json file in the root directory, which will look like this:
.prettierrc.json file which will only have an empty object inside. Now, let’s initialize our directory into a new npm directory by running
npm init -y so that we can install the needed dependencies. Now, simply run:
npm i -D eslint eslint-config-prettier prettier
Make sure you are still in the root directory, as we want these dependencies to be available to both the front-end and the back-end!
Last step (I promise!), open Settings in VSCode (open it with
⌘ + , on Mac) and check the option
Format on Save. This will tell Prettier to auto-format your code every time you save: you’ll never have to think about wrong indentation and strange trailing commas ever again 🙌🏼.
Building our first components 🧱
in React, components are like the bricks for a house: they constitute our foundation. Let’s create a folder inside
Components . In here, let’s create a
LandingPage folder, which inside it’s going to contain a
LandingPage.jsx file. Our component it’s going to be very simple, it will just display a title:
Let’s make it a little bit nicer by applying some style to it by creating a
LandingPage.css file in the same folder:
I will let you play with it if you want to style it even more! Now, it’s time to create the component where all the topics that we will be creating will be posted: we will call this the Dashboard. Go back to the
Componentsfolder, and create another folder called
Dashboard, where, just like before, you will create a
Dashboard.jsx and a
Dashboard.css file… you start to see the pattern, uh?!
And here is our CSS file:
Finally, we want to create a component that will represent our topics. For now, we will hard code the values. In the next article, I will show you how we can add some new topics in the back-end, so that our Dashboard will be directly populated with the topics that our server will provide us with.
So, let’s create our last component for today in a
The CSS for it:
Now, let’s see how our Dashboard will look like with some new Topic Cards in it! Import the TopicCard component in the Dashboard, and populate the div with class
topics_grid with some TopicCard components. Our Dashboard should now look something like this:
Cooool! For now, there is no interaction between the front-end and the back-end, so the app is all statically typed. However, in the next tutorial, I will show you how we can connect both parts so as to make a dynamic app. We will be able to post a new topic and to delete it from our database, all this while the front-end will be updated with the latest changes we make. Wild 🤠
If you liked this post, consider following me on Twitter at https://twitter.com/andrea_undecimo and here, on Medium. I am also learning how to code, and I want to help you do that as well 😁