React 项目创建和打包部署到本地服务器

1.React项目创建

npm install -g create-react-app

create-react-app  myProjectName

创建基于Webpack与ES6的简单项目模板

cd  myProjectName

进入创建项目目录

npm start

启动项目

 

2.React项目打包部署到服务器

npm run build

代码会被编译到build目录中

后台使用的是Django框架

 

在后台项目中创建一个static文件夹和templates文件夹

 

React 项目创建和打包部署到本地服务器_第1张图片

在static文件夹中建立四个文件夹分别为css、imgs、js、json

React 项目创建和打包部署到本地服务器_第2张图片

将build目录下的所有文件分别按照后缀名放入对应的文件夹中

React 项目创建和打包部署到本地服务器_第3张图片

 

将build目录下的index.html文件放入

React 项目创建和打包部署到本地服务器_第4张图片

用编辑器打开index.html,调整格式,在head中加一行{% load static %}

然后将所有的js、css、json、图片文件用{% static ' ' %}包起来,'  '这里面的路径要是js/、css/、json/、imgs/下的什么什么

React 项目创建和打包部署到本地服务器_第5张图片

 

打开cmd,进入后台项目文件夹中,然后输入python manage.py runserver 

启动Django

React 项目创建和打包部署到本地服务器_第6张图片

在浏览器中输入在package.json中配置的代理地址,即可以显示项目界面

 

React 项目创建和打包部署到本地服务器_第7张图片

React 项目创建和打包部署到本地服务器_第8张图片

 

 

 

 

 

 

 

 

你可能感兴趣的:(React)