React と JSX_html/css_WEB-ITnose を使ってみる-htmlチュートリアル-php.cn

React は、ユーザーインターフェイスを作成するためのオープンソースライブラリです。これにより、基礎となるデータモジュールと一貫性のある UI を簡単に作成できます。この記事は主に初心者を対象としており、React と JSX 構文の基本的な知識をカバーしています。

React の使用を開始する

おそらく、React の使用を開始する最も簡単な方法は、CDN からライブラリをインポートすることです (記事内の例ではこれを行っています)。または、npm を使用して、React の実行に必要なファイルを公式 Web サイトからインストールまたはダウンロードすることもできます。

まず、プロジェクトは、index.html ファイルを含むディレクトリを作成します。

mkdir react-test && cd react-testtouch index.html

ログイン後にコピー

好みのエディターを使用して、index.html ファイルを開き、次のサンプルコードを追加します。

<!DOCTYPE html><html lang="en">  <head>    <title>My First React Example</title>  </head>  <body>    <div id="greeting-div"></div>    <script src="https://fb.me/react-15.0.0.js"></script>    <script src="https://fb.me/react-dom-15.0.0.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>    <script type="text/babel">      var Greeting = React.createClass({        render: function() {          return (            <p>Hello, Universe</p>          )        }      });      ReactDOM.render(        <Greeting/>,        document.getElementById('greeting-div')      );    </script>  </body></html>

ログイン後にコピー

上記のコードが何をするのか見てみましょう:

React はコンポーネント指向の開発に従います。一般的な考え方は、UI 全体をコンポーネントとして扱うことです。この例では、コンポーネントに Greeting という名前を付けます。 React では、このコンポーネントは React.createClass() によって作成されます。各コンポーネントには、構造をレンダリングするために使用される render() メソッドがあります。上の例では、
Hello Universe
のみが返され、ビューに表示されます。
コンポーネントはレンダリングされるまで何も行いません。 ReactDOM.render() を通じてコンポーネントをレンダリングします。この関数には 2 つのパラメーターがあります。最初のパラメーターはコンポーネント名 (例では Greeting など) で、2 番目のパラメーターはコンポーネントを配置する HTML 内の要素です。この例では、コンポーネントは ID 名greeting-div を持つ div 要素内に配置されます)。
<挨拶> とは一体何なのか疑問に思っているかもしれません。この構文は JSX (JavaScript XML) と呼ばれ、HTML のような構文で DOM ノードを構築できます。 JSX は完全にオプションであり、React を使用するために必ず使用する必要はありませんが、JSX には多くの優れた機能があるため、活用しない理由はありません。
ブラウザ自体は JSX を理解できないため、最初に JavaScript を使用して JSX をコンパイルします。ファイルの先頭にbrowser.jsファイルを含めます。 Babel は、を介してブラウザ内の JSX を認識し、JavaScript に変換します。開発全体を通して、JSX はブラウザーでうまく機能しました。ただし、JS を運用環境にデプロイする前に、アプリケーションのレンダリングを高速化するために JSX をプリコンパイルする必要があります。これを行う方法については後で詳しく説明します。

ブラウザでindex.htmlを開くと、画面に「Hello Univers」というテキストが表示されます。（ちょっと興奮してる？）

属性の紹介

React は一方向のデータフローに依存します。これは、データフローが、次の属性を介して親要素から子要素に渡されるなど、一方向でのみ発生することを意味します。 JSX では、これらのプロパティはプロパティを介して子コンポーネントに渡されます。コンポーネントのプロパティには、コンポーネントの props 属性を介してコンポーネント内からアクセスできます。プロパティが変更された場合は、表示される UI が最新のデータモデルであることを確認してください。テキストが 2 秒ごとにランダムに表示されるように、前のコードを変更します。

