参考出典菜鳥教程前期はNode.jsとwebpackが必要
Reactインストール
Reactは直接ダウンロードして使用することができ、ダウンロードパッケージにも多くの学習例が提供されています.
このチュートリアルではReactのバージョン16.4.0を使用しています.公式サイトでhttps://reactjs.org/最新版をダウンロードします.Staticfile CDNのReact CDNライブラリを直接使用することもできます.アドレスは以下の通りです.参照時に部分に書きます.

のCDNアドレス:

3つのライブラリを :
react.min.js-Reactのコアライブラリreact-dom.min.js-DOMに する babel.min.js-Babelは、ES 6コードをES 5コードに することができ、 のES 6ブラウザではサポートされていないReactコードを することができます.BabelにはJSXへのサポートが み まれています.Babelとbabel-sublimeパッケージを に することで、ソースコードの レンダリングを しいレベルに げることができます. :

 


ReactDOM.render(
    <h1>Hello, world!</h1>,   	<--   h1  ，  id=examle   -->
    document.getElementById('example')
);

React要素レンダリング
ブラウザのDOM要素とは異なり、Reactの中の要素は実際には普通のオブジェクトであり、React DOMはブラウザのDOMのデータ内容がReact要素と一致していることを確保することができる.具体的には、https://www.runoob.com/react/react-rendering-elements.html React要素はルートDOMノードにレンダリングされ、ReactDOM.render()に渡すことでページにレンダリングされます.

const element =<h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

更新元素渲染

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>    {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
setInterval(tick, 1000);

对上部的内容封装：

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>    {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
setInterval(tick, 1000);

继续改造：

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')
  );
}
setInterval(tick, 1000);

react JSX 替换js

const element = 
Hello, world!
;

ルートDOMノードにReact要素をレンダリングするには、ReactDOM.render()に渡す方法でページにレンダリングします. const element = <h1 className="foo">Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));
インスタンスのp要素にはカスタム属性data-myattributeが追加され、カスタム属性を追加するにはdata-接頭辞を使用する必要があります. ReactDOM.render( <div> <h1> </h1> <h2> React</h2> <p data-myattribute = "somevalue"> JavaScript !</p> </div> , document.getElementById('example') );