Made withStrapiClip

Strapi Crash Course (with React & GraphQL) #5 - Creating a React App

N

Net Ninja

Creator on the Strapi channel

Watch on YouTube ↗

47K viewsJul 21, 202111:12 runtime

Learn to set up a React frontend from scratch for your Strapi CMS. This guide walks you through using create-react-app, cleaning the default project, and establishing a professional folder structure with 'pages' and 'components' directories. You'll install and configure React…

Chapters

#strapi#clip#cmscrm

Project Setup

Initialize the React App: Use npx create-react-app frontend in your root project directory to create a React application alongside your Strapi backend.
File Cleanup: Remove unnecessary boilerplate files from the src directory like App.css, logo.svg, and test files to start with a clean slate.
Folder Structure: Organize your code by creating two key folders inside src:
- components/: For reusable UI elements like headers, footers, or navbars.
- pages/: For top-level components that correspond to a specific page or route (e.g., HomePage, ReviewDetails).

React Router Configuration

React Router is used to handle client-side routing and navigation.

Installation: npm install react-router-dom
Core Components:
- <BrowserRouter as Router>: The parent component that enables routing. It should wrap your entire application, typically in App.js.
- <Switch>: Renders the first child <Route> that matches the current URL. This ensures only one page component is displayed at a time.
- <Route>: Defines the mapping between a URL path and a component.
  - path: The URL path to match (e.g., / or /details/:id).
  - component: The React component to render when the path matches.
- <Link>: Used for navigation instead of <a> tags to prevent page reloads.

Important
The <Route> for the homepage (path="/") must include the exact prop: <Route exact path="/">. Without it, this route will match every other path (like /details/1) because they all start with /, causing only the homepage component to render.

Dynamic Routes

To create pages for specific items (like a single review), use route parameters. The colon (:) in the path denotes a dynamic segment.

Example: <Route path="/details/:id" component={ReviewDetails} />
The :id part is a placeholder for the actual ID of the review (e.g., /details/1, /details/2).

Styling Strategy

Global Stylesheet: Consolidate all global CSS into a single file, index.css.
Import: Import the global stylesheet in your application's entry point, index.js, so the styles are applied everywhere: import './index.css';.
Custom Fonts: You can easily add custom fonts by importing them at the top of your CSS file, for example from Google Fonts:
```
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
```

Scaffolding the React App

Okay then gang, so now we've got the back end up and running and we know how to fetch data from it using the Strapi REST API endpoints. Now we want to start work on the front end of the website, the React application. So navigate to our project directory which I called ninja-reviews. Remember this is the folder that we installed the back end into, so that's inside this folder. And now we're going to create a React project in here as well.

So to do that we'll use npx: npx create-react-app give it a name, oops you need to spell react right as well. Give it a name, I'm going to call it frontend like so, but you can call it what you want. But I'm calling it frontend so that we have the front end and the back end folders inside this project directory.

All right so now that's done, let's cd into that frontend folder. And then I want to open this up in VS Code, so let's say code . and press enter. And hopefully that's going to open up in VS Code, there we go.

Cleaning and Structuring the Project

So this is our startup project. There's a few things I want to clean up first of all. So let's open the src and I'm going to get rid of App.css because we're going to put all of our CSS inside the index.css file right here. I'm also going to get rid of the test file, we're not going to use that, and the logo, we don't need this, and these two files at the bottom we don't need as well. So let's get rid of those.

Now inside index.js, we're going to get rid of this import because we deleted that file, and also this at the bottom and save that. Then inside App.js we're going to get rid of these imports at the top as well because we don't need those. That was the logo and the App.css.

Then I'm going to get rid of everything inside the div with a class name of app, but I will keep this div right here. All right, so next I'm going to create two folders inside the src folder. One is going to be called components and that's for any dropping layout components like the navbar or header. And then the next one is going to be pages and this is going to be for page components in our application.

So we're going to have three page components. We're going to have one for the home page where we list all the reviews. We're going to have one for review details, which is where we go when we click on one of those reviews. And then also when we start to work with relational data, we're going to have a category page as well, so that when we click on a category it shows all the reviews for that category on that page.

Creating Page and Layout Components

So let's create these new files. We'll start with HomePage.js and I'm going to use a snippet, rfc, to make a React functional component, press tab, and it generates that. And the reason I can do that is because I have a package which is this one right here which gives me access to a load of snippets. So just search for this package and install it if you want to do that as well. All right, so let's go back, get rid of this. That's the home page. Inside here we'll just say Home page bit of text.

Next up we'll do the review details. ReviewDetails.js like so. And then inside here again, React functional component, tab. And then inside the template, Review details, need the D over there. All right, save this. And then finally, let's do the category. So Category.js and then same again. This is called Category. and we'll say Category down here in the template. Awesome. So that's the three pages done.

