Extract Gatsby Static Pages from a Plain React App
When migrating from create-react-app to Gatsby, a good starting point can be identifying simple static pages. One Example can be a /about page that has hardcoded text, a contact page that has a form, etc.
Since you are still using React with gatsby you can migrate those pages by creating a .js file under src/pages and name it the same as it's path for example, /about will be src/pages/about.js. Once the file is created you can copy paste the same component code from your plain React app into the newly created file.
In this lesson, you will learn how to identify and extract simple static pages from you plain React app and move them to your Gatsby app.
Instructor: [0:01] First thing we need to look at is our main entry point or the index.html page. Here on the right, I have the React app code that we saw earlier. Here, I have an empty Gatsby project with an empty src.
[0:17] First thing, let's go and check the index.js for our app. We can see here this is the entry point. This is like the route of our app. This is here the main, which will contain all the navigations, and display all the children. Basically, this route will be using this main component. This will translate into our main index page.
[0:44] Let's go to src, create a new folder and call it pages. Inside of pages, let's create a new file and call it index.js. Here, we need to import React from 'react'. Let's get this main component and paste it in here. We have few missing things that we need to do.
[1:04] First thing is we need to export default and then main. Here, we are missing this link component. This one is imported from reach router, but in the Gatsby world, we would need to import this from Gatsby. Here, we'll import link. This link component will be imported from Gatsby. Save.
[1:26] Now, we need to basically also have this isLogin. For this, we can simply go to this service auth and copy the entire file. If we go here, we have the services and then auth. This is pure JavaScript. We can simply copy all of this.
[1:45] Then go to our Gatsby project. Create a new folder, call it services. Inside of that, we can have the auth file. We're here, auth.js, and then we can paste it here. This is great.
[2:01] Let's go back and import also both. Let's just copy the import from index right here. We need to import this from services auth. Let's check the path. We are in pages. We need to go back. This one is to be services and auth. That's good to go.
[2:25] Right here, these are all the links. These should work because it's the component in reach router is similar to the Gatsby one. We have children here. For now, we can get rid of this children and remove it from here. Let's run our project. Let's do npm run develop.
[2:46] I misspelled from. This should be from and not forum. Now my Gatsby project is rebuilding again. Let's stop the server and run again. Everything should be...Here, this is our Gatsby app. Let's call it Gatsby just to make sure we differentiate between the apps. This is the Gatsby Pokédex. This is the React Pokédex.
[3:11] Another page that we can migrate is the about page, which is a static page. If we click here, you can see we get a 404. To do that, let's go to our main React app and look for the about component. Copy this one. Go to our Gatsby project. Inside of pages, create a new one and call it about.js.
[3:42] Here, let's import first React from 'react'. Let's declare our component. Finally, export it. Let's go back to our Gatsby app. Let's refresh this one. Let's click on about, and you can see here we have our about page.