isojs

2019-08-20 admin

isojs是什么

什么是isojs,Renders reactJS apps isomorphic on node.js without big app changes.

isojs使用教程帮助文档

This repo is no longer maintained!

UniJS

UniJS is a library for rendering ReactJS apps on node.js.

  • Universal: Use the same code base for server- and client-rendering. Also there is no force to use flux.
  • Autofetch Data: Don’t worry about data fetching on your server. Just provide a REST-API somewhere and perform AJAX-Requests. UniJS automatically detects which data is neccessary for rendering and fetches it before render.
  • State Sync: Sync’s the server rendered state to the client. After rendering the app UniJS takes the state out of all components and responds them with the HTML to the client. There the state gets pushed back to the components as initial state.
  • EcmaScript 6: Build your apps in ES6 style.

UniJS requires to use react-router.](https://github.com/rackt/react-router).*) ">https://github.com/unijs/unijs-demo)–>

Documentation

##Quick Start

git clone https://github.com/unijs/demo.git
cd demo
npm install
npm start

##Usage

###Installation

npm install unijs

###Server

On server-side you need to define your react-router Routes by setting the Router. With the resources attribute array you can add js and css files.

var unijs = require('unijs');
var Router = require('client/js/Routes.js');

app.use(Server.getMiddleware());
// Here express is used. You can also use something similar, that passes (req, res, next) to the returned function on each request.

var Server = unijs.Server();

var myApp = new Server.App('myApp');

myApp.Router = Router;
myApp.resources.push(__dirname+'/bundle.js');

Server.mount('/', myApp);

####Main client render file for bundle

Your React App in the bundle file needs to render to #main div container.

var React = require('react');
var Router = require('react-router');
var routes = require('/path/to/Routes.js');
window.onload = function() {
	Router.run(routes, Router.HistoryLocation, function(Handler) {
		React.render(<Handler/>, document.getElementById('main'));
	});
};

###Client

On client you need to extend each component that has state or is loading data with AJAX.

class Blog extends React.Component{
	// component methods
}

Blog = unijs.extend(Blog);

And load your data with superagent plus unijs-plugin in the componentDidMount method. (componentDidMount gets called while server-rendering when componentWillMount gets called)

class Blog extends React.Component{
	componentDidMount(){
		superagent.get('/getdata')
			.use(unijs.superagentPlugin)
			.end(function(err, res) {
				this.setState(JSON.parse(res.text));
			}.bind(this)
		);
	}
}

Define your initial state as you do it in React ES6:

class Blog extends React.Component{
	constructor(){
		super();
		this.state = {title: '', content: ''};
	}
}

Now put it all together with some ReactJS basics…

import React from 'react';
import superagent from'superagent';
import unijs from 'unijs';

class Blog extends React.Component {
	constructor() {
		super();
		this.state = {title: '', content: ''};
	}
	componentDidMount() {
		superagent.get('/blog/getpost/' + this.props.id)
			.use(unijs.superagentPlugin)
			.end(function(err, res) {
				this.setState(JSON.parse(res.text));
			}.bind(this)
		);
	}
	componentWillReceiveProps(nextProps) {
		if (nextProps.id != this.props.id) {
			this.loadBlogPost(nextProps.id);
		}
	}
	render() {
		return (
			<div>
				<h1>{this.state.title}</h1>
				<div>{this.state.content}</div>
			</div>
		);
	}
}
Blog = unijs.extend(Blog);

export default Blog;

Roadmap

  • [ ] Load component’s code just when it is needed. Maybe with webpack or something own.
  • [ ] Improve Transmission Algorithm.

Contribution and Ideas are Welcome! ;-)

Ideally just create a GitHub Issue or may even a PullRequest to discuss.

MIT

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-73040.html

文章标题:isojs

回到顶部