reactJS开始学习一

快速开始

npm install react --save
- 创建组件
npm install react-dom --save
- 将组件渲染到dom上
  使用helloworld

// 1.引入react react-dom
var React = require('react')
var ReactDom = require('react-dom')

// 2.创建一个helloworld组件
var HelloWorld = React.createClass({

  // 这个render的方法里必需返回一个组件
  render:function(){
    console.log(111111)
    //..
    // 返回组件, 我们是把这里的div当成组件
    return <div>世界你好</div>
  }
})

// 3.渲染组件到页面上去
// 第一个参数，是我们需要渲染的组件
ReactDom.render(
  <HelloWorld />,  // 这里也可以写成双标签
  // 第二个参数，是组件要被渲染到的位置的dom元素的对象
  document.getElementById('box')
  )

注意 React组件中的标签必需写在闭合标签(单双标签都可以)
注意不能在标签使用有js关键字的属性，如class,如果要用写成className

操作样式

1.使用className方式 className指的是class
2.使用内联的方式
- 在当前标签上加上style属性，值为一个js对象：
- 这个tmpStyle里就是以key,value表示样式,把有-的属性名改成驼峰写法

this.state

注册事件

在组件上使用 on事件名来注册事件,事件名改成驼峰写法
如:
onChange

this.state

我们只能够通过this.state改变组件中的内容，而不能通过编辑组件内容改变this.state
如: 如果给input value设置this.state属性值就不可编辑。
只能通过改变this.state的属性值来改变input的value

获取dom对象 this.refs与ref属性

在组件中的属性上使用ref属性，给一个如:

最终react会帮助我们自动获取这组件对应的dom对象(原生)，存储到this.refs上,且key
ref指向的值. this.refs.tmp

组件之间的嵌套

直接在一个组件内部，以标签形式使用别一个组件。
在单独的模块中创建一个组件，并把这个组件暴露出去。

// 在userinfo.jsx里只创建组件，导出组件
// 在index.jsx中引入userinfo.jsx组件，并渲染到页面上去
var React = require('react')

// 创建个人信息组件
var UserInfo = React.createClass({
  render:function(){
    console.log('---')
    console.log(this)
    console.log('---')
    return (
      <div>我是{this.props.name}，我{this.props.age}岁了</div>
      )
  }
})
// 导出组件
module.exports = UserInfo

再另一个文件中引入创建的组件

// 1.引入依赖的包
var React = require('react')
var ReactDOM = require('react-dom')

// 2.引入依赖的组件,用户的信息标签组件userinfo.jsx
var UserInfo = require('./userinfo.jsx')

// 3.创建自已的组件，并在组件中使用userinfo.jsx组件
var Index  = React.createClass({

  render:function(){
    var arr = [
    {id:1,name:'小明',age:18},
    {id:2,name:'小红',age:28},
    {id:3,name:'小月',age:38},
    {id:4,name:'小黑',age:48},
    {id:5,name:'小白',age:8},
    ]
    var arr2 = [
   <UserInfo key="1" name="小明和小红" age="18" />,
   <UserInfo key="2"  name="小红" age="18" />,
   <UserInfo key="3" name="小强" age="18" />,
   <UserInfo key="4" name="小红和小强" age="18" />,
    ]
    return (
      <div>
        {
          // 组件标签中的属性会被添加到组件里的对象的props属性中
        }
        {
          // arr2
        }
        {
          arr.map(function(item){
            return <UserInfo key={item.id} name={item.name} age={item.age} s="{item.name}"  />
          })
        }
      </div>
      )
  }
})

// 4.渲染组件
ReactDOM.render(
  <Index />,
  document.getElementById('box')
  )

组件之间的值传递:

组件内部可以接收到组件所在标签的属性值:
通过this.props接收,它包含的该组件所在标签的所有的属性值


var UserInfo = React.createClass({
 render:function(){
   this.props 这里就是所有属性值。
 }
 })
<UserInfo key={item.id} name={item.name} age={item.age}

注意

直接改变this.props.属性值不会使得组件重新渲染
this.state
必须要调用this.setState({}),才能重新渲染组件，
父组件重新渲染，子组件也会跟着渲染

使用es6写法

使用再安装：npm install babel-preset-es2015

  var Hello = React.createClass({
  getInitialState() {
      return { liked: false };
  },
  render: function() {
      console.log(this.state.liked);
      return(
          <div>
              <h1 style={style}>Hello world</h1>
              <br/>
              <image/>
          </div>
      )
  }
});

  export default class Hello extends Component {
  constructor(props) {
      super(props);

      this.state = { count: 'es6'};
  }
  render() {
      return (
          <div>
              <h1 style={style}>Hello world{this.state.count}</h1>
              <br/>
              <image/>
          </div>
      )
  }
}

快速开始

使用helloworld

操作样式

this.state

注册事件

this.state

获取dom对象 this.refs与ref属性

组件之间的嵌套

组件之间的值传递:

注意

使用es6写法

相关链接