React

Writing "Hello world"

React.render(
    <h1>Hello world</h1>,
    document.getElementById('example')
)

React.render(
    <h1>Hello world</h1>,
    document.getElementById('example')
)

Components

var Greeting = React.createClass({ 
    render: function() {
        return (<h1>Hello world</h1>) 
    }
})

React.render(
    <Greeting />,
    document.getElementById('example')
)

Props

var Greeting = React.createClass({ 
    render: function(){
        return (<h1>{this.props.text}</h1>)
    }
})

React.render(
    <Greeting text='Hello world!' />,
    document.getElementById('example') 
);

States

var Clicker = React.createClass({
    getInitialState: function(){
        return {count: 0}
    },
    handleClick: function(){ 
        this.setState({count: this.state.count + 1})
    },
    render: function(){ 
        return (
           <div className='clicker' 
                onClick={this.handleClick}>
             This div was clicked 
                {this.state.count} times
           </div>)
    } 
})

var Clicker = React.createClass({…})
var Greeting = React.createClass({…})

var App = React.createClass({
  render: function(){
    return (
      <div className=“app”>
        <Greeting text=“Hey! Click this text” />
        <Clicker />
      </div>
    )  
  }
})

Modules

var Clicker = React.createClass({…})
var Greeting = React.createClass({…})

var Clicker = require('components/Clicker.jsx')
var Greeting = require('components/Greeting.jsx')

Webpack

App.jsx

require(“components/Greetings.jsx”) require(“components/Clicker.jsx”) 

React-router

    
class ToDo extends React.Component {
  state = {
    todos: []
  }
    
  addToDo = text => {
    var todos = this.state.todos.slice(0);
    this.setState({todos: todos.concat(text)})
  }
    
  render() {
    return(
      <div className='todo'>
      <h1>ToDo</h1>
      <hr />
      <AddToDo onTodoAdd={this.addToDo} />
      <ToDoList list={this.state.todos} />
      </div>
    )
  }
}

    
class ToDoList extends React.Component {
  render(){
    if (!this.props.list.length) {
      return (
        <div>Empty</div>
      )
    }
    return(
      <ul>
        {this.props.list.map((todo, i) => (
          <li key={i}>{todo}</li>
         ))}
      </ul>
    )
  }
}

class AddToDo extends React.Component {
  addToDo = () => {
    var input = this.refs.text.getDOMNode();
    this.props.onTodoAdd(input.value);
    input.value = '';
  }
  render(){
    return(
      <div className='addTodo'>
        <input ref='text' />
        <input type='submit' value='+ Add' onClick={this.addToDo}/>
      </div>
    )
  }
}

import { Route, RouteHandler, Link } from 'react-router';

const routes = (
  <Route path='/' handler={App}>
    <Route path='clicker' handler={ClickerPage} />
    <Route path='todo' handler={ToDo} />
  </Route>
)

class App extends React.Component{
  render(){
    return (
      <div className='app'>
      <h1>Application</h1>
      <Link to="/">Home</Link>
      <Link to="/clicker">Clicker</Link>
      <Link to="/todo">ToDo</Link>
      <RouteHandler />  
    </div>)}
}

Router.run(routes, (Route) => React.render(<Route />, document.body))