We also now want to create a component which is going to be for some kind of header, and I'm going to call this SiteHeader. So, SiteHeader. And this SiteHeader is going to go at the top of every page. So I'm actually just going to paste in this component right here. And then I'll paste in the import at the top as well. Okay, so it's called SiteHeader and inside here we have a div with a class name of site-header and this link right here, we need to import as well. This is linking to the home page.

Now we've not set up the router yet, but we will do in a minute. And we need to import Link from a package called react-router-dom. Now we've not installed this yet, so let's install it. I'm going to save this.

Installing and Configuring React Router

Then open up a terminal and I'll say npm install react-router-dom so that we can use this link and also so we can set up routes inside the root App component.

All right then, so now that's installed we can start to use the React Router to set up routes for these three different pages. So let's do that inside the App component right here, the root component. And also inside this root component we can import and nest the site header so that that's on the top of every page as well. All right and by the way, if any of this goes over your head and you're struggling with the React side of things, definitely check out that full React course first of all. I explain all of this in much more detail there, so the link to that remember is going to be down below the video.

So anyway, inside the App component, the first thing I'm going to do is import a bunch of stuff. So down here we're importing the page components and the layout components. So these three things are the page components. We import HomePage from the pages folder and then the HomePage, ReviewDetails, then the Category. So we have all three pages imported. And also we import the SiteHeader from the components folder, SiteHeader. So, that's because we're going to nest these components down here in the template in a second.

But also so we can set up the router, we've imported BrowserRouter as Router. And this as just means I'll refer to the BrowserRouter inside this component as Router, so we can use the router tag instead of having to type out BrowserRouter. Okay, and then we also import the Route, which we're going to use to set up individual routes to three different pages, and then also the Switch component which surrounds our routes and makes sure that we only ever show one route on the page at one time.

All right then so let us inside the app first of all nest the site header, so SiteHeader like so. And now that's going to be at the top of every page. Then after that, we'll do our Switch tag. So, let's say Switch like so and inside there we can make our different routes. So the first one is going to be Route like so, and we need a path prop, and that's going to be just /. So when the route is just /, I want to render the HomePage component that we imported right here.

So let me copy this now and paste it down here a couple more times. The second route is going to be for the path of /details/:id. There's a colon before the id to denote this as a route parameter, meaning it can be changeable. It could be one, two, three, four etc, depending on the review we want to see the details for. And then this component is going to be the ReviewDetails like so. Spell this correctly, ReviewDetails, okay. And then finally the path is going to be /category/:id again, which is a route parameter again. That's going to be the ID of the category we want to show, and then down here we want to show the Category component.

Now one more thing we need to do is put here exact otherwise this will match everything, because any route basically matches this and so for any route we go to potentially we'll just show the home page without this. So let me save this now and let me run this by coming down here and typing npm run start. This is going to spin up the local development server for our React application. And it's opened up on my other screen over here, so let's take a look at that. All right and we get an error.

Debugging the Router and Using the `exact` Prop

So that's because we've actually not used the router. We need to put all of this stuff inside the Router itself. So let's do that. I'm going to come down here and say Router. And take the closing tag and place that at the bottom after the div. So now everything is nested inside the router. So this should work now if I bring this back over. Yep I can see this is the home page, right? If I go to /details/3 for example, then we're going to get the review details page. If I go to /category/3 I should get the category page, which I do.

Now let me just quickly show you what happens if I don't have the exact path. I'm going to save this and then I'm going to bring this back over. And notice now even though we're going to this URL, we still see the homepage. And that's because this route still matches this right here because this is included in that route that we went to. Seems a bit odd, but we have to put exact right here for this to work correctly.

Applying Global CSS Styles

All right, so one more thing I want to do and that's just to add a little bit of CSS to this project to make it look a bit better. So I'm going to go over to the index.css file. I'm going to grab that, delete it and just paste all of this CSS in. Now if you want to grab all of this CSS you can do from my repo. Remember you just need to select the lesson 5 branch and then you need to find the correct file. And incidentally, it's right here. So if you want, I'll leave this link down below and you can just go direct to this file and copy it all and paste it into the index.css file.

Nothing fancy, all we do is import a Google font which is called Poppins and then we set some styles on the body: margin is zero top and bottom, 30 pixels left and right. And then the font family is Poppins, the background is a very, very light gray. We applied this font weight to the headings right here. Then the app, which is this div right here, we say the font size is 1.2em, give it a bit of margin, width is 100%, max-width of 1200 pixels, the padding is 20 pixels all the way around, and the box-sizing is border-box to incorporate the padding into the width. Okay?

And then any anchor tag text-decoration none, we give it this purple color and a border bottom which is dotted. And the h1 which is the site header title is a font size of 1.5em, again the purple color, padding bottom and a border bottom as well. So if I was to save this now, we already have this imported into this file right here, do we? Yep, right here. So we should see that in our React app. And I can do right here. So this is now our starter React project. In the next lesson, we're going to start to fetch the Strapi data and show it in the browser.