# Backend & Frontend ## environment #### Using VS Code **Extensions:** Django React ES7 Javascript(ES6) ### Tutorial https://developer.mozilla.org/zh-TW/docs/Learn/Server-side/Django ``` pip install django djangorestframework ``` ``` npm install ``` ``` npm i webpack webpack-cli --save-dev npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev npm i react react-dom --save-dev npm install @material-ui/core npm install @babel/plugin-proposal-class-properties npm install react-router-dom npm install @material-ui/icons ``` # Backend ## Start a project ``` django-admin startproject Maistore ``` ``` django-admin startapp frontend ``` Do this whenever changes are made to database ``` python ./manage.py makemigrations ``` ``` python ./manage.py migrate ``` ``` python ./manage.py runserver ``` ## 匯入Sql Table 資料庫建好以後 顯示內容： ``` python manage.py inspectdb ``` 將sql table直接轉換為models加入models.py的檔案裡： ``` python manage.py inspectdb > models.py ``` ## Backend overview ![](https://i.imgur.com/2HrDnDa.png) # Frontend ``` npm init -y ```