ReactJS编程（一）

源于facebook13年开源 js框架，用于构建页面的js库。使用简单，直接在web页面引用react 三个核心js包即可。

• react.min.js - React 的核心库
• react-dom.min.js - 提供与 DOM 相关的功能
• babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

基本语法

1.定义变量： const 关键字

JS 使用 var定义一个变量 ；react使用 const，如const div = document.createElement('div');

2.元素渲染：render方法

ReactDOM.render(...) 是页面渲染方法，所有的 js,html 都可通过它进行页面渲染

//定义一个页面元素JSX语法（js的语法扩展，html+js）
const element = <h1>Hello, world!</h1>;
//把定义的元素传递给 ReactDOM.render() 的方法来将其渲染到页面上：
ReactDOM.render(
    element,
    document.getElementById('example')
    );

注：react中用{}接收js表达式，如{1+1}；{i == 1 ? 'True!' : 'False'}；注释： {/*注释...*/}

计时器sample

//封装创建一个 React.Component 的 ES6 类，该类封装了要展示的元素
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
//每隔1s调用一次tick方法；tick将当前时间赋值给clock类，通过props获取时间，渲染页面
setInterval(tick, 1000);

//注：
 1 使用 ES6 类写法，用 this.props.属性名 来取值
 2 使用props 赋值，并从props中获取值显示页面
 3 定义的class 就等同于自定义标签类，用<Color ，<Name 类展示对应值

使用props赋值传递sample
 

//自定义三个类，分别用于接收props不同属性值
class Name extends React.Component {
  render() {
    return <h1 网站名称：{this.props.name}</h1>;
  }
}
class Url extends React.Component {
  render() {
    return <h1>网站地址：{this.props.url}</h1>;
  }
}
class Nickname extends React.Component {
  render() {
    return <h1>网站地址：{this.props.nickname}</h1>;
  }
}

//自定义app函数，使用name、url标签
function App(props) {
    return (
        <div>
            <Name name={props.name}/>
            <Url  url={props.url}/>
            <Nickname  nickname={props.nickname}/>
        </div>
    );
}
//渲染页面，传入name url等参数显示页面
ReactDOM.render(
     <App name={"react"} url={"http://www.runoob.com"} nickname={"Runoob"}/>,
    document.getElementById('example')
);