Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Hello React.js

More than 5 years have passed since last update.

というわけで、今回はHello World的なComponentを作ってみたいと思います。

基本的にはReact.createClassでComponentを作って、それらのComponentを組み合わせてページを作ってReact.renderでDOMと紐付けることで表示を行います。

JSXを使う

JSXについては明日のAdvent Calendarで書きますが、こんな感じでJSの中にXML likeにマークアップを直接書くことが出来ます。

といってもこのままブラウザで実行すると当然エラーになるので、react-toolsを使って事前にcompileするか、http://fb.me/JSXTransformer-0.12.1.js にあるようなJSXTransformerを事前に読み込んでおく必要があります。

また、browserifyでreactifyを使うなどして変換する方法もあります。

var React = require('react');

var Hello = React.createClass({
  render: function() {
    return (
      <div className="container">Hello {this.props.name}</div>
    );
  }
})

React.render(<Hello name="React" />, document.getElementById("app"));

ちなみにdivもReactのComponentです。

JSX + ES6, 7のsyntax(一部)

JSXのtransformにはharmony optionがあって、これを有効にすることで一部のES6, 7のsyntaxを使用することが出来ます。

var React = require('react');

var Hello = React.createClass({
  render() {
    return (
      <div className="container">Hello {this.props.name}</div>
    );
  }
})

React.render(<Hello name="React" />, document.getElementById("app"));

ArrowFunctionなんかはmapと組み合わせて使うととても便利です。

var items = this.props.items.map((item) => {
  return <div>{item.name}</div>;
});

without JSX

JSXなしで書くとこんな感じです。Hello Componentのrenderメソッド以外にもReact.renderでのHello Componentの指定も変わっているのがわかると思います。

var React = require('react');

var Hello = React.createClass({
  render: function() {
    return React.DOM.div({className: 'container'}, 'Hello ' + this.props.name);
  }
})

React.render(
  React.createFactory(Hello)({name: 'React'}), document.getElementById("app")
);

このAdvent Calendarで紹介するコードはJSXでharmony optionを有効にした状態で書いていきます。

というわけで、明日はJSX周りについてもう少し説明したいと思います。

koba04
smarthr
社会の非合理を、ハックする。
https://smarthr.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away