项目作者: Xerios

项目描述 :
Clean isomorphic starter-kit using Mobx + React + React-router + Webpack
高级语言: JavaScript
项目地址: git://github.com/Xerios/mobx-isomorphic-starter.git
创建时间: 2016-08-06T16:54:17Z
项目社区:https://github.com/Xerios/mobx-isomorphic-starter

开源协议:MIT License

下载


Isomorphic React + Mobx Starter project

The goal of this project is to provide a starting base for an mobx react project with isomorphism and SEO compabilities ( meta tags change ).

Based on nightwolfz/mobx-starter, except that it’s cleaner and simplified.

Features:

  • Simplified flexible isomorphic system ( fetchData )
  • Uses Provider to inject global state into Components
  • Document title, keywords and description change integration
  • CSS and SCSS compilation
  • Hot reload for development ( page auto-refresh )
  • Battle-tested structure ( see UnityList.com )

Preview

Setting up isomorphic components is as easy as this :

  1. @observer(["state"])
  2. export default class Browse extends React.Component {
  3. // Executed on client and server ( server waits for Promise to be resolved )
  4. //-----------------------------------
  5. static fetchData({state, params}){
  6. state.app.title = 'Browse' // Change document title
  7. state.browse.data = 'Loading...' // You can add a loader for the client side rendering
  8. // Return a promise so that server waits until it's done before serving the page
  9. return new Promise((resolve)=>{
  10. setTimeout(() => {
  11. state.browse.data = 'fetchData : Hello data '+ Date.now()
  12. resolve()
  13. }, 1000);
  14. })
  15. }
  16. // Render
  17. //-----------------------------------
  18. render() {
  19. return <section>
  20. <h1>Browse</h1>
  21. <p>This is delayed page example, executed on server and client alike</p>
  22. <p>Try refreshing and you`ll see it takes 1 second to load this page, while changing routes on the client remains async</p>
  23. <p>{this.props.state.browse.data}</p>
  24. </section>
  25. }
  26. }

How to run

  1. node index.js

If you want to run production build on your development machine, use cross-env ( npm install cross-env -g )

  1. cross-env NODE_ENV=production node ./index.js

Requirements

  • Node 6 or Node 4

Depencencies

  • Express + express-router
  • React + react-router
  • Mobx + mobx-react
  • Mongoose ( optional )
  • Babel
  • Webpack
  • Sass/SCSS loaders

Goals

I needed a fully isomorphic website where most important data is shared through out the whole application.
So I made this simplified, bloatware-free code for starting a new isomorphic project.

We have one main state object that’s observable and all react components decorated with @observer(['state']) have access to it ( though <Provider ></Provider> ).

All the rendering is efficiently taken care by MobX

F.A.Q.

How to add mongoose models ?

  1. Goto src/server/models
  2. Add [Name].js
  3. Goto src/helpers/database
  4. Add a new line under export const Account
  5. Require your model like this import {Account} from './src/helpers/database

How do I make my components isomorpic?

Check if you added the static fetchData({state, params, query}){ static function properly to your component.

My isomorphic component is acting strange / isn’t waiting until the request has been done

Verify if your fetchData is returning a Promise and resolve is executed once all required data is fetched.

My components are not updating!

Make sure you added the @inject("state") @observer decorator to your component.

My stateless component doesn’t have access to state !

You cannot use decorators on stateless components.
You should instead wrap your component like this:

  1. const MyStatelessComponent = observer(['state'],function(props, context) {
  2. return <p>{context.state.something} !</p>
  3. }))

The propType of an observable array is object

Observable arrays are actually objects, so they comply to propTypes.object instead of array.

Where can I find a more complex starter ?

Check out nightwolfz’s implementation !
https://github.com/nightwolfz/mobx-starter

Author

Sam Megidov