react 安装

在我们讨论到react安装的时候,其实是有好几种方法将我们的项目运行起来的,大部分情况下我们在使用react的项目中我们也会用到JSX的语法,当然如果也可以使用原生的JS来进行编写。网上大部分教程都讲述到使用 CommonJS 模块系统,比如browserifywebpack。我们在这里会说到几种方法:

1、 直接引入react文件和browser.min.js文件


2、 使用node npm gulp进行打包

方法一(直接引入)、


直接在 react官网 下载源文件包,

在我们的项目中直接引入如下两个文件:

  1. <script src="./js/react.min.js"></script>
  2. <script src="./js/react-dom.min.js"></script>

引入成功之后我们就可以直接编写项目了。在这里是不能使用JSX语法的,如果我们还想再项目中使用到JSX的语法,我们还需要引入一个 browser.min.js ,这个文件是专门用来编译JSX语法的。此时我们在编写或者引入的JS文件时需要有所变化,在<script></script> 的标签中不再是 <script type="text/javascript"></script> 而应该写成

  1. <script type="text/babel"></script>

这时我们就可以正常的编写JSX的语法了。最终我们的代码引入文件如下(例):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello React!</title>
  6. <script src="build/react.js"></script>
  7. <script src="build/react-dom.js"></script>
  8. <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="example"></div>
  12. <script type="text/babel">
  13. ReactDOM.render(
  14. <h1>Hello, world!</h1>,
  15. document.getElementById("example")
  16. );
  17. </script>
  18. </body>
  19. </html>

但是我们可以清楚的发现引入的browser.min.js这个文件很大,而且当页面在运行时加载会更慢,因为在每次渲染页面的同时,你的所有JSX语法将会在运行的时候进行一次编译,如果我们是在本地操作可以这样不计成本和效率的实现我们的代码结构,当作为一个项目进行上线的时候,这时一种不科学的做法。

方法二(node打包)


我们也可以使用node进行打包编译,首先我们要确保我们的电脑安装了node、npm、gulp 。关于node安装、npm安装、gulp安装 请参考文章。安装方法很简单。安装成功之后我们打开我们电脑上的终端(windows系统打开CMD,下面就用终端进行代替,其中有些命令有所不同。但我们会进行注明)。

打开终端我们cd到我们的项目目录中,npm常用命令请 参考文章

需要在我们的项目中安装以下模块,并在gulpfile.js 中引入以下模块:

  1. // 获取 gulp
  2. var gulp = require("gulp");//引入gulp
  3. var uglify = require("gulp-uglify");//压缩代码
  4. var minifyCSS = require("gulp-minify-css");//压缩CSS
  5. var imagemin = require("gulp-imagemin");//图片压缩
  6. var less = require("gulp-less");//编译LESS
  7. var babel = require("gulp-babel");//编译ES6
  8. var rename = require("gulp-rename");//修改文件名称
  9. var react = require("babel-preset-react");//
  10. var reactDom = require("react-dom");//

在这里我们引入了很多的模块,有需要使用到的我们可以纷纷使用,包括less编译等等。我在这里主要用到的是编译ES6JSX的语法,文件重命名功能。需要补充的在gulpfile.js中的代码如下(下面的代码将更具自己的项目目录进行适当修改):

  1. /* es6 */
  2. gulp.task("es6",function() {
  3. console.log("es6");
  4. gulp.src("js/*.js")
  5. .pipe(babel({
  6. presets: ["react","es2015"]
  7. }))
  8. .pipe(rename({ suffix: ".min" }))//文件重命名
  9. .pipe(gulp.dest("js/"));
  10. });

我们就可以在终端中运行 gulp es6 对我们的代码进行编译了,编译出来的代码我们就是自动将ES6JSX的语法编译成了原生JS 。同时我们并不希望我们每次编辑完代码之后都需要去执行一次编译命令,我们可以利用gulp进行自动编译,当我们每次保存文件的时候我们的gulp就会自动自行我们的编译功能,当然,如果我们在某次编译中出现了错误,我们的自动编译将会中断。需要手动的执行编译。

自动编译代码如下(我们需要更具自己的项目进行适当编辑以下代码):

  1. gulp.task("auto", function () {
  2. gulp.watch("js/*.js", ["es6"]);
  3. })
  4. gulp.task("default", ["es6","auto"]);

于是当我们 cd 到我们的项目目录之后我们只需要执行 gulp 命令既可以进行自动编译。

评论:

31488856237

12312312