peccu/.editorconfig

## .editorconfig
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]

# Change these settings to your own preference
indent_style = space
indent_size = 2

# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_style = tab
indent_size = 4

[*.php.*]
indent_style = tab
indent_size = 4

[*.bat]
end_of_line = crlf

[*.yml]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

## .eslintrc
{
  "env": {
    "jasmine": true,
    "node": true,
    "mocha": true,
    "browser": true,
    "builtin": true
  },
  "globals": {
      "angular": false,
      "$": false
  },
  "rules": {
    "block-scoped-var": 2,
    "camelcase": [
      2,
      {
        properties: "never"
      }
    ],
    "comma-style": [
      2,
      "last"
    ],
    "curly": [
      2,
      "all"
    ],
    "dot-notation": [
      2,
      {
        "allowKeywords": true
      }
    ],
    "eqeqeq": [
      1,
      "allow-null"
    ],
    "guard-for-in": 2,
    "indent": [2, 2],
    "max-nested-callbacks": [2, 3],
    "new-cap": 0,
    "no-bitwise": 0,
    "no-caller": 2,
    "no-cond-assign": [
      2,
      "except-parens"
    ],
    "no-debugger": 2,
    "no-empty": 2,
    "no-eval": 2,
    "no-extend-native": 2,
    "no-extra-parens": 0,
    "no-irregular-whitespace": 2,
    "no-iterator": 2,
    "no-lonely-if": 2,
    "no-loop-func": 2,
    "no-multi-str": 2,
    "no-new": 2,
    "no-plusplus": 0,
    "no-proto": 2,
    "no-script-url": 2,
    "no-sequences": 2,
    "no-shadow": 2,
    "no-undef": 2,
    "no-underscore-dangle": 0,
    "no-unused-vars": 2,
    "no-use-before-define": 2,
    "no-with": 2,
    "quotes": [
      2,
      "single"
    ],
    "semi": [
        2,
        "always"
    ],
    "strict": [
      2,
      "global"
    ],
    "valid-typeof": 2,
    "wrap-iife": [
      2,
      "inside"
    ],
    "space-before-function-paren": [2, "never"],
    "keyword-spacing": [2, {
        "before": false,
        "after": false,
        "overrides": {
            "return": {"after": true}
        }
    }],
    "space-before-blocks": [2, "never"],
    "object-curly-spacing": [2, "never"],
    "computed-property-spacing": [2, "never"],
    "array-bracket-spacing": [2, "never"],
    "space-in-parens": [2, "never"],
    "no-multiple-empty-lines": [2, {"max": 1}],
    "space-infix-ops": [2, {"int32Hint": false}]
  }
}

## .gitignore
###
## Android Studio
# from https://gist.github.com/iainconnor/8605514

# Built application files
build/


# Local configuration file (sdk path, etc)
local.properties

# Gradle generated files
.gradle/

# Signing files
.signing/

# User-specific configurations
.idea/
*.iml


###
## OS-specific files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db


###
## Emacs
*~
.tern-port

###
## TAGS
# GNU Global
GTAGS
GRTAGS
GPATH

# etag
TAGS

###
## Vagrant
.vagrant


###
## Node.js
bower_components/
node_modules/


###
## User specific
*.xcuserdatad

###
## Common Lisp
*.fasl

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="main.jsx"></script>
  </body>
</html>

## main.jsx
const element = <h1>Hello, world!</h1>;
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

// const element = <div tabIndex="0"></div>;
// const element = <img src={user.avatarUrl}></img>;
// const element = <img src={user.avatarUrl} />;

// class Welcome extends React.Component {
//   render() {
//     return <h1>Hello, {this.props.name}</h1>;
//   }
// }
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}


function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}


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

// setInterval(tick, 1000);


function formatDate(date) {
  return date.toLocaleDateString();
}

