zarathustra323/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <!-- This will be used by the first `Welcome` component -->
    <div id="welcome1"></div>
    <!-- This will be used by the second `Welcome` component -->
    <div id="welcome2"></div>
    <!-- This will be use for our "application" -->
    <div id="app"></div>

    <script type="text/babel">

      /**
       * Welcome component.
       * This creates the component using a function.
       */
      function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
      }

      /**
       * App component
       */
      function App() {
        /**
         * This is pseudo code, but let's pretend our app just displays a welcome and a SignUp form.
         * Note: we're passing `buttonLabel` - try changing it.
         * Note: We're not sending a message. Try changing it, e.g. `message="Some New Message"`
         */
        return <div>
          <hr />
          <SignInForm buttonLabel="Sign In!" />
        </div>;
      }

      /**
       * SignIn Form component.
       * This creates the component using an ES6 Class
       */
      class SignInForm extends React.Component {
        /**
         * The constructor for the class. Allows for initialization of the component.
         */
        constructor(props) {
          super(props);
          // Sets our default form state... showing that the form has yet to be submitted.
          this.state = { hasSubmitted: false, values: { } };

          // This binding is necessary to make `this` work in the callback
          // Will act as our form submission handler (will be fired when the form is submitted).
          this.handleSubmit = this.handleSubmit.bind(this);
          // Will act as our form field change handler (will be fired anytime a form field changes).
          this.handleChange = this.handleChange.bind(this);
          // Will reset our state to start over.
          this.startOver = this.startOver.bind(this);
        }

        handleChange(event) {
          const target = event.target;
          const value = target.value;
          const name = target.name;

          console.info('Changing field %s to %s', name, value);

          const values = Object.assign({}, this.state.values);
          values[name] = value;

          // Set the values to the from state.
          this.setState({ values: values });
        }

        handleSubmit(event) {
          // Prevent the normal browser submit behavior.
          event.preventDefault();
          console.info('Submitted form with state:', this.state);
          // Normally, this would submit somewhere...
          this.setState({ hasSubmitted: true })
        }

        startOver() {
          this.setState({ hasSubmitted: false, values: { } })
        }

        render() {
          let toRender;
          if (this.state.hasSubmitted) {
            // Display the thank you page on submit.
            toRender = <div>
              <h3>Thanks for submitting, {this.state.values.email}!</h3>
              <p>Normally, we'd log you in.</p>
              <button onClick={this.startOver}>Start Over</button>
            </div>

          } else {
            // Display the form if it hasn't been submitted.
            const values = this.state.values; // get the form values.
            toRender = <form onSubmit={this.handleSubmit}>
              <Welcome name="User" />
              <p>{this.props.message}</p>
              <FormField
                name="email"
                type="email"
                label="Email Address"
                required="true"
                value={values.email}
                placeholder="example@domain.com"
                onChange={this.handleChange}
              />
              <FormField
                name="password"
                type="password"
                helpText="Enter your account password"
                label="Password"
                required="true"
                value={values.password}
                onChange={this.handleChange}
              />
              <FormField
                name="favoriteColor"
                helpText="We ask because we care..."
                label="What's your favorite color?"
                value={values.favoriteColor}
                onChange={this.handleChange}
              />
              <button type="submit">{this.props.buttonLabel}</button>
            </form>;
          }

          return toRender;
        }
      }

      /**
       * Defines our default properties for the SignIn component.
       * Will be used when the properties are specifically passed.
       */
      SignInForm.defaultProps = {
        buttonLabel: 'Login',
        message: 'Please sign in!!!',
      }

      /**
       * Our re-usable form field component.
       * Wraps a label, help text, and other common elements.
       * Note: None of these elements are styled!
       */
      class FormField extends React.Component {
        render() {
          return <div className="our-form-group">
            <label>
              {this.props.label}
              <input
                name={this.props.name}
                type={this.props.type}
                value={this.props.value}
                required={this.props.required}
                placeholder={this.props.placeholder}
                onChange={this.props.onChange}
              />
              <small>{this.props.helpText}</small>
            </label>
          </div>
        }
      }
      FormField.defaultProps = {
        name: null,
        type: 'text',
        required: false,
        value: '',
        placeholder: null,
        helpText: null,
        label: null,
      }

      /**
       * Render the first welcome to the page.
       */
      ReactDOM.render(
        <Welcome name="World!" />,
        document.getElementById('welcome1')
      );

      /**
       * Render the second welcome to the page.
       */
      ReactDOM.render(
        <Welcome name="Clinton!" />,
        document.getElementById('welcome2')
      );

      /**
       * Render our "application" to the page.
       * Ultimately, the app will render any other components inside of it.
       */
       ReactDOM.render(
        <App />,
        document.getElementById('app')
      );

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello World</title>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>
	<body>
	<!-- This will be used by the first `Welcome` component -->
	<div id="welcome1"></div>
	<!-- This will be used by the second `Welcome` component -->
	<div id="welcome2"></div>
	<!-- This will be use for our "application" -->
	<div id="app"></div>

	<script type="text/babel">

	/**
	* Welcome component.
	* This creates the component using a function.
	*/
	function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
	}

	/**
	* App component
	*/
	function App() {
	/**
	* This is pseudo code, but let's pretend our app just displays a welcome and a SignUp form.
	* Note: we're passing `buttonLabel` - try changing it.
	* Note: We're not sending a message. Try changing it, e.g. `message="Some New Message"`
	*/
	return <div>
	<hr />
	<SignInForm buttonLabel="Sign In!" />
	</div>;
	}

	/**
	* SignIn Form component.
	* This creates the component using an ES6 Class
	*/
	class SignInForm extends React.Component {
	/**
	* The constructor for the class. Allows for initialization of the component.
	*/
	constructor(props) {
	super(props);
	// Sets our default form state... showing that the form has yet to be submitted.
	this.state = { hasSubmitted: false, values: { } };

	// This binding is necessary to make `this` work in the callback
	// Will act as our form submission handler (will be fired when the form is submitted).
	this.handleSubmit = this.handleSubmit.bind(this);
	// Will act as our form field change handler (will be fired anytime a form field changes).
	this.handleChange = this.handleChange.bind(this);
	// Will reset our state to start over.
	this.startOver = this.startOver.bind(this);
	}

	handleChange(event) {
	const target = event.target;
	const value = target.value;
	const name = target.name;

	console.info('Changing field %s to %s', name, value);

	const values = Object.assign({}, this.state.values);
	values[name] = value;

	// Set the values to the from state.
	this.setState({ values: values });
	}

	handleSubmit(event) {
	// Prevent the normal browser submit behavior.
	event.preventDefault();
	console.info('Submitted form with state:', this.state);
	// Normally, this would submit somewhere...
	this.setState({ hasSubmitted: true })
	}

	startOver() {
	this.setState({ hasSubmitted: false, values: { } })
	}

	render() {
	let toRender;
	if (this.state.hasSubmitted) {
	// Display the thank you page on submit.
	toRender = <div>
	<h3>Thanks for submitting, {this.state.values.email}!</h3>
	<p>Normally, we'd log you in.</p>
	<button onClick={this.startOver}>Start Over</button>
	</div>

	} else {
	// Display the form if it hasn't been submitted.
	const values = this.state.values; // get the form values.
	toRender = <form onSubmit={this.handleSubmit}>
	<Welcome name="User" />
	<p>{this.props.message}</p>
	<FormField
	name="email"
	type="email"
	label="Email Address"
	required="true"
	value={values.email}
	placeholder="example@domain.com"
	onChange={this.handleChange}
	/>
	<FormField
	name="password"
	type="password"
	helpText="Enter your account password"
	label="Password"
	required="true"
	value={values.password}
	onChange={this.handleChange}
	/>
	<FormField
	name="favoriteColor"
	helpText="We ask because we care..."
	label="What's your favorite color?"
	value={values.favoriteColor}
	onChange={this.handleChange}
	/>
	<button type="submit">{this.props.buttonLabel}</button>
	</form>;
	}

	return toRender;
	}
	}

	/**
	* Defines our default properties for the SignIn component.
	* Will be used when the properties are specifically passed.
	*/
	SignInForm.defaultProps = {
	buttonLabel: 'Login',
	message: 'Please sign in!!!',
	}

	/**
	* Our re-usable form field component.
	* Wraps a label, help text, and other common elements.
	* Note: None of these elements are styled!
	*/
	class FormField extends React.Component {
	render() {
	return <div className="our-form-group">
	<label>
	{this.props.label}
	<input
	name={this.props.name}
	type={this.props.type}
	value={this.props.value}
	required={this.props.required}
	placeholder={this.props.placeholder}
	onChange={this.props.onChange}
	/>
	<small>{this.props.helpText}</small>
	</label>
	</div>
	}
	}
	FormField.defaultProps = {
	name: null,
	type: 'text',
	required: false,
	value: '',
	placeholder: null,
	helpText: null,
	label: null,
	}

	/**
	* Render the first welcome to the page.
	*/
	ReactDOM.render(
	<Welcome name="World!" />,
	document.getElementById('welcome1')
	);

	/**
	* Render the second welcome to the page.
	*/
	ReactDOM.render(
	<Welcome name="Clinton!" />,
	document.getElementById('welcome2')
	);

	/**
	* Render our "application" to the page.
	* Ultimately, the app will render any other components inside of it.
	*/
	ReactDOM.render(
	<App />,
	document.getElementById('app')
	);

	</script>
	</body>
	</html>