Создайте CRUD UI в реакциях с backend api

Question

Ive создал приложение CRUD в laravel, но теперь я хочу улучшить интерфейс с помощью response.js. Im все еще очень новый, чтобы реагировать, поэтому не уверен, как это сделать.

До сих пор я создал компонент таблицы, который отображает всех пользователей с реагированием. как я должен использовать реактивный маршрутизатор или что угодно, чтобы реализовать users/{id}, users/create, users/{id}/edit и т. д., так что, когда я нажму кнопку «показать пользователя», появится другой компонент с деталью пользователя, который заменит таблицу пользователей в том же представлении.

Еще один вопрос, как я могу передавать объекты из backend, чтобы реагировать на просмотр?

Спасибо.

Это то, что я есть сейчас:

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')); 
}); 

Answer 1

Так, чтобы ответить на ваши два вопроса:

1. React-маршрутизатор очень проста в использовании, и документация велика. Вам просто нужно создать различные маршруты, которые вы хотите на стороне клиента . В вашем случае у вас будет три маршрута. Лучше действительно проверить документацию, которая действительно хорошо о react-router

2. Чтобы получить данные из внутреннего интерфейса, является ли это реагировать или нет, вы должны использовать Ajax. Вы можете использовать jQuery и получить некоторые данные из метода componentDidMount и обновить состояние вашего реагирующего компонента соответственно. Это на самом деле то, что вы делаете, и это работает хорошо. Возможно, вы захотите рассмотреть шаблон потока, чтобы избежать , имеющего управление данными в ваших компонентах реагирования и иметь их простых видов в вашей системе.