あらすじ
redux-form といった ecosystem が要らない場合はこういうやり方もあるんではないかと思います。
やり方
create-react-app practice-react-router-spa && cd $_ touch src/Posts.js src/api.js npm install --save react-router
edit src/App.js
import React from 'react' import { Router, Route, IndexRoute, browserHistory } from 'react-router' const NotFound = () => (<div><span>NOT FOUND</span></div>) import Posts from './Posts' export default () => ( <Router history={browserHistory}> <Route path="/"> <IndexRoute component={Posts.List} /> <Route path="create" component={Posts.Create} /> </Route> <Route path="*" component={NotFound}/> </Router> )
create src/Posts.js
import React, {Component} from 'react' import { Link, browserHistory } from 'react-router' import api from './api' class List extends Component { constructor(props) { super(props) this.state = { posts: [] } } componentWillMount() { api.getPosts().then((result) => { this.setState({posts: result.posts}) }) } render() { return ( <div> <h2>Posts</h2> <div><Link to="/create">create</Link></div> {this.state.posts.map((p, index) => ( <div key={index}> <h3>{p.title}</h3> <p>{p.body}</p> </div> ))} </div> ) } } class Create extends Component { handleSubmit(e) { e.preventDefault() const params = { title : e.target.title.value, body: e.target.body.value } api.createPost({params}).then(() => { browserHistory.push("/") }) } render() { return ( <div> <h2>Create Post</h2> <form onSubmit={this.handleSubmit.bind(this)}> <div> <label htmlFor="Title">Title</label> <input id="Title" name="title" type="text" /> </div> <div> <label htmlFor="Body">Body</label> <textarea id="Body" name="body" rows="10"/> </div> <button type="submit">submit</button> </form> </div> ) } } export default { List, Create }
create src/api.js
const posts = [{ "title": "laboriosam dolor voluptates", "body": "doloremque ex facilis sit sint culpa\nsoluta assumenda eligendi non ut eius\nsequi ducimus vel quasi\nveritatis est dolores" } ] function getPosts() { return new Promise((resolve) => { return resolve({posts: posts}) }) } function createPost({params}) { return new Promise((resolve) => { posts.push(params) return resolve() }) // return axios.post(`${BASE_URL}/api/posts`, params).then((res) => { // return { "post": res.data } // }) } export default { getPosts, createPost }
実行
npm start
社内のランディングページなどで試験的に React.js を使って社内用の component を蓄積しつつ React.js に慣れてからの redux を導入するとか、とりあえず React.js でシンプルなページを作るところから始めるのもいいと思います。
おしまい