Reactjs 实例测试记录

查询记录

babel-loader jsx SyntaxError: Unexpected token [duplicate]

Babel install does not work through npm

初步认识React

mxGraph

Need to integrate mxGraph with react js

Basic Example with Precompiled JSX unexpected token

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

how to render a react component using ReactDOM Render

解决问题SyntaxError: Unexpected token import

http://www.runoob.com/react/react-components.html

相关UI控件

TouchstoneJS - React.js powered UI framework for developing beautiful hybrid mobile apps.
Elemental UI
RSuite | 一个基于 React.js 的 Web 组件库
Ant Design of React - Ant Design
Material-UI
React-Bootstrap
React + Foundation · Foundation as React components
Essence - React Material Design Framework
React-MDL: React Components for Material Design Lite
Belle - Configurable React Components with great UX
MUI - Material Design CSS Framework
Grommet
React Toolbox
react-blazecss 0.4.3 Demo
Pivotal UI: Intro
BFD UI

用例测试记录

 ReactDOM.render(React组件，目标DOM元素) DOM渲染器 

 ExampleApplication React组件  

运行命令

npm install

npm start

=>bundle.js

"This is written with JSX in a CommonJS module and precompiled to vanilla JS by running"

预编译成原生的javascript来运行

这个例子和前一个内容一样不过js部分分离出去了，本地直接打开会报跨域错误

启动一个服务器效果正常

http-server ./ -o

npm install babel-preset-react

babel --presets react example.js --out-dir = build

https://github.com/facebook/react/issues/5578

注意这里的预编译后的js和例3不同，这个不是纯粹原生，运行依旧需要react相关js支持

npm install http-server -g

http-server ./ -o

效果很普通bootstrap模式框点击弹出，但调用方式挺有意思的

magic发生在哪 在哪里做的关联了 诶一 仔细看一看

注意到这段代码看起来是bootstrap的css属性

this.refs.root指向className="modal fade"节点

this.refs.modal指向BootstrapModal组件

### 引入--React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

#### 使用方法

绑定一个 ref 属性到 render 的返回值上：

<input ref="myInput" />

在其它代码中，通过 this.refs 获取支撑实例:

var input = this.refs.myInput;

var inputValue = input.value;

var inputRect = input.getBoundingClientRect();

Example是一个React组件被添加到了（DOM元素jqueryexample下面）

Example组件下面包含了一个BootstrapModal组件和一个BootstrapButton组件

---此刻 我感觉到React组件的是独立的

屏蔽bootstrap的js通过报错可以知道.modal函数是bootstrap的控件函数

className到了运行期的代码里就对应class,而modal类是bootstrap中的控件，关联在这产生了

但是代码里面按钮上并没有 data-tog...属性

也就是这里的按钮组件没有直接和模式框组件产生关联

关联是在Example组件中组织的

目前这个例子就这些理解

需要注意的是onChange={this.handleInputChange.bind(null, 'c')}这种写法

### 引入-React 事件处理

摘自:http://www.runoob.com/react/react-event-handle.html

一个控制样式的组件

需要注意的是React.addons.CSSTransitionGroup

这是个自带的组件功能

This example demonstrates WebComponent/ReactComponent interoperability

by rendering a ReactComponent, which renders a WebComponent, which renders

another ReactComponent in the WebComponent's shadow DOM.

WebComponent/ReactComponent互操作测试  

### 引入 - React 组件

摘自:http://www.runoob.com/react/react-components.html