How to start a React projectStep 1: Create a folder with the preferred project name.
Step 2: Navigate inside the folder and run the following command without quotes: "npx create-react-app ." The dot at the end of the command tells the system to create the project files inside the current directory/folder.
* It might pop a message "Need to install the following packages: create-react-app@5.1.0 or newer version" you have to enter "y" from keyboard and press enter.
* You might experience an error saying "npx is not recognized..." It happens when you don't have node.js installed in your system or node.js is not added into your path variable. React requires node.js to run. Go to the official website of node.js and install it.
*** step 1 & step 2 can be combined together. You can run the command "npx create-react-app project-name"
Step 3: Run the command without quotes "npm start". This step is just for checking whether your project runs or not. It starts a development server at port 3000 of localhost. You can make changes to app.js and watch the results on development server.
Common error debugging
Developers frequently face Could not read package.json It usually happens because you ran npm start while outside of the project folder where package.json file exists.
Tailwind style not loading with CDN
Most probably you added tailwind cdn <script> in your js files. To make the cdn work you have to put it inside <head> tag of index.html located in the public folder. This is not recommended for production environment.
<script src="https://cdn.tailwindcss.com"></script>
Django Backend
When using django backend, your django development server will be running on 127.0.0.1:8000 and react on localhost:3000. As a result when react will send information to django server it will encounter CORS error.
On your react app you might see Uncaught error. If you open the inspect window and navigate to network tab. You will see status of CORS error.
To avoid this error you must install django cors header package using pip install django-cors-headers list corsheaders under installed apps of django settings.py, also make sure "corsheaders.middleware.CorsMiddleware", is on top of "django.middleware.common.CommonMiddleware", in the MIDDLEWARE section. Lastly, allow your react origin
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
]
JWT - Jason Web Token
JWT is the standard way to connect a react app with django backend. By installing simplejwt package you can easily use it.
pip install djangorestframework-simplejwt
After installation, add the following in the settings.py
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_simplejwt.authentication.JWTAuthentication',
),
'DEFAULT_PERMISSION_CLASSES': (
'rest_framework.permissions.IsAuthenticated',
),
}
Next add jwt urls.
from django.urls import path
from rest_framework_simplejwt.views import (
TokenObtainPairView,
TokenRefreshView,
)
urlpatterns = [
# ... your other urls
path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]