import React from "react";

class Component extends React.Component {
      constructor() {
            this.state = { name: "Daniel" };
      }

      handleInput(e) {
            this.setState({ name: e.target.value });
      }

      render() {
            return (
                  <div>
                        <input
                              type="text"
                              value={this.state.name}
                              onChange={this.handleInput.bind(this)}
                        />
                        <NameDisplay name={this.state.name}></NameDisplay>
                  </div>
            );
      }
}

class NameDisplay extends React.Component {
      render() {
            return <span>{this.props.name}</span>;
      }
}

// JSX code
render() {
    return <div>Hello {this.props.name}</div>
}

// What the above JSX compiles to
render() {
    return React.createElement("div", null, "Hello ", this.props.name)
}

render() {
    return (
        // All components should return ONE root element.
        // If you want many elements in your component, be sure to wrap them all in something like a div.
        <div>
                // As 'class' is a reserved word in Javascript,
                // we give CSS classes to elements using the
                // 'className' attribute.
                <header className="app-header">
                    <nav id="main-nav">
                            // Other HTML attrbutes work like you're used to.
                            // Event handlers are defined inline, and usually point to a method in the component class.
                            <a href="http://example.com" onClick={this.handleClick.bind(this)}>Click me!</a>
                    </nav>
                    // Custom components are used like this. Import the component class,
                    // in this case 'LoginLogout', and use it like an HTML element!
                    // A rule of thumb is that vanilla HTML elements are lowercase, and custom components are CamelCase.
                    <LoginLogout user={this.props.username} ></LoginLogout>
                    // React properties, like 'user' above, are used to provide data
                    // to your components. Just write them like a normal HTML attribute!
                    // Like all attributes you write in React, they can take "strings" or {javascript expressions}.
                </header>
                // The 'children' property is a special one, and contains any React
                // elements you nest into your components. Then, you can spit out the nested children like this.
                {this.props.children}

                // Here's the 'children' in action. Inside the Page component,
                // you would put {this.props.children} to display the PageContent component where you want it to go.
                <Page>
                    <PageContent ></PageContent>
                </Page>
                // This way, your components can be reusable and decoupled
                // from other components, as they don't even need to know anything about their own children!
        </div>
    )
}

/**
 * Create elements in a loop
 */
render() {
      return (
            <div>
                  <ul>
                        // Loop through an array of data and give each item in its own React component:
                        {this.props.arrayOfData.map( item => {
                              // React elements created in a loop require a 'key' property
                              // so React can keep track of it in the virtual DOM.
                              // React WILL shout at you if you omit it. Use the array index
                              // if you don't have anything else, but a unique identifier is recommended.
                              return <ListItem link={item.url} label={item.label} key={item.id}></ListItem>
                            })}
                  </ul>
            </div>
      )
}

/**
 * Use the 'spread' feature to give multiple props at once
 */
render() {
      let data = { name: "Daniel", occupation: "Developer", likes: "React" };
      return (
            <div>
                  // MyCustomComponent receives 'name', 'occupation' and
                  // 'likes' as keys on its 'this.props' object.
                  <MyCustomComponent {... data} ></MyCustomComponent>
            </div>
      )
}

import React from 'react';
import Header from './HeaderComponent.jsx';
import Page from './PageComponent.jsx';
//... Other components

class AppView extends React.Component {
        render() {
            return (
                  <div>
                        <Header></Header>
                        <Page></Page>
                        //... Other components
                  </div>
            )
      }
}

export default AppView;

import React from 'react';
import AppView from './AppView.jsx';

React.render(<AppView ></AppView>, document.getElementById('app-container'));

import React from 'react';

class BadComponent extends React.Component {
        render() {
              // DO NOT do this! It will wreak havoc and cause misery.
              this.props.name = "The Joker"
              return ( <div>{this.props.name}</div> )
        }
}

import React from 'react';

class StatefulComponent extends React.Component {
        constructor() {
                // Remember to call super!
                super();
                // Initial state is defined in the constructor of the component class.
                // Nothing weird here, we're just creating a normal Javascript object.
                this.state = { firstname: "Daniel", lastname: "Dunderfelt" };
        }

        handleClick(e) {
                // We can change the state using 'this.setState'. When that is called,
                // React will re-render your component to reflect the updated state.
                this.setState({ 
                        firstname: this.state.lastname,
                        lastname: this.state.firstname
                });
                // Here I switch my first and last name on the click of a button.
        }

        render() {
                // We can use state to create derived data. Here I've used ES6
                // template strings to compose my full name.
                let fullName = `${this.state.firstname} ${this.state.lastname}`;
                return (
                        <div>
                                Hi! My name is {fullName}!
                                <button type="button" onClick={this.handleClick.bind(this)}>
                                        Switch!
                                </button>
                        </div>
                )
        }
}

