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:

  1. Django – React Integration with GraphQL: Part 1
  2. Django – React Integration with GraphQL: Part 2

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.
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

List of movies

When we click any of the movies, you will see that the URL address will be changed. Let’s click

 single-page-application

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



Source link

Write A Comment