Reactjs render component on different html pages

Question

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?

EDIT:

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 1

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.

Answer 2

Or you can use my solution:

if (window.location.pathname === '/') {
    ReactDOM.render(
        <Hello />,
        document.getElementById('react-index')
    );
} else if (window.location.pathname === '/test/') {
    ReactDOM.render(
        <TestVu />,
        document.getElementById('testVu')
    );
}

I don't measure it's performance or scalability yet. So I also want to hear your opinion

Answer 3

Wow, this is slightly confusing to me. Are you only building half your app in React and if so why?

The way that I am used to thinking of this is: All one single app. Or a Single Page App. One index.html page and the rest of the content is dynamically generated within said page. And then you just need to make sure that the site URL and the content shown are aligned. You would use react router ( https://github.com/ReactTraining/react-router ) for that.

Also, I don't get the code you posted. If you could clarify that one, it might be easier to trouble shoot. You declare a component MealsContainer but you don't actually call it. Instead you call MealsBox? Did you export the component like that?

I have never seen the use of a url in the ReactDom.render method other than to pass it down as props. I am not sure that this works. Assuming it doesn't then you are calling the same component on different DOM elements that might not be present.

If you don't want to use Router, the way you might be able to go about it is with separate js files that get called when the current .html loads.

//Render component MealsBox into the existing element with the ID meals-box 
ReactDom.render(<MealsBox url='/getMyMeals' />,document.getElementById('meals-box'))

//Render MealsBox into the existing element with the ID my-meals-box
ReactDom.render(<MealsBox url='/getAllMeals'/>, document.getElementById('my-meals-box'))