React使用相关问题

react相关资料

reason react

A ReasonReact Tutorial

reason-react

Quickstart

npm镜像

用国内的源（Source）替换官方源，提高下载速度（包括Homebrew, npm 和 Composer 等）

react项目创建和使用

Tutorial: Intro To React

如何学习React

Why did we build React?

【译】给它个五分钟

Give it five minutes

示例程序

js库替换，某些源无法访问，这里使用cdn.bootcss.com

BootCDN

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://cdn.bootcss.com/react/0.14.7/react.js"></script>
    <script src="https://cdn.bootcss.com/react/0.14.7/react-dom.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    // 通过props获取传入新的组件的数据，这里<HelloWorld date=""/>将HelloWorld当作HTML组件使用，如<image src=""/>
    var HelloWorld = React.createClass({
        render: function() {
//            return (
//                <a href="https://facebook.github.io/react/">Hello React!</a>
//            );
            return (
                    <p>
                        Hello, <input type="text" placeholder="Your name here" />!
                        It is {this.props.date.toTimeString()}
                    </p>
            );
        }
    });

    // 设置间隔更新数据
    setInterval(function() {
        ReactDOM.render(
                <HelloWorld date={new Date()} />,
            document.getElementById('example')
        );
    }, 500);
</script>
</body>
</html>

动态创建组件

ReactDOM渲染第一个参数为JSX语法组件，在JavaScript 代码里写着XML格式的代码称为JSX。

var root = React.DOM.ul({ className: 'my-list' },
       React.DOM.li(null, 'Text Content')
   );
   ReactDOM.render(root, document.getElementById('example'));

react-tutorial

调试

自动刷新

安装插件JetBrains IDE Support并设置Host:127.0.0.1 Port: 63342

WebStorm + JetBrains IDE Support 实现自动刷新功能

WebStorm快速开发之浏览器自动刷新

React在webstorm和webpack下的初始配置

reactjs中的refs使用

var author = ReactDOM.findDOMNode(this.refs.author).value.trim();
var text = ReactDOM.findDOMNode(this.refs.text).value.trim();

render() {
    return (
        <form className="commentForm" onSubmit={this.handleSubmit.bind(this)}>
            <input placeholder="Your Name" ref="author"></input>
            <input placeholder="Your Comment" ref="text"></input>
            <input type="submit" value="Post"></input>
        </form>
    );
}

Cannot read property ‘refs’ of null react error react js

Reactjs中报错： refs is not defined问题

React find DOM node by refs set to variable?

React.findDOMNode()

this.refs 和 ReactDOM.findDOMNode 区别是什么？

Refs and the DOM

constructor用法

高版本react无法使用getInitialState，只能使用constructor方法。

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // data: data
            data: []
        };
    }
}

Class extends React.Component can’t use getInitialState in React

What is the difference between using constructor vs getInitialState in React / React Native?

Disable React.createClass and PropTypes deprecated warnings in babel react present

多个组件构成的List键值问题

class CommentList extends React.Component {
    render() {
        var commentNodes = this.props.data.map(function (comment) {
            return <Comment key={comment.author} author={comment.author}>{comment.text}</Comment>
        });
        return (
            <div className="commentList">
                {commentNodes}
            </div>
        );
    }
}

Understanding unique keys for array children in React.js

react 对循环warning提示增加key的研究