function Avatar(props) {
  return (
    <img className="Avatar"
         src={props.user.avatarUrl}
         alt={props.user.name} />
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) {
  let comment = props.data;
  return (
    <div className="Comment">
      <UserInfo user={comment.author} />
      <div className="Comment-text">
        {comment.text}
      </div>
      <div className="Comment-date">
        {formatDate(comment.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64'
  }
};

class Clock extends React.Component {
  constructor(props) {
    super(props);
    // this.state = {
    //   posts: [],
    //   comments: []
    // };
    this.state = {date: new Date()};
  }

  componentDidMount() {
   // fetchPosts().then(response => {
   //    this.setState({
   //      posts: response.posts
   //    });
   //  });

   //  fetchComments().then(response => {
   //    this.setState({
   //      comments: response.comments
   //    });
   //  });
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    // let button = null;
    // if (isLoggedIn) {
    //   button = <LogoutButton onClick={this.handleLogoutClick} />;
    // } else {
    //   button = <LoginButton onClick={this.handleLoginClick} />;
    // }
    // {button}をやめて ? : に

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {isLoggedIn ? (
            <LogoutButton onClick={this.handleLogoutClick} />
        ) : (
            <LoginButton onClick={this.handleLoginClick} />
        )}
      </div>
    );
  }
}

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
                                <li key={number.toString()}>
                                  {number}
                                </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}


function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];

// https://facebook.github.io/react/docs/uncontrolled-components.html
class NameForm2 extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

// https://facebook.github.io/react/docs/forms.html
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    // this.setState({value: event.target.value});
      this.setState({value: event.target.value.toUpperCase()});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

