Diving in React

with webpack, react-router, flux

React

Writing "Hello world"

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

JSX transformer

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”) 

Greetings.jsx

require(“greetings.scss”) 

Clicker.jsx

require(“clicker.scss”) 

JSX transformer

scss, css, concat

Bundle.js

Bundle.css

Greetings.scss

Clicker.scss

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))

deck

By t1mmaas

deck

  • 246
Loading comments...

More from t1mmaas