React-Path

Initial React Page with original data by AJAX

##Usage If you prefer to use React with your routes in backend. This module could be used to inital your React page after retrieving data from database. In this way, it could simplify state management compared with retrieving data in componentDidMount stage.

##Install

npm install react-path --save

reactPATH({
	reactName:Subject,//Subject is the name you used for your react component
	htmlName:"root",//root is the div id you used in html to hold your react component
	dataUrl:"/api/getSubject"//"/api/getSubject" is the route you used in backend to retrieve related data from database
});

This module will do two things: 1. Send a post requirement to dataUrl you gave with a value params. The value params would equal to any words after your last "/" in the link address: If your link address is "google.ca/subject", then value = "subject" if your link address is "google.ca/subject/0", then value = "0" 2. After retrieving related data from backend, this module will inital a reactDOM for you with original data like: ReactDOM.render(<Subject data={data} />, document.getElementById("root")); Then you could use this.props.data in your Subject component without considering state issues related to componentDidMount

##Example Assume coding for a sub page with url like "localhost:8000/subject/0". I'll use Flask for backend here, it would be same for other frameworks.

step 1: In backend, code a route rule for /subject/id

@view_pages.route('/subject/<id>')
def subject(id):
    return render_template('subject.html')

step 2: In html, create a div to hold your react root component

<div id="root"></div>
<script type="text/javascript" src="/source/subject.bundle.js"></script>

step3: In React, create your React root component, and inital it by react path

import React, {Component} from 'react';
import reactPATH from 'react-path';
...
class Subject extends Component{
    constructor(props){
		super(props);
		this.state={
			data:this.props.data
		};
	}
}
reactPATH({
	reactName:Subject,
	htmlName:"root",
	dataUrl:"/api/getSubject"
});

step4: In backend, create the "/api/getSubject" route to send related data back to React.

@api_pages.route('/api/getSubject', methods=['GET', 'POST'])
def showSubject():
    if request.method == 'POST':
        id = request.form['value']
        subject = db.subject.find_one({'id':int(id)})
        if not subject:
            abort(404)
        return json_util.dumps(subject)

Work Flow: When localhost:8000/subject/0 has been entered, react-path would send an AJAX post to '/api/getSubject' route in backend with value = 0. Then backend route should retrieve related data from database with value = 0 and send it back as data variable. After react-path get the data, it would inital reactDOM with the name you gave, "Subject" here Inside Subject component, you could use the original data by this.props.data;

##Other This module just stand for an idea to retrieving data in Ajax first and then initial ReactDOM with data in order to simplify state management when you don't want to use react-route and redux in small projects.