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')
);