var Greeting = React.createClass({  render: function() {    return (      <p>{this.props.message}</p>    );  }});setInterval(function() {  var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe'];  var randomMessage = messages[Math.floor((Math.random() * 3))];  ReactDOM.render(    <Greeting message={randomMessage}/>,    document.getElementById('greeting-div')  );}, 2000);

ログイン後にコピー

上記のコードは、配列からランダムなメッセージを選択し、2 秒ごとにコンポーネント Greeting にレンダリングします。配信するメッセージを選択するプロパティは message と呼ばれます。変数を呼び出すには、中かっこ {} のペアが必要です。 Greeting コンポーネントにアクセスするときに、渡された値に this.props.message 経由でアクセスできるようになりました。

上記のコードを実行すると、2 秒ごとにランダムなメッセージが表示されます。

渡された props は不変であることに注意してください。コンポーネントのプロパティには、props を介してのみアクセスします。コンポーネント内には this.props が書き込まれることはありません。これにより、データの一方向の流れが保証され、アプリケーション全体がデータの変更とそれがアプリケーション全体に与える影響を理解しやすくなります。

状態とイベントの紹介

React のすべてのコンポーネントは、状態がある場合、それ自体の状態をカプセル化して維持できます。ステートフルコンポーネントは値を保存し、それを props 経由でその子コンポーネントに渡すことができます。これにより、コンポーネントの状態が変化すると、それに応じて props も確実に変化します。したがって、子コンポーネントはこれらの props に依存して、それ自体を自動的に再レンダリングします。

この概念をさらに強化するために、上記のコード例を変更してみましょう。ボタンをクリックするとランダムなメッセージが表示されます。ここには 2 つのコンポーネントがあります:

RandomMessage : これは、ランダムなメッセージを選択し続ける状態を持つ親コンポーネントです
MessageView : これは、ランダムに選択されたメッセージの表示を処理するサブコンポーネントです。

各コンポーネントの詳細を見てみましょう:

RandomMessage

var RandomMessage = React.createClass({  getInitialState: function() {    return { message: 'Hello, Universe' };  },  onClick: function() {    var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe'];    var randomMessage = messages[Math.floor((Math.random() * 3))];    this.setState({ message: randomMessage });  },  render: function() {    return (      <div>        <MessageView message={ this.state.message }/>        <p><input type="button" onClick={ this.onClick } value="Change Message"/></p>      </div>    );  }});

ログイン後にコピー

状態RandomMessage コンポーネントのは、メッセージプロパティを維持します。すべての React コンポーネントには、コンポーネントの初期状態を設定する getInitialState 関数があります。上の例では、message 属性の初期値は「Hello, Universe」に設定されています。

次に、ボタンがクリックされると、コンポーネントによって返される HTML タグが新しい値を取得する必要があります。

<div>  <MessageView message={ this.state.message }/>  <p><input type="button" onClick={ this.onClick } value="Change Message"/></p></div>

ログイン後にコピー

正如你看到的，该组件渲染的是 MessageView 和一个 input 按钮。要注意的是，在JSX语法中，组件 message 属性的状态是通过子组件的 attribute 来传递。组件还给按钮添加了一个单击事件的监听器 this.onClick 。注要，要写成驼峰形式。在HTML中事件名称是用小写，即 onclick ，但是在JSX中事件名称需要使用驼峰形式。

click 事件处理选择一个随机的消息和更新组件状态：

this.setState({ message:randomMessage });

ログイン後にコピー

setState 函数在React中主要是用来通知一个数据的变化。这种方法用来更新组件的当前状态，然后重新渲染。结果也需要通过 props 重新计算以及子组件也需要依赖 props 重新渲染自己。

MessageView

var MessageView = React.createClass({  render: function() {    return (      <p>{ this.props.message }</p>    );  }});

ログイン後にコピー

这个组件通过 message 属性传递给UI。你应该注意，这是一个无状态的组件和一个 RandomMessage 组件有状态的渲染。

现在我们已经创建好了所需的组件，是时候将 RandomMessage 组件渲染出来：

ReactDOM.render (    <RandomMessage />,    document.getElementById('greeting-div'));

ログイン後にコピー

就是这样！每次点击按钮，你会看到一个不同的消息。

保持独立的JSX

直到现在我们一直在HTML中写JSX脚本。为了保持你的APP结构清晰，应该让每个组件有一个自己的 .jsx 文件。这意味着我们可以把上面的代码放在一个 random-message.jsx 文件中，并且按下面的方式将其引入到HTML中：

<script type="text/babel" src="src/random-message.jsx"></script>

ログイン後にコピー

新的HTML结构如下：

      My First React Example  
      
                <script type="text/babel" src="src/random-message.jsx"></script>

ログイン後にコピー

这样做意味着你现在需要一个服务器来查看页面。好在可以通过 npm 来安装一个 http-server ：

npm install -g http-server

ログイン後にコピー

然后在你项目的根目录下运行下面的命令：

http-server

ログイン後にコピー

你的页面可以在 http://127.0.0.1:8080/ 访问。

预编译JSX

正如我们前面提到的，运用到生产之前最好先预编译JSX。可以使用 npm 来安装 babel-cli 。Babel(版本6)默认情况下不包含任何转换器(transforms)，额外的包必须得通过安装。

npm init -ynpm install --save-dev babel-clinpm install --save-dev babel-preset-es2015 babel-preset-react

ログイン後にコピー

mkdir dist

ログイン後にコピー

并且运行：

babel --presets es2015,react --watch src/ --out-dir dist

ログイン後にコピー

JSX文件将被编译，并且编译出来的同名JavaScript文件将放到 dist 目录中。编译后的JavaScript文件可以直接放到你的页面，这也意味着，页面不再需要加载 browser.js 。同时要是你的JSX做了任何修改,Babel会监控 src 目录下所有的JSX文件，然后编译后放到 dist 目录中。

注意：在我们的示例中实际上并没有使用ES2015的语法，但我们已经包括了ES2015 Preset。

Virtual DOM

React非常的快，那是因为使用了一个Virtual DOM的技术。在内存中表示一个DOM，但从来不会直接访问真正的DOM。组件的渲染函数会在任何给定的时间内很快的告诉DOM应该是一个什么样子。你已经看到组件渲染函数返回HTML元素，但并不产生真正的DOM。相反，它只是一个DOM的描述。

扩展阅读

本文简单的介绍了React和JSX。除了丰富的视图(View)技术，React还有许多其他的好处，你可以在这里阅读到很多。

如果你想了解React更多的信息，你可以阅读这里的文章，这是一些很优秀的教程。如果你不想在React中使用JSX，你可以像这篇文章中介绍的内容一样，使用 Raw React 。如果你想继续学习一些先进的技术，你可以阅读前面我写的教程：使用React和Flux创建一个Note Taking APP 。

感谢你的阅读，如果你有任何问题或建议，欢迎在下面的评论中留言。

本文根据 @Sandeep Panda 的《 Getting Started with React and JSX 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.sitepoint.com/getting-started-react-jsx/ 。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。