前端:react环境配置

react.js 基于node.js环境. 

node.js下载:https://nodejs.org/en/

本文介绍使用facebook提供的create-react-app 构建环境, 基于webapck工具(https://webpack.github.io/)和es6(js下一代语法标准)

使用CLI(命令行)构建:

npx create-react-app my-app
cd my-app
npm start

 会在你当前目录下创建一个my-app的文件夹, 第三行命令,启动项目,自动打开默认浏览器

启动完成:

项目结构:

默认使用3000端口

也可以使用传统方法: 使用script 标签引入html文件方法如下:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- 生产环境中不建议使用 --> <

script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

目录解析:

public下的index.html文件是页面:

app.js 封装了一个react组件

index.js 使用了这个组件,并加载到index.html文件中. 

编写index.html和index.js 这两个文件.

 

编写完毕后运行 npm run build ,将引用到的css,js等  按需要 打包. 生成build文件夹  如下: 

将整个目录copy到项目中

如果页面展示效果不对.浏览器 调试:   可以看到是路径不对.   大部分都是html 引用js 路径不对.   自己根据项目静态资源路径更改即可