React-Django QuickStart #1

Seated in React: A Journey from Beginner to Builder

This is a tutorial to get you started in React and Django. Honestly, when I started, there was a lot of material on ReactJS but not much about how to work with both React and Django.

I started learning React and Django last year, and the best way to learn is to start a project rather than focusing a lot on the theoretical part. Not that we shouldn’t know about theory, but looking at the practical counterpart helps in grasping the concepts faster (Honestly, the theoretical stuff, even I’m still not on terms with it🥲).

My blogs (yes, like multiple blogs around React; idk how I’m going to come up with so much content, but this is a start) are going to be very specific to React and Django, and to style the React frontend, I’ll mostly use Tailwind CSS and React Bootstrap.

Let’s get started…

So, for starting a React app, we need Node.js and npm. Install Node.js from the official website.

Node.js is a JavaScript runtime, i.e., it allows us to run JavaScript code on our computer.

Node Package Manager (npm) is a package manager for JavaScript. It allows us to install, share, and manage external packages — basically the tools and libraries needed for developing web applications. Installing Node.js automatically installs npm.

It is a very convenient way of accessing packages. One small command and boom you have the whole tool ready for access.

I mostly use VSCode as my editor, but you guys are free to use whatever you are comfortable with.

Create-React-App

Global installation (in my suggestion, do not use this method)

This is the command you use for creating new React projects. Whenever you go, like I have to create a new project which is like most of the time (not the I-have-new-idea kinda new project but more like the old-project-has-so-many-errors-that-i-cannot-even-figure-out-what-exactly-went-wrong-so-lets-start-anew kinda new project).

It’s a command-line tool. For those starting in React, you guys will have to install this utility.

Open cmd once Node.js is installed and type this command.

npm install -g create-react-app

CRA (create-react-app) is what sets up a new React project for you with default configurations.

Once it is done you can go to any folder you want to create the new React project in. So, like when I started React, I never understood how I was supposed to open a particular folder path in cmd. Should I just go like cd some/path? Then a friend told me about this…

Opens that folder path in cmd

We can also open VSCode for this folder. Once cmd for this folder path opens just type the command (this is just something extra, okay? 😅)

code .

Now, once the folder path for where you want to make your React project is open in the cmd you use the command-line tool.

create-react-app nameofyourapp

This is the workflow with a global installation.

Using npx (this is a better a way to create react apps)

In simple words, npx is a command-line tool that helps us use tools like create-react-app without installing them permanently on our computer.

npx create-react-app nameofyourapp

nameofyourapp I usually use frontend as the app name.

Get Niharika Patil’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

When we use npx create-react-app frontend, it fetches the latest version of create-react-app from the npm registry and runs it, creating a new React.js project in your current directory.

Run React App

Next, we move into the project folder.

cd frontend

And start the development server here.

npm start

The development server is what hosts our React application, allowing us to interact with and view various web components in a web browser. It is used to quickly launch a local server and work on the application in a development environment.

Project Structure

I did say that I’m not going to go into the theoretical part, but understanding the project structure generated by the CRA is kind of important too 😣😥.

This is what is found inside the folder.

node_modules folder:

This contains all the third-party packages and libraries on which our project depends. CRA adds all the default ones initially when a project is created. But if you want to use something like Tailwind CSS, we install it, and that dependency is added to this folder.

src folder:

The src folder holds the source code of our React application, including all the pieces (components) used to build the application.

It has the following files:

1. index.js: Starting point of the app.
2. App.js: This is the main component that will get displayed when we run the command npm start. App component is the one that gets called in index.js.
3. index.css: Contains the global styles that apply to the whole application.

public folder:

The public folder holds static files that can be used directly, without any processing.

It is the place where we put things that don’t change or get transformed during the build process of your React app.

The build process involves packaging up your React app for deployment. It involves transforming and optimizing your source code and assets into a format that’s efficient for browsers to understand and load quickly.

package.json and package-lock.json:

These files store metadata about the project and its dependencies.

Last Note…

React is not a framework!!!

ReactJS is a JavaScript library, not a framework.

The key difference between the terms is in terms of flexibility.

Library provides various sets of tools, basically a collection of tools, and these tools can be individually used for specific tasks.

Framework can be seen as a pre-defined structure that dictates how our entire application should be organized and operated.

Think of Lego pieces using different pieces to create a castle or house, whatever you like using these pieces. Framework can be seen as a predesigned castle building workbook that provides us with the instructions to build this castle. When we follow the instructions, we create a castle, and we can customize certain parts only.

Angular is a framework.