// https://facebook.github.io/react/docs/lifting-state-up.html
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    // this.handleChange = this.handleChange.bind(this);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {value: '', scale: 'c'};
  }

  // handleChange(e) {
  //   this.setState({value: e.target.value});
  // }

  handleCelsiusChange(value) {
    this.setState({scale: 'c', value});
  }

  handleFahrenheitChange(value) {
    this.setState({scale: 'f', value});
  }

  render() {
    const scale = this.state.scale;
    const value = this.state.value;
    const celsius = scale === 'f' ? tryConvert(value, toCelsius) : value;
    const fahrenheit = scale === 'c' ? tryConvert(value, toFahrenheit) : value;

    // return (
    //   <fieldset>
    //     <legend>Enter temperature in Celsius:</legend>
    //     <input
    //       value={value}
    //       onChange={this.handleChange} />
    //     <BoilingVerdict
    //       celsius={parseFloat(value)} />
    //     <TemperatureInput scale="c" />
    //     <TemperatureInput scale="f" />
    //   </fieldset>
    // );
    return (
      <div>
        <TemperatureInput
          scale="c"
          value={celsius}
          onChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          value={fahrenheit}
          onChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    // this.state = {value: ''};
  }

  handleChange(e) {
    // this.setState({value: e.target.value});
    this.props.onChange(e.target.value);
  }

  render() {
    // const value = this.state.value;
    const value = this.props.value;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={value}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

function tryConvert(value, convert) {
  const input = parseFloat(value);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

// https://facebook.github.io/react/docs/composition-vs-inheritance.html

ReactDOM.render(
  <div>
    element
    {getGreeting(user)}
    <h1>
      Hello, {formatName(user)}!
    </h1>
    <Welcome name="Sara" />
    <App />
    <Comment
      data={comment}
      date={comment.date}
      text={comment.text}
      author={comment.author} />
    <Clock />
    <ActionLink />
    <Toggle />
    <Greeting isLoggedIn={false} />
    <Greeting isLoggedIn={true} />
    <LoginControl />
    <Mailbox unreadMessages={messages} />
    <Page />
    <ul>{listItems}</ul>
    <NumberList numbers={numbers} />
    <Blog posts={posts} />
    <NameForm/>
    <EssayForm/>
    <FlavorForm/>
    <NameForm2/>
    <Calculator/>
  </div>,
  document.getElementById('root')
);
	# EditorConfig helps developers define and maintain consistent
	# coding styles between different editors and IDEs
	# editorconfig.org

	root = true

	[*]

	# Change these settings to your own preference
	indent_style = space
	indent_size = 2

	# We recommend you to keep these unchanged
	end_of_line = lf
	charset = utf-8
	trim_trailing_whitespace = true
	insert_final_newline = true

	[*.php]
	indent_style = tab
	indent_size = 4

	[.php.]
	indent_style = tab
	indent_size = 4

	[*.bat]
	end_of_line = crlf

	[*.yml]
	indent_style = space
	indent_size = 2

	[*.md]
	trim_trailing_whitespace = false
	{
	"env": {
	"jasmine": true,
	"node": true,
	"mocha": true,
	"browser": true,
	"builtin": true
	},
	"globals": {
	"angular": false,
	"$": false
	},
	"rules": {
	"block-scoped-var": 2,
	"camelcase": [
	2,
	{
	properties: "never"
	}
	],
	"comma-style": [
	2,
	"last"
	],
	"curly": [
	2,
	"all"
	],
	"dot-notation": [
	2,
	{
	"allowKeywords": true
	}
	],
	"eqeqeq": [
	1,
	"allow-null"
	],
	"guard-for-in": 2,
	"indent": [2, 2],
	"max-nested-callbacks": [2, 3],
	"new-cap": 0,
	"no-bitwise": 0,
	"no-caller": 2,
	"no-cond-assign": [
	2,
	"except-parens"
	],
	"no-debugger": 2,
	"no-empty": 2,
	"no-eval": 2,
	"no-extend-native": 2,
	"no-extra-parens": 0,
	"no-irregular-whitespace": 2,
	"no-iterator": 2,
	"no-lonely-if": 2,
	"no-loop-func": 2,
	"no-multi-str": 2,
	"no-new": 2,
	"no-plusplus": 0,
	"no-proto": 2,
	"no-script-url": 2,
	"no-sequences": 2,
	"no-shadow": 2,
	"no-undef": 2,
	"no-underscore-dangle": 0,
	"no-unused-vars": 2,
	"no-use-before-define": 2,
	"no-with": 2,
	"quotes": [
	2,
	"single"
	],
	"semi": [
	2,
	"always"
	],
	"strict": [
	2,
	"global"
	],
	"valid-typeof": 2,
	"wrap-iife": [
	2,
	"inside"
	],
	"space-before-function-paren": [2, "never"],
	"keyword-spacing": [2, {
	"before": false,
	"after": false,
	"overrides": {
	"return": {"after": true}
	}
	}],
	"space-before-blocks": [2, "never"],
	"object-curly-spacing": [2, "never"],
	"computed-property-spacing": [2, "never"],
	"array-bracket-spacing": [2, "never"],
	"space-in-parens": [2, "never"],
	"no-multiple-empty-lines": [2, {"max": 1}],
	"space-infix-ops": [2, {"int32Hint": false}]
	}
	}
	###
	## Android Studio
	# from https://gist.github.com/iainconnor/8605514

	# Built application files
	build/


	# Local configuration file (sdk path, etc)
	local.properties

	# Gradle generated files
	.gradle/

	# Signing files
	.signing/

	# User-specific configurations
	.idea/
	*.iml


	###
	## OS-specific files
	.DS_Store
	.DS_Store?
	._*
	.Spotlight-V100
	.Trashes
	ehthumbs.db
	Thumbs.db


	###
	## Emacs
	*~
	.tern-port

	###
	## TAGS
	# GNU Global
	GTAGS
	GRTAGS
	GPATH

	# etag
	TAGS

	###
	## Vagrant
	.vagrant


	###
	## Node.js
	bower_components/
	node_modules/


	###
	## User specific
	*.xcuserdatad

	###
	## Common Lisp
	*.fasl
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello World</title>
	<script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
	<script src="https://unpkg.com/react-dom@latest/dist/react-dom.min.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/babel" src="main.jsx"></script>
	</body>
	</html>
	const element = <h1>Hello, world!</h1>;
	function formatName(user) {
	return user.firstName + ' ' + user.lastName;
	}

	const user = {
	firstName: 'Harper',
	lastName: 'Perez'
	};

	function getGreeting(user) {
	if (user) {
	return <h1>Hello, {formatName(user)}!</h1>;
	}
	return <h1>Hello, Stranger.</h1>;
	}

	// const element = <div tabIndex="0"></div>;
	// const element = <img src={user.avatarUrl}></img>;
	// const element = <img src={user.avatarUrl} />;

	// class Welcome extends React.Component {
	// render() {
	// return <h1>Hello, {this.props.name}</h1>;
	// }
	// }
	function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
	}


	function App() {
	return (
	<div>
	<Welcome name="Sara" />
	<Welcome name="Cahal" />
	<Welcome name="Edite" />
	</div>
	);
	}


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

	// setInterval(tick, 1000);


	function formatDate(date) {
	return date.toLocaleDateString();
	}

	function Avatar(props) {
	return (
	<img className="Avatar"
	src={props.user.avatarUrl}
	alt={props.user.name} />
	);
	}

	function UserInfo(props) {
	return (
	<div className="UserInfo">
	<Avatar user={props.user} />
	<div className="UserInfo-name">
	{props.user.name}
	</div>
	</div>
	);
	}

	function Comment(props) {
	let comment = props.data;
	return (
	<div className="Comment">
	<UserInfo user={comment.author} />
	<div className="Comment-text">
	{comment.text}
	</div>
	<div className="Comment-date">
	{formatDate(comment.date)}
	</div>
	</div>
	);
	}

	const comment = {
	date: new Date(),
	text: 'I hope you enjoy learning React!',
	author: {
	name: 'Hello Kitty',
	avatarUrl: 'http://placekitten.com/g/64/64'
	}
	};

	class Clock extends React.Component {
	constructor(props) {
	super(props);
	// this.state = {
	// posts: [],
	// comments: []
	// };
	this.state = {date: new Date()};
	}

	componentDidMount() {
	// fetchPosts().then(response => {
	// this.setState({
	// posts: response.posts
	// });
	// });

	// fetchComments().then(response => {
	// this.setState({
	// comments: response.comments
	// });
	// });
	this.timerID = setInterval(
	() => this.tick(),
	1000
	);
	}

	componentWillUnmount() {
	clearInterval(this.timerID);
	}

	tick() {
	this.setState({
	date: new Date()
	});
	}

	render() {
	return (
	<div>
	<h1>Hello, world!</h1>
	<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
	</div>
	);
	}
	}
	function ActionLink() {
	function handleClick(e) {
	e.preventDefault();
	console.log('The link was clicked.');
	}

	return (
	<a href="#" onClick={handleClick}>
	Click me
	</a>
	);
	}

	class Toggle extends React.Component {
	constructor(props) {
	super(props);
	this.state = {isToggleOn: true};

	// This binding is necessary to make `this` work in the callback
	this.handleClick = this.handleClick.bind(this);
	}

	handleClick() {
	this.setState(prevState => ({
	isToggleOn: !prevState.isToggleOn
	}));
	}

	render() {
	return (
	<button onClick={this.handleClick}>
	{this.state.isToggleOn ? 'ON' : 'OFF'}
	</button>
	);
	}
	}

	function UserGreeting(props) {
	return <h1>Welcome back!</h1>;
	}

	function GuestGreeting(props) {
	return <h1>Please sign up.</h1>;
	}

	function Greeting(props) {
	const isLoggedIn = props.isLoggedIn;
	if (isLoggedIn) {
	return <UserGreeting />;
	}
	return <GuestGreeting />;
	}

	function LoginButton(props) {
	return (
	<button onClick={props.onClick}>
	Login
	</button>
	);
	}

	function LogoutButton(props) {
	return (
	<button onClick={props.onClick}>
	Logout
	</button>
	);
	}

	class LoginControl extends React.Component {
	constructor(props) {
	super(props);
	this.handleLoginClick = this.handleLoginClick.bind(this);
	this.handleLogoutClick = this.handleLogoutClick.bind(this);
	this.state = {isLoggedIn: false};
	}

	handleLoginClick() {
	this.setState({isLoggedIn: true});
	}

	handleLogoutClick() {
	this.setState({isLoggedIn: false});
	}

	render() {
	const isLoggedIn = this.state.isLoggedIn;

	// let button = null;
	// if (isLoggedIn) {
	// button = <LogoutButton onClick={this.handleLogoutClick} />;
	// } else {
	// button = <LoginButton onClick={this.handleLoginClick} />;
	// }
	// {button}をやめて ? : に

	return (
	<div>
	<Greeting isLoggedIn={isLoggedIn} />
	{isLoggedIn ? (
	<LogoutButton onClick={this.handleLogoutClick} />
	) : (
	<LoginButton onClick={this.handleLoginClick} />
	)}
	</div>
	);
	}
	}

	function Mailbox(props) {
	const unreadMessages = props.unreadMessages;
	return (
	<div>
	<h1>Hello!</h1>
	{unreadMessages.length > 0 &&
	<h2>
	You have {unreadMessages.length} unread messages.
	</h2>
	}
	</div>
	);
	}

	const messages = ['React', 'Re: React', 'Re:Re: React'];

	function WarningBanner(props) {
	if (!props.warn) {
	return null;
	}

	return (
	<div className="warning">
	Warning!
	</div>
	);
	}

	class Page extends React.Component {
	constructor(props) {
	super(props);
	this.state = {showWarning: true};
	this.handleToggleClick = this.handleToggleClick.bind(this);
	}

	handleToggleClick() {
	this.setState(prevState => ({
	showWarning: !prevState.showWarning
	}));
	}

	render() {
	return (
	<div>
	<WarningBanner warn={this.state.showWarning} />
	<button onClick={this.handleToggleClick}>
	{this.state.showWarning ? 'Hide' : 'Show'}
	</button>
	</div>
	);
	}
	}

	const numbers = [1, 2, 3, 4, 5];
	const listItems = numbers.map((number) =>
	<li>{number}</li>
	);

	function NumberList(props) {
	const numbers = props.numbers;
	const listItems = numbers.map((number) =>
	<li key={number.toString()}>
	{number}
	</li>
	);
	return (
	<ul>{listItems}</ul>
	);
	}


	function Blog(props) {
	const sidebar = (
	<ul>
	{props.posts.map((post) =>
	<li key={post.id}>
	{post.title}
	</li>
	)}
	</ul>
	);
	const content = props.posts.map((post) =>
	<div key={post.id}>
	<h3>{post.title}</h3>
	<p>{post.content}</p>
	</div>
	);
	return (
	<div>
	{sidebar}
	<hr />
	{content}
	</div>
	);
	}

	const posts = [
	{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
	{id: 2, title: 'Installation', content: 'You can install React from npm.'}
	];

	// https://facebook.github.io/react/docs/uncontrolled-components.html
	class NameForm2 extends React.Component {
	constructor(props) {
	super(props);
	this.handleSubmit = this.handleSubmit.bind(this);
	}

	handleSubmit(event) {
	alert('A name was submitted: ' + this.input.value);
	event.preventDefault();
	}

	render() {
	return (
	<form onSubmit={this.handleSubmit}>
	<label>
	Name:
	<input type="text" ref={(input) => this.input = input} />
	</label>
	<input type="submit" value="Submit" />
	</form>
	);
	}
	}

	// https://facebook.github.io/react/docs/forms.html
	class NameForm extends React.Component {
	constructor(props) {
	super(props);
	this.state = {value: ''};

	this.handleChange = this.handleChange.bind(this);
	this.handleSubmit = this.handleSubmit.bind(this);
	}

	handleChange(event) {
	// this.setState({value: event.target.value});
	this.setState({value: event.target.value.toUpperCase()});
	}

	handleSubmit(event) {
	alert('A name was submitted: ' + this.state.value);
	event.preventDefault();
	}

	render() {
	return (
	<form onSubmit={this.handleSubmit}>
	<label>
	Name:
	<input type="text" value={this.state.value} onChange={this.handleChange} />
	</label>
	<input type="submit" value="Submit" />
	</form>
	);
	}
	}

	class EssayForm extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	value: 'Please write an essay about your favorite DOM element.'
	};

	this.handleChange = this.handleChange.bind(this);
	this.handleSubmit = this.handleSubmit.bind(this);
	}

	handleChange(event) {
	this.setState({value: event.target.value});
	}

	handleSubmit(event) {
	alert('An essay was submitted: ' + this.state.value);
	event.preventDefault();
	}

	render() {
	return (
	<form onSubmit={this.handleSubmit}>
	<label>
	Name:
	<textarea value={this.state.value} onChange={this.handleChange} />
	</label>
	<input type="submit" value="Submit" />
	</form>
	);
	}
	}

	class FlavorForm extends React.Component {
	constructor(props) {
	super(props);
	this.state = {value: 'coconut'};

	this.handleChange = this.handleChange.bind(this);
	this.handleSubmit = this.handleSubmit.bind(this);
	}

	handleChange(event) {
	this.setState({value: event.target.value});
	}

	handleSubmit(event) {
	alert('Your favorite flavor is: ' + this.state.value);
	event.preventDefault();
	}

	render() {
	return (
	<form onSubmit={this.handleSubmit}>
	<label>
	Pick your favorite La Croix flavor:
	<select value={this.state.value} onChange={this.handleChange}>
	<option value="grapefruit">Grapefruit</option>
	<option value="lime">Lime</option>
	<option value="coconut">Coconut</option>
	<option value="mango">Mango</option>
	</select>
	</label>
	<input type="submit" value="Submit" />
	</form>
	);
	}
	}

	// https://facebook.github.io/react/docs/lifting-state-up.html
	function BoilingVerdict(props) {
	if (props.celsius >= 100) {
	return <p>The water would boil.</p>;
	}
	return <p>The water would not boil.</p>;
	}
	class Calculator extends React.Component {
	constructor(props) {
	super(props);
	// this.handleChange = this.handleChange.bind(this);
	this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
	this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
	this.state = {value: '', scale: 'c'};
	}

	// handleChange(e) {
	// this.setState({value: e.target.value});
	// }

	handleCelsiusChange(value) {
	this.setState({scale: 'c', value});
	}

	handleFahrenheitChange(value) {
	this.setState({scale: 'f', value});
	}

	render() {
	const scale = this.state.scale;
	const value = this.state.value;
	const celsius = scale === 'f' ? tryConvert(value, toCelsius) : value;
	const fahrenheit = scale === 'c' ? tryConvert(value, toFahrenheit) : value;

	// return (
	// <fieldset>
	// <legend>Enter temperature in Celsius:</legend>
	// <input
	// value={value}
	// onChange={this.handleChange} />
	// <BoilingVerdict
	// celsius={parseFloat(value)} />
	// <TemperatureInput scale="c" />
	// <TemperatureInput scale="f" />
	// </fieldset>
	// );
	return (
	<div>
	<TemperatureInput
	scale="c"
	value={celsius}
	onChange={this.handleCelsiusChange} />
	<TemperatureInput
	scale="f"
	value={fahrenheit}
	onChange={this.handleFahrenheitChange} />
	<BoilingVerdict
	celsius={parseFloat(celsius)} />
	</div>
	);
	}
	}

	const scaleNames = {
	c: 'Celsius',
	f: 'Fahrenheit'
	};

	class TemperatureInput extends React.Component {
	constructor(props) {
	super(props);
	this.handleChange = this.handleChange.bind(this);
	// this.state = {value: ''};
	}

	handleChange(e) {
	// this.setState({value: e.target.value});
	this.props.onChange(e.target.value);
	}

	render() {
	// const value = this.state.value;
	const value = this.props.value;
	const scale = this.props.scale;
	return (
	<fieldset>
	<legend>Enter temperature in {scaleNames[scale]}:</legend>
	<input value={value}
	onChange={this.handleChange} />
	</fieldset>
	);
	}
	}

	function toCelsius(fahrenheit) {
	return (fahrenheit - 32) * 5 / 9;
	}

	function toFahrenheit(celsius) {
	return (celsius * 9 / 5) + 32;
	}

	function tryConvert(value, convert) {
	const input = parseFloat(value);
	if (Number.isNaN(input)) {
	return '';
	}
	const output = convert(input);
	const rounded = Math.round(output * 1000) / 1000;
	return rounded.toString();
	}

	// https://facebook.github.io/react/docs/composition-vs-inheritance.html

	ReactDOM.render(
	<div>
	element
	{getGreeting(user)}
	<h1>
	Hello, {formatName(user)}!
	</h1>
	<Welcome name="Sara" />
	<App />
	<Comment
	data={comment}
	date={comment.date}
	text={comment.text}
	author={comment.author} />
	<Clock />
	<ActionLink />
	<Toggle />
	<Greeting isLoggedIn={false} />
	<Greeting isLoggedIn={true} />
	<LoginControl />
	<Mailbox unreadMessages={messages} />
	<Page />
	<ul>{listItems}</ul>
	<NumberList numbers={numbers} />
	<Blog posts={posts} />
	<NameForm/>
	<EssayForm/>
	<FlavorForm/>
	<NameForm2/>
	<Calculator/>
	</div>,
	document.getElementById('root')
	);