Ive created a CRUD app in laravel, but now i want to improve the UI with react.js. Im still very new to react, so not sure how to go about doing this.

So far i have created a table component that displays all the users with react. how should i use react-router or whatever availble to implement users/{id}, users/create, users/{id}/edit, etc so that when i click "show user" button, another component with user detail will appear to replace the users table in the same view.

One more question, how can i pass objects from backend to react view?

Thanks.

This is what i have right now:

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

var FilterableTable = React.createClass({
  getInitialState: function() {
    return {
      data: [],
      filterText: ''
    };
  },
  handleUserInput: function(filterText) {
    this.setState({
      filterText: filterText
    });
  },
  loadDataFromServer: function() {
    $.ajax({
      url: this.props.url,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadDataFromServer();
  },
  render: function() {
    return (
      <div>
        <NavBar
          filterText={this.state.filterText}
          onUserInput={this.handleUserInput}
        />
        <ObjectTable
          data={this.state.data}
          filterText={this.state.filterText}
        />
        <RouteHandler/>
      </div>
    );
  }
});


var NavBar = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.filterTextInput.getDOMNode().value
    );
  },
  render: function() {
    return (

      <nav className="navbar">
        <ul className="nav navbar-nav">
           <li>
              <Link to="/admin/users">All users</Link>
           </li>
           <li>
              <Link to="/admin/users/create">Create a user</Link>
           </li>
        </ul>
        <form className="form-group pull-right">
          <input
            className="form-control"
            type="text"
            placeholder="Search..."
            value={this.props.filterText}
            ref="filterTextInput"
            onChange={this.handleChange}
          />
        </form>
      </nav>
    );
  }
});

var ObjectTable = React.createClass({
  render: function() {
    var rows = [];
    this.props.data.forEach(function(object) {
      if (object.username.indexOf(this.props.filterText) === -1 &&     object.email.indexOf(this.props.filterText) === -1)
        return;
      rows.push(<ObjectRow object={object} key={object.uid}/>);

    }.bind(this));
    return (
      <table className="table table-striped table-bordered">
        <thead>
            <tr>
              <td>ID</td>
              <td>Username</td>
              <td>Email</td>
              <td>Actions</td>
            </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
});

var ObjectRow = React.createClass({
  render: function() {
    var objId = this.props.object.uid;

    return (
      <tr>
        <td>{this.props.object.uid}</td>
        <td>{this.props.object.username}</td>
        <td>{this.props.object.email}</td>
        <td>
          <Link to="/admin/users/:objId" params={{objId: objId}} className="btn btn-small btn-success">Show</Link>
          <Link to="/admin/users/:objId/edit" params={{objId: objId}} className="btn btn-small btn-info">Edit</Link>
        </td>
      </tr>
    );
  }
});

var ShowObject = React.createClass({
  render: function() {

     return (

      <h1>showing a user</h1>
    );
  }
});


var routes = (
  <Route path="admin/users" handler={FilterableTable}>
    <Route path="/admin/users/:objId/edit" />
    <Route path="/admin/users/create" handler={CreateObject} />
    <Route path="/admin/users/:objId" handler={ShowObject} />
  </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {  
  React.render(<Handler url="/admin/get_users" />,  document.getElementById('app'));
});