Nicola Pedretti Nicola Pedretti - 1 year ago 251
React JSX Question

Reactjs render component on different html pages

I am building a new Nodejs app and I would like to use Reactjs for some components.
So far I have two html pages; home page and my_orders page.
The home page displays all the food items, and the my_orders page presents the food items that the user has ordered.

To do this I build 2 react components, a Meal component and a MealContainer component. I need to put the MealContainer component in both the index.html page and the my_orders.html page. So far tho I have this:

var MealsContainer = React.createClass({
//render the right meals

ReactDom.render(<MealsContainer url='/getMyMeals' />,document.getElementById('my-meals-box'))
ReactDom.render(<MealsContainer url='/getAllMeals'/>, document.getElementById('meals-box'))

The meals-box is in the index.html page and the my-meals-box is in the my_orders page.

This doesn't work because when I am rendering index.html my-meals-box is not a real id and vice versa.
The ideal way would be to be able to call render in the html page and render the elements with the right props.

I could use webpack to create different .js files to import in the different html pages but I really don't like that idea. What is the Reactjs best practice for this situation?


I am looking for a standard way partially react apps deal with inserting components in html pages. I am not looking for a quick workaround.

Answer Source

Considering they are different pages, and they will probably have even more differences as your system grows, a more reasonable and sustainable approach would be to split the build in multiple entrypoints, for instance.

- common.js // Will contain the components - index-page.js // Will render in the my-meals-box element - my-orders-page.js // Will render in the meals-box element.

Then in the index.html you should include the common.js and the index-page.js files. And in the my_orders.html you should include the common.js and the my-orders-page.js files.

You can even use a name convention that every js file that ends with -page is an entry point to avoid having to do that manually every time you add a new page.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download