前端之React实战-快速入门以及集成使用

时间 2020-03-16

标签前端 react 实战快速入门以及集成使用栏目 React 繁體版

原文原文链接

Quick Start

HelloWorld

基本的React的页面形式以下所示：javascript

<!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"></script>
        <script src="../build/JSXTransformer.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/jsx">
          // ** Our code goes here! **
        </script>
      </body>
    </html>

React首创了一种JS、CSS和HTML混写的JSX格式，能够经过在页面中引入JSXTransformer这个文件进行客户端的编译，不过仍是推荐在服务端编译。html

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。要注意的是，React的渲染函数并非简单地把HTML元素复制到页面上，而是维护了一张Virtual Dom映射表。java

class ExampleComponent extends React.Component {
 constructor() {
  super();
  this. _handleClick = this. _handleClick.bind(this);
  this.state = Store.getState();
 }
 // ...
}

Setup:开发环境搭建

完整的React开发环境应该包括了JSX/ES6的解析以及模块化管理，笔者在这里是选用了WebPack与Babel。Webpack是一个强大的包管理以及编译工具，node

参考资料react

react-webpack-cookbookwebpack

Webpack

Webpack是一个很是强大依赖管理与打包工具，其基本的配置方式能够以下：

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

config = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
    resolve: {
        alias: {
          'react': pathToReact
        }
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel'
        }],
        noParse: [pathToReact]
    }    
};

module.exports = config;

Project Structure：项目结构

一个典型的项目结构你能够参考这个仓库。git

config/  
    app.js
    webpack.js (js config over json -> flexible)
src/  
  app/ (the React app: runs on server and client too)
    components/
      __tests__ (Jest test folder)
      AppRoot.jsx
      Cart.jsx
      Item.jsx
    index.js (just to export app)
    app.js
  client/  (only browser: attach app to DOM)
    styles/
    scripts/
      client.js
    index.html
  server/
    index.js
    server.js
.gitignore
.jshintrc
package.json  
README.md

Integrated With Angular

Angular与React是笔者喜欢的两个框架，两者能够相辅相成。能够查看笔者的这个库。es6

Integrated With jQuery

ES6

refactoring-react-components-to-es6-classesgithub

ES6是一门很是让人兴奋的语言，而React自身的譬如JSX这样的语法也是别具特点，笔者一向坚持从如今开始就普遍使用ES6。而在React的实践编程中，若是须要彻底使用ES6语法进行开发，须要注意如下几点。web

使用Class代替createClass

Before

var ExampleComponent = React.createClass({
 render: function() { 
  return <div onClick={this._handleClick}>Hello, world.</div>;
 },
 _handleClick: function() {
  console.log(this);
 }
});

After，这里要注意将类的方法绑定到当前对象，避免在方法内部this指针被覆盖

class ExampleComponent extends React.Component {
 constructor() {
  super();
  this. _handleClick = this. _handleClick.bind(this);
 }
 render() { 
  return <div onClick={this._handleClick}>Hello, world.</div>;
 }
 _handleClick() {
  console.log(this); // this is an ExampleComponent
 }
}

在Constructor中初始化State

若是使用createClass方法建立一个Component组件，能够自动调用它的getInitialState方法来获取初始化的State对象，可是在ES6的Class中并不会如此自动调用，所以，要稍做修改。

Before

class ExampleComponent extends React.Component {
 getInitialState() {
  return Store.getState();
 }
 constructor() {
  super();
  this. _handleClick = this. _handleClick.bind(this);
 }
 // ...
}

After

class ExampleComponent extends React.Component {
 constructor() {
  super();
  this. _handleClick = this. _handleClick.bind(this);
  this.state = Store.getState();
 }
 // ...
}

Mixin

Mixin是React中很是好用的一个功能，可是ES6提倡的面向对象，即便用类继承等方式来进行传递。若是须要在ES6中继续使用Mixin，特别是大量现存的React Library中的Mixin功能，能够有如下几种方式：

使用extends继承，而后在对应方法中调用父类方法。
参考react-mixin这个库。