【已解决】react、react-dom、JSX，babel、babel-preset-react、webpack、RequireJS、Browserify的介绍、学习地址整理

React:

是一个用于构建用户界面的 JavaScript 库，主要用来构建 UI。点击进入：React 中文文档。

react-dom:

这个包提供了 DOM 特定的方法，引用：import ReactDOM from 'react-dom';

常用接口：render(), ReactDOM.render(element, container[, callback])；

JSX:

JSX 是 JavaScript 的扩展，使用 React，可以使用原生 JS, 也可以使用 JSX（推荐）。

    // 使用 JSX
    React.render(
        <h1 className="head">hello</h1>,
        document.getElementById('test')
    )

    // 不使用 JSX
    React.render(
        React.createElement('h1', {className:'head'}, 'hello'),
        document.getElementById('test')
    )

JSX 是 HTML 和 JavaScript 的混合，当遇到 < 时，当作 HTML 解析，遇到 { 时，当作 JS 解析。

    React.render(
        <div>
            { i > 0 ? <div>hello</div> : <a/>}
        </div>,
        document.bdy
    )

babel:

Babel 是一个 JavaScript 编译器，点击进入 Babel 中文网。

babel 的配置文件是 .babelrc。

即当你使用最新的 JavaScript 语法时，Babel 通过语法转换器，将它转换成浏览器兼容的 JavaScript 代码。

使得我们可以立刻使用新语法，无需等待浏览器支持。例如

    // 下一代 JavaScript 语法
    [1,2,3].map(n => n+1);

    // 转换为浏览器兼容的 JS 代码
    [1,2,3].map(function(n){
        return n+1;
    });

babelify:

babel-preset-react

babel--preset-react 是一个 react 的转码规则集。点击进入阮一峰 Babel 入门教程。

presets 字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

    // ES2015转码规则
    npm install --save-dev babel-preset-es2015

    // react转码规则
    npm install --save-dev babel-preset-react

    // ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
    npm install --save-dev babel-preset-stage-0
    npm install --save-dev babel-preset-stage-1
    npm install --save-dev babel-preset-stage-2
    npm install --save-dev babel-preset-stage-3

然后将这些规则加入 .babelrc，如下：

      {
        "presets": [
          "es2015",
          "react",
          "stage-2"
        ],
        "plugins": []
      }

webpack

是模块打包机, 它可以打包所有的资源，包括 .js .css .jpg 等等。点击进入 webpack中文文档，和入门Webpack，看这篇就够了。

RequireJS

是一个JavaScript模块加载器（来自百度百科）。点击进入阮一峰：Javascript模块化编程（三）：require.js的用法。

Browserify

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

点击进入：前端模块及依赖管理的新选择：Browserify

【已解决】react、react-dom、JSX，babel、babel-preset-react、webpack、RequireJS、Browserify的介绍、学习地址整理

猜你喜欢