In the previous part, we build an API that is responsible for communication of the Django project and react app. The third part of the tutorial is creating a single page application with React.
Here the links of the previous two parts of this tutorial:
Create React App From Scratch
Step-1: Configuring Environment
(Note: if you already installed the node, you can skip this part)
We will use Node backend for the development environment. Therefore, we need to install Node and Node package manager npm. In order to prevent possible dependency problems, I need to create a clean node environment. I will use NVM, which is a Node version manager, and it allows us to create isolated Node environments.
Step-2: Create Frontend Director
You might also want to read:
How to Use GraphQL in React Using Hooks
Step-3: Install Dependencies
Step-4: Create Necessary Files
Step-4: Package.Json File
Your package.json file should look like this.
Step-4: Webpack Configuration
What is webpack?
Webpack is a module bundler and a task runner. We will bundle all our javascript application including CSS styling into two javascript files if you prefer you can output only one file. Due to the rich plugins, you can also do many things with webpack like compressing with different algorithms of your file, eliminate unused CSS code, extracting your CSS to different files, uploading your bundle to cloud etc…
This image below is a visual representation of the ultimate bundle process with webpack.
We decided to make two different webpack settings in single file; one for production and for development. This is the minimal configuration of webpack and it is not optimized.
Step-5: Create Index Html File
When we are developing frontend, our react app render all our javascript code to this HTML file located in the src folder. Also when we build our code for production (bundling), webpack will be using this HTML as a template.
However, It is important to say that Django will not use this HTML file as a template. This is the HTML entry point of webpack and Django will use the output of bundle.
Step-6: Create The Root File Of React Application: Index.Js
The index file is the root file of our app meaning that all our code will be connected to this root file. The other tutorials or react boilerplates generally use this file for only render function of ReactDOM and leave it very small and clear. Writing this index file as it is is a totally a personal choice.
What we will do is create an Init component that will initialize the API framework and routing library.
We will wrap our App file with API framework so that all our components will be in the context of our API. The Apollo Provider expects an Apollo client which has the information of requested address will be the address of our Django server.
After then we will wrap our App file again with the router component namely Browser Router. This will allows us routing without rendering all the page when the URL of the address bar changes.
At the end of the file, you will see the render function of ReactDOM which accepts our root component, which is Init component in our case, and the DOM element that our app will be rendered in there.
Information about the application
Now, we are ready to create our simple movie app.
Our app has two different screens; The main page which lists all movies in the database with small information and the movie page will show specific movie with more information.
Technical explanation
When a user first opens our page, switch component from react-router-dom will look the URL. Then try to match the path of route components with this URL, if any, then the matched component in the route will be rendered.
In the ideal scenario, when a user opens our homepage, switch function will match the main page component. Then the query in the main page will make a request to the server. If the query will be successful, the main page will render the data and the user will see the small movie cards. When the user clicks any of these cards, the link component from react-router-dom will redirect the user to the movie page of this specific movie. The URL will be changed. Then switch function looks and match this URL with the movie page component. This time query in the movie page will request to the server with the given slug argument that was captured from URL. The server will look at this argument and check its database, if any match, then the movie information will be sent back to the client. Finally, the movie page renders the movie information with this data.
Note: It is better to load all information at first then render movie page with this data. It is not a good option to make a second request with this small data. Because of the need for explanation, this approach was selected.
Step-7: Create App.Js File
Step-7: Write Client-Side Queries
Before creating our main page and movie page components, we should first create our API queries.
Step-7: Creation of Page Components
Normally, it is better to create a different page for components. However, because this project is small, writing in them in the App file will be no problem.
Import Apollo query hook and our queries to App file.
Main page component
Movie page component
Step-8: Add Styles
You can copy them to App.css
Step-9: Start Development Environment
Open two different terminal screen.
Voila
When we click any of the movies, you will see that the URL address will be changed. Let’s click
We created a simple single-page-application. Now, the last part of this tutorial will be making this app works seamlessly with our Django project.
Now you can stop the webpack server from the corresponding terminal screen.
Step-10: Build a Production Environment
Now, We can build our app for a production environment.
When the bundling process is over, Django will use the new index.html file as a template which contains our client-side app. If you successfully build, you’ll have two bundled javascript file in static folder of the root directory, an index.html file in the templates directory.
(Edit: The last line in the urls.py should start with re_path instead of path)
At the beginning of this series, I said that we will develop this project on two servers, but in the production environment, there will only one server.
Now let’s test it.
Please close open terminal sessions and re-open the Django server.
It’s working.
This tutorial series is now over. I hope it will be useful for someone. Criticism, feedbacks and questions are welcome.
Finally, you can find all the code of this tutorial here.
Further Reading
Integrate a React Native App With GraphQL and Apollo Client
Build a Health Tracking App With React, GraphQL, and User Authentication
