zoukankan html css js c++ java

react 学习与使用记录

相关技术：webpack+react+react-router+redux+immutable

郭永峰react学习指南

1.git bash--windows命令行工具 --教程下载地址

2. immutable immutable的基础操作中文基础操作文章

2.1 es6运行编译环境搭建

3. js创建对象的几种方法

4.阮一峰全栈开发教程

5.react--api

6.redux-ruanyifeng redux文档

疑问点：

关于react-router中props传递的问题

-----1.className 有多个的时候

　　（1）用拼接字符串的方法

　　　　<div className={value.class + " " + value.class2}>{value.value}</div>

　　　（2）用字符串模板也行

　　　　<div className={`${value.class} ${value.class2}`}>{value.value}</div>

　　　　　　花括号里面就是可以运算的部分啊

　　（3）如果是数组的话直接join也行啊

　　　　<div className={classnames.join(" ")}>{value.value}</div>

举例：<div className={`header ${className || ''}`}>

------------------------------------------------------------

阮一峰 react教程

1.demo1---3 练习

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
  <!-- 不能少逗号，render里不能加分号 -->
  <!-- ReactDOM.render（）用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 -->
    <div id="example"></div>
     <div id="aa"></div>
      <div id="bb">
        <!-- 如果这个变量是一个数组，则会展开这个数组的所有成员 注意：字符串要加'',数字不用-->
      </div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );

      var ages=['12','45','67','90'];
      ReactDOM.render(
      <div>
        {
        ages.map(function (age){
        return <div>age:,{age}!</div>
        })
        }
      </div>,
      document.getElementById('aa')
      );

var myArray= [
        '12222ggg',
        '3455555ggg',
        '455444ggg'
      ];
var myArrayNum= [
    12222,
    3455555,
    455444
  ];
var myArrayHtml= [
  <h1>1245444</h1>,
  <h2>2222222</h2>,
  <h3>56898</h3>
];
ReactDOM.render(
<div>
 {myArray}
 {myArrayNum}
{myArrayHtml}
</div>,
document.getElementById('bb')
);
    </script>
  </body>
</html>

View Code

2.demo4--5 练习

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example">
      <!-- React.createClass 方法就用于生成一个组件类.
          组件类只能包含一个顶层标签，否则也会报错。
       -->
    </div>
    <div id="bb">
      <!-- this.props.children 属性。它表示组件的所有子节点 -->
      <!--  React.Children.map() 注意大小写 -->
      <!--  ReactDOM.render() 必须分情况写，不能都写到一个render里 -->
    </div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
      render: function(){
        return <h3>hello {this.props.name} <a>age:{this.props.age}</a></h3>
      }
      });

      var MoreChilds = React.createClass({
      render:function(){
        return (
        <ul>
          {
          React.Children.map(this.props.children,function(child){
              return <li>{child}</li>
          })
          }
        </ul>
        );
      }
      })

      ReactDOM.render(
      <HelloMessage name="20161206test" age="13"></HelloMessage>,
      document.getElementById('example')
      );
      ReactDOM.render(
      <MoreChilds>
        <span>morechild1</span>,
         <span>morechild2</span>
      </MoreChilds>,
      document.getElementById('bb')
      );

    </script>
  </body>
</html>

View Code

3.demo6 练习

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example">
            <!-- 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求 -->
    </div>
    <div id="aa">
      <!-- data_12变量直接输出 -->
    </div>
     <div id="bb">
      <!-- 虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 -->
    </div>
    <script type="text/babel">
      var data = 123;

      var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isRequired,
        },

        render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });
      ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById('example')
      );

      var data_11 = 12456;
      var MyTitle_11 = React.createClass({
          propTypes:{
          title: React.PropTypes.string.isRequired,
          },
          handleClick:function(){
              this.refs.myTextInput.focus();
          },
          render:function(){
            return (
            <div>
              <h3>{this.props.title}</h3>
              <input type="text" ref="myTextInput" />
              <input type="button" value="Focus the text input" onClick={this.handleClick} />
            </div>
            )
          }
      });
      ReactDOM.render(
        <MyTitle_11 title={data_11} />,
        document.getElementById('bb')
      )

      var data_12 = 'test123';
      ReactDOM.render(
            <h2>{data_12}</h2>,
            document.getElementById('aa')
      )

    </script>
  </body>
</html>

View Code

4.demo8 练习

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
     <div id="bb">
       <!-- getInitialState 获得初始默认状态；this.setState 方法就修改状态值 -->
       <!-- onClick={this.handleClick}  点击调用操作函数handleClick -->
       <!-- 区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 -->
     </div>
    <script type="text/babel">
var LikeButton11 = React.createClass({
  getInitialState: function(){
  return {liked:false};
  },
  handleClick:function(){
    this.setState({liked: !this.state.liked});
    console.log("yyyyyy");
  },
  render: function(){
    var text= this.state.liked ? 'like' : 'nononononno';
    return (
    <p onClick={this.handleClick}>
      你 {text} 点击了切换
    </p>
    );
  }
});

ReactDOM.render(
<LikeButton11 />,
document.getElementById('bb')
);
    </script>
  </body>
</html>

View Code

5.demo9 练习

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <div id="aa">
      <!-- ，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况 -->
      <!-- function(event) {   //event 不能忘加
            this.setState({value: event.target.value}); //设置值
             var value = this.state.value;  //勿忘定义
          } -->
    </div>
    <script type="text/babel">
        var Input11 = React.createClass({
          getInitialState:function(){
            return {value:'hello111!'};
          },
          handleChange:function(event) {
            this.setState({value: event.target.value});
          },
          render:function(){
            var value = this.state.value;
            return (
              <div>
                <input type="text" value={value} onChange={this.handleChange} />
                <p>{value}</p>
              </div>
            );
          }
        });
    ReactDOM.render(<Input11/>,document.getElementById('aa'));

    </script>
  </body>
</html>

View Code

查看全文

相关阅读:
Java正则表达式学习贪婪勉强侵占
 HTML meta
URLConnection类
 Sql Server 查看所有存储过程或视图的位置及内容
 创建你的第一个游戏Pong——挑战：改进您的Pong游戏
 解决锚点在IE8中失效
 辅助类——掌握内容管道
 辅助类——随机函数（RandomHelper）辅助类
 创建你的第一个游戏Pong——疑难解答
 辅助类——概览

原文地址：https://www.cnblogs.com/lanyueff/p/6097187.html