1

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.

Improve this question
7
  • And why not having the id in the html? Commented Oct 26, 2016 at 16:13
  • the index.html page does not have a my-meals-box id, and it shouldn't. I noticed there is a mistake in my code sample. my-meals-box should be the id of the first render instance. That might have been the confusion! let me edit that Commented Oct 26, 2016 at 16:16
  • ... Check for the existence of the element first? Seems straight-forward enough. Commented Oct 26, 2016 at 16:48
  • @DaveNewton I am looking more for a standard way reactjs programmers deal with this situations; unless there is no standard Commented Oct 26, 2016 at 17:00
  • @NicolaPedretti The "standard" way is to see if the element exists before trying to render into it--that seems like a reasonable approach. Commented Oct 26, 2016 at 17:01

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, this is a much cleaner way!
1

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

Improve this answer

Comments

-1

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'))
Improve this answer

2 Comments

One of the reasons why I chose react over angular is that I can only create parts of my app in react, and leave the rest in html. I only want to use it where I need it. The MealBox / MealContainer issue is a mistake in transcribing the code. I edited it!
1) The URL is being passed as a property. 2) React is great for dropping components one-by-one into simple apps; that's one of its selling points--it doesn't force you into complete rewrites. Whether or not it makes sense for a new app is a different issue; IMO if there's only a tiny amount of dynamic content, you only need a tiny amount of React.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.