我的React开辟之路1:React的环境搭建

2024年4月28日 136次阅读 来源: jimmycarry

React是大脸书出的一个前端开辟框架。与其说是一个框架，我越发以为React更是一种形式，从2015年10月份最先打仗React，我就以为这个框架今后一定会火。React是一个单向数据流的框架，不同于Vue和Angular的双向数据绑定 React的单向数据流能够数据形式越发单一，更利于前端的保护。 好了，空话不多说 假如想细致进修React，能够参考我今后的教程或许参考网上大批的材料 另有全能的github
React环境的搭建
起首得邃晓React的开辟是基于JSX去开辟的，所以我们第一步做的就是编译JSX 由于一般的浏览器并不懂的JSX 固然你也能够如许:

<script type="text/babel">
  //TODO your jsx
</script>

个人十份不发起用以上的体式格局由于异常不利于代码的保护和开辟而且也有种种的兼容性问题 固然 你想测试jsx就能够是用 编译JSX的体式格局异常多：webpack browserify+gulp+babelify 或许运用TypeScript用微软的编译器去编译
起首本人比较习气第二种体式格局 也是引见第二种体式格局
第一步
装置必要的东西 node.js gulp
装置node.js 去官网装置node的最新版 下载依据提醒装置即可
装置gulp 在node装置完以后 你须要用npm的敕令去装置gulp :

npm install gulp -g

装置好gulp以后，就最先构建项目，能够新建一个目次名字，敕令行指向该目次，也就是cd到此目次
输入以下的敕令：

npm init

依据提醒做完以下的事情以后， 在目次中就会有一个名字叫做package.json的文件，然后就须要一些装置一些开辟插件了
1、我们须要将gulp装置到项目目次里来；

npm install gulp --save//
//或许
npm install --save gulp

2、装置browserify ，browserify-shim，babelify vinyl-source-stream babel-preset-es2015 babel-preset-react

npm install browserify browserify-shim babelify vinyl-source-stream babel-preset-es2015 babel-preset-react --save-dev

这一步主如果装置一些编译器和一些必要的插件 细致怎样用后面会细致的说
3、装置react 和react-dom

npm install react react-dom --save

既然是react的开辟 就必须要有react
4、写好babel的设置：
建立一个叫做.babelrc的文件 在内里输入以下的代码

{
  "presets": ["react","es2015"]
}

这个是babel编译器须要的插件用来编译es6和react的jsx的语法
5、建立一个叫做gulpfile.js的文件 这个是gulp的实行文件 以下代码是一个简朴的构建react项目的gulpfile.js的代码

//gulp须要的模块
var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var babel = require("babelify");

//gulp 使命 用于建立当地服务器 
gulp.task("connect",function(){
    connect.server({
        root:"./",
        port:"3000",
        livereload:true,
        host:'localhost'
    })
});
//编译使命 
gulp.task("browserify",function(){
     //entris:进口文件的js  
    return browserify({entries: './domsrc/app/Main.js', extensions: ['.jsx']})
         //用babel转换
        .transform(babel)
        //须要browserify-shim转换
        .transform(require('browserify-shim'))
        //bundle兼并
        .bundle()
        .pipe(source('bundle.js'))
        //编译文件目的目次
        .pipe(gulp.dest('./bin-debug'));
});

6、package.json的设置文件修正:

  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }

将这段代码加入到package.json内里 就能够了 如今环境基础已搭建完成

测试
我们在工程目次下建立一个名为domsrc的目次 在这个目次下在建立一个app目次 内里建立一个Main.js的文件，
文件里的代码参考以下

var React = require("react");
var ReactDOM = require("react-dom");
class Main {
    constructor(){
        ReactDOM.render(<div>Hello World</div>,document.getElementById("content"));
    }
}
new Main();

然后在该目次下实行以下敕令行

gulp browserify

能够看到在bin-debug生成了bundle.js的文件

    原文作者：jimmycarry
    原文地址: https://segmentfault.com/a/1190000005167620
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