import React from 'react';

class Clicking extends React.Component {
        handleClick(e) {
                // Yes, you can prevent default actions!
                e.preventDefault();
                // Getting the element you clicked
                let clickTarget = e.target;
        }

        render() {
                return (
                        <div>
                                // The handlers are defined inline, using the following syntax:
                                <button type="button" onClick={this.handleClick.bind(this)}>
                                        Click me!
                                </button>
                                // Be sure to 'bind' the context of the method to the class.
                                // Earlier versions of React did this automatically, but in ES6
                                // the job is yours to complete.
                        </div>
                )
        }
}

// You may even pass in a function through props
// to be used as an event handler!
return (
        <div>
                <button type="button" onClick={this.props.clickHandler}>
                        Click me!
                </button>
        </div>
)

import React from 'react';

// I like to define the state of an empty form in one place
const resetState = { firstname: "", lastname: "" };

class Form extends React.Component {
        constructor() {
                super();
                // Initially, we have an empty form. Simply assign the object
                // containing the empty properties to the initial
                state.this.state = resetState;
        }

        // Change
        handlerhandleFirstname(e) {
                // Get the value from the target element
                this.setState({
                        firstname: e.target.value
                });
        }

        // Change
        handlerhandleLastname(e) {
                this.setState({ lastname: e.target.value });
        }

        handleSubmit(e) {
                // Stop the browser from navigating
                e.preventDefault();
                // Simply send the whole state! It contains all the data already.
                // 'sendFormData' is an example function that you would pass down
                // to this component throuh
                props.this.props.sendFormData(this.state);
                // And reset the form using the empty object.
                this.setState(resetState);
        }

        render() {
                return (
                        <div>
                                // Set the submit handler on the form
                                <form onSubmit={this.handleSubmit.bind(this)}>
                                        <label>First name</label>
                                                // This is what makes the input 'controlled'.
                                                // The value does not come directly from the user,
                                                // it comes from the state of the component.
                                                // When the user writes something, we want to update
                                                // the state and, by extension, what value the input has.
                                        <input
                                                type="text"
                                                name="firstnameInput"
                                                value={this.state.firstname}
                                                onChange={this.handleFirstname.bind(this)} />
                                        <label>Last name</label>
                                        <input
                                                type="text"
                                                name="lastnameInput"
                                                value={this.state.lastname}
                                                onChange={this.handleLastname.bind(this)} />
                                        <button type="submit">Submit form</button>
                                </form>
                        </div>
                )
        }
}

class LifecycleExample extends React.Component {
        componentWillMount() {
                // This method's phone will ring right before the component ismounted using React.render() or included in another component.
                // If you need to create initial state from props, this is as good a placeas any to do that.The component will not re-renderif you call setState here!
        }

        componentDidMount() {
                // And when the mount has happened, this method is called.
                // By now the component has a DOM representation, so feel freeto use jQuery or some other DOM - based library here.
        }

        componentWillUnmount() {
                // This is the place to clean up after yourself.
                // Remove jQuery eventlisteners(why did you use those ?), image sliders and other widgets.
                // React will take care of removing its own stuff, so you do not needto worry about that.
        }

        componentWillReceiveProps(newProps) {
                // If you need to do anything with eventual new props passed to thecomponent, do it here.
                // This method will get the new props as itsonly argument.Calling setState here will not result in a re-render,
                // as the component will re-render anyway when it receives new props.
        }

        shouldComponentUpdate(newProps, newState) {
                // You can use this method to control if the component should updateat all.
                // Returning false wil stop the rendering in its tracks!As arguments you get new props and the computed next step of the statewhich you can use to compare with the current ones.
        }

        componentWillUpdate(nextProps, nextState) {
                //If the re-render gets the green light, this method is called right beforeit happens.
                // As arguments you get the next props and state, but you CANNOT call setState in this method.Use 'componentWillReceiveProps' instead!
        }

        componentDidUpdate(prevProps, prevState) {
                // And when the update and re-render has happened, guess who is called.
                // You get the previous state and props as arguments.
                // Use this methodto perform operations on that jQuery slider you're using.
        }
}

import React from 'react';
import $ from 'jquery';

class RefExample extends React.Component {
        // Once we have an HTMl element for the component...
        componentDidMount() {
                // Use findDOMNode and feed it the ref to get
                // the underlying HTML element. All refs in the
                // component are found on the 'this.refs' object.
                let divRef = React.findDOMNode(this.refs.myDiv);
                // Do something with myDiv using, for example, jQuery:
                $(divRef).fadeIn(200);
        }

        render() {
                return (
                        <div ref="myDiv">
                                This is my div. There are many other like it, but this is mine.
                        </div>
                )
        }
}