---
# System prepended metadata

title: Django with Reactjs

---

陳璟璿 南台科大機械系副教授
# Django with Reactjs
Source:
REST API:
https://www.django-rest-framework.org/api-guide/serializers/
web tu.: 
https://www.valentinog.com/blog/drf/#django-rest-with-react-requirements
Basic REST API:
https://www.youtube.com/watch?v=Uyei2iDA4Hs&list=PLillGF-RfqbbRA-CIUxlxkUpbq0IFkX60

## L1 REST API:
先不用posgred，用default DB:
//project
django-admin startproject leadmanager
//app
django-admin startapp leads

database set up->


```
#D:\code_learning\OpenROM\Django\React&Django\leadmanager\leads\models.py
from django.db import models

class Lead(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField(max_length=100, unique=True)
    message = models.CharField(max_length=500, blank=True)
    created_at = models.DateTimeField(auto_now_add=True)
```
python manage.py makemigrations leads
python manage.py migrate //check migrations

make Serializer:
```
# D:\code_learning\OpenROM\Django\React&Django\leadmanager\leads\serializer
from rest_framework import serializers
from leads.models import Lead

# Lead serializer


class LeadSerializer(serializers.ModelSerializer):
    class Meta:
        model = Lead
        fields = '__all__'

```

creat api
```
# D:\code_learning\OpenROM\Django\React&Django\leadmanager\leads\api.py
from rest_framework import viewsets, permissions
from leads.models import Lead
from .serializers import LeadSerializer

# Lead Viewset


class LeadViewSet(viewsets.ModelViewSet):
    queryset = Lead.objects.all()
    permission_classes = [
        permissions.AllowAny
    ]
    serializer_class = LeadSerializer

```

change url
```
#D:\code_learning\OpenROM\Django\React&Django\leadmanager\leadmanager\urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('leads.urls')),
]

```

url in leads:
```
# D:\code_learning\OpenROM\Django\React&Django\leadmanager\leads\urls.py
from rest_framework import routers
from .api import LeadViewSet

router = routers.DefaultRouter()
router.register('api/leads')

urlpatterns = router.urls

```

## L2 Implementing React:

React:
http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/

python manage.py startapp frontend

\frontend\src\component

npm init -y

npm i -D webpack webpack-cli 

npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react babel-plugin-transform-class-properties

npm i react react-dom prop-types

creat .babelrc file (a json object)

```
{
    "presets": ["@babel/preset-env","@babel/preset-react"],
    "plugins": ["transform-class-properties"]
}
```

creat webpack.config.js
```
module.exports = {
    module: {
        rules: [
            {
                //look at all the .js file(regular expression)
                test: /\.js$/,
                //exclude everything in the node modular file
                exclude: /node_modules/,
                //use babel to transpile code
                use: {
                    loader: "babel-loader"
                }
            }

        ]
    }
}
```

```
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
change to

  "scripts": {
    "dev": "webpack --mode development ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js",
  },
```

index.js
```
import App from './components/App';
```
App.js in folder component
```
import React, { Component } from 'react'
import React from 'react-dom'

class App extends Component {
    render(){
        return <h1>React App</h1>
    }
}
//in dev app of index.html
ReactDOM.render(<App />,document.getElementById('app'))
```
...不知漏了多少步驟

view.py
```
from django.shortcuts import render

# point to template


def index(request):
    return render(request, 'frontend/index.html')
```

link url:
creat frontend/urls.py
```
from django.urls import path
from . import views
urlpatterns = [
    # index.html
    path('',views.index)
]
```
leadmanager add
```
path('', include('frontend.urls')),
```

 npm run dev

to 25min error























