Can I have multiple calls to ReactDOM.render() in a single JavaScript file?
We can have multiple calls to ReactDOM.render() in a single JavaScript file without issue - having multiple calls to ReactDOM.render() may be especially useful when using React in an exisiting application/site. However, when we build an application using only React, we’ll usually use a single call to ReactDOM.render(), not multiple.
May i know why a single call ? Render all the thing at once to save the computer processing power ?
When the web was created, they consist of pages, that was it. Whoever created the page put content on the page(s), that was a website.
when you had to navigate to a different page, a whole new page page had to fetched, loaded and displayed.
slowly, this process became more dynamic. Databases where introduced (allowing for user content on a website), but still the entire page had to be refreshed to then fetch all post and display them.
Take this forum for example, the “old way” meant that after submitting my reply, the whole page needed to be refreshed to display all replies
Too speed up this process, wouldn’t it be much nicer if my reply was submitted, validated and then just appended to the page without a page refresh?
reactJS (and others) takes thing even further, we named it SPA (single page application). Its so dynamic, you only update what you need, there are never any page refreshes.
So render only need to be called a single time, from that point on-wards you can do everything dynamic with react.
wow , thank for the reply and explanation on this
No questions about what i explained? Its quite a lot do digest.
I guess I have a question, so the RenderDOM.render is always on the lookout for new appends to the page?
And what’s the difference btw react and the old ways that makes the page refresh redundant?
Not specifically the render method
the old way was, that if you clicked on a link (anchor element (<a>)), a new page was loaded (everything). Or that if you added a reply (like in this topic), the has to be reloaded in order to show your latest reply
reactJS makes this process more dynamic, the post is saved and then added to the page without triggering a refresh
So reactJS can dynamically add, remove or update elements on a page.
To make this happen, how does react work? like a service in the browser which automatically is compiled and run unlike other languages(e.g python) where code has to run manually every time to get the output.
If yes, at what point or line in the code is the execution started or entire react code is run?
Sorry if my questioning is bad.
its a good question, you need to understand the programming languages, libraries and tools you are using.
you could write a book about this.
a browser uses an engine, this engine renders a webpage, on a webpage we can include JS which is processed by the browser engine.
the browser doesn’t understand react, in order to run react (which is a javascript library) the code need to converted to JS (thankfully we have tools for this)
If you really want to understand this in depth, you need to start researching browsers and there engines, this could be a good starting point:
Thank you that helps : )
I used to use AJAX, with jQuery which seemed to do much the same as React - it sent or fetched data to or from a database and then that data was displayed immediately in the browser without a page refresh. How does React improve upon AJAX?
first things first, both Jquery and React are javascript libraries. So anything that can be done with these libraries can be done in Javascript
so what is the point of a library? It varies it bit between libraries, but in general it allows us to write programs faster due to existing functionality of the library we can use
So which one was first? Jquery or React? Answer: Jquery. So why was Jquery created and what was its purpose? Jquery was created in a time where JS (javascript) itself didn’t easily support different browsers. Jquery took care of us for this. Saved a lot of trouble.
What you mention about Ajax, we could also do in plain/vanilla JS.
So why react? React allows us to build SPA’s (single page application) much faster, making your whole website a lot more dynamic and faster.
Also, DOM manipulation is expensive (processing wise), react uses a shadow DOM to overcome some of this problems.
But react is overkill when you only have a couple of Ajax calls. Then Jquery or JS might be better. For each project you make, you need to decide what libraries you want to use.
why would an application only use a single call? i see that someone already asked that, but i don’t see how the answer correlates to the question. i’m very new to react but isn’t the whole point that it’s dynamic? how are multiple calls to .render() not dynamic?
This raises a question: Why not? Other people seem satisfied with the answers given.
.render() is only the initial render. After we rendered our component, we can do dynamic updates. But that is not the responsibility of render() method.
Which .render() do you mean? The one called on ReactDOM? So ReactDOM.render() gets called once, and then we use other methods to do dynamic updates? Is that correct?
are there other renders then? Yes, the the method of ReactDOM object/class
A webpage consist of a DOM (document object model), in the end, react handles the interaction with the DOM. react does all kind of “magic” to optimize this process (using a virtual/shadow DOM)
but we can specify in react what interaction we want in the end.
Yes. The other render method that I had in the back of my mind is the Component’s render method.
Can React also interact with a Database - sending and retrieving data from a Database, just as you hinted AJAX and JQuery can do?
So in what scenario should you choose to use React or AJAX or JQuery?
Where does each work better?
Are there differences and similarities that should make a developer prefer one over the other at a particular point or another?
I already answered this question in this very topic:
React and Jquery are both JS libraries. Jquery was released in a time when cross browser support was dreadful, Jquery solved this problem. This problem doesn’t exist any more (cross browser/platform support is now much better), but Jquery is still around, and can still simplify things which would take longer in pure/plain/vanilla JS.
react is more modern, and allows us to build SPA (Single Page Applications). React uses a shadow/virtual DOM to optimize interaction with the DOM (which is expensive)
react and Jquery can use AJAX to make async request to the server
react can do no such thing. React can make request with ajax (or fetch, or axios) to the server which can interact with the database and send data back