javascript - How can I access a single view in on a SPA? -
i have react-js application following structure:
public src components - books.js - bookshow.js - app.css - app.js - index.js in package.json using following node modules:
{ "name": "tester", "version": "0.1.0", "private": true, "devdependencies": { "react-scripts": "0.7.0" }, "dependencies": { "bootstrap": "^3.3.7", "react": "^15.3.2", "react-bootstrap": "^0.30.6", "react-dom": "^15.3.2", "react-router": "^3.0.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } in main site trying create 1 page app list books books.json file. can , list books in books.js file following:
import react 'react'; import { link } 'react-router'; export default react.createclass({ getinitialstate: function() { return { books: [] } }, componentdidmount: function() { this.request = fetch('https://gist.githubusercontent.com/madwork/adfae25c174bb246c650/raw/db225e4b9c74e1865da1c9cd54cf87d3dee171a5/book.json') .then((request) => request.json()) .then((data) => this.setstate({ books: data, isloading: false })) }, componentwillunmount: function() { this.serverrequest.abort(); }, render: function() { return ( <div classname="container"> <h1>books</h1> {this.state.books.map(function(book) { return ( <div key={book.id} classname="book col-lg-4 col-md-4 col-sm-4"> <link to={"/books/"+book.id} classname="list-group-item" key={book.id}> {book.name} <img classname="img-responsive" src={book.cover} /> </link> <h3>{book.name}</h3> <p>{book.author.name}</p> <i classname="glyphicon glyphicon-heart">{book.likes}</i> </div> ); })} </div> ) } }) in main app.js file , index.js files have routing setup follows:
app.js
import { link } 'react-router'; import react, { component } 'react'; import logo './logo.svg'; import './app.css'; class app extends component { render() { return ( <div classname="app"> <div classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <h2>welcome react</h2> </div> <p classname="app-intro"> started, edit <code>src/app.js</code> , save reload. </p> <ul> <li><link activestyle={{ color: 'red' }} to="/books">books</link></li> </ul> {this.props.children} </div> ); } } export default app; index.js
import react 'react' import reactdom 'react-dom' import { render } 'react-dom' import { router, route, indexroute, browserhistory, hashhistory } 'react-router' import app './app' import books './components/books' import bookshow './components/bookshow' import './index.css' import 'bootstrap/dist/css/bootstrap.css' render(( <router history={hashhistory}> <route path='/' component={app}> <route path='/books' component={books}> <route path='/books/:id' component={bookshow}/> </route> </route> </router> ), document.getelementbyid('root')) what struggling enable user click book object list , single view of book data. have set routes see logically wondering missing trick here.
can point me in right place or equally shout @ me if wrong :)
mark
the problem is, data lives inside books component. , don't have data layer component agnostic.
there different approaches it, redux, hold of data inside global store.
another approach build own data layer.. simple, object gets filled api methods. api methods cached items before sending requests backend.
the unlimited options, actually.. call backend each time 1 visits book/:id page, , load book.
so, depends on knowledge, time.. , effort want spend. every solution has own benefits , drawbacks.
personally, first create separate api module, perform api calls. , use global storage data. , if data statical, try find book first locally, , if not there call backend -> store locally -> give component.
in cases nice use redux, in overhead. however, worth try out.
Comments
Post a Comment