I'm fairly new to react; just learning it. From what I understand react gives you ability to render data more dynamically. But couldn't this be achieved using flask rest api endpoints? Kind of making AJAX calls and rendering it's response dynamically?
What's the difference?
I'm currently trying to develop a full stack application. Trying to choose what I should use for frontend, typically on a normal day I tend to use pure HTML/CS/JS to accomplish most of my front-end task without having to use JS libraries such as react to render data dynamically, I want to improve my ways around handling front-end stuff hence wanted to learn more about react and how it can benefit me; before actually diving in it.
What can help is; if someone can lay it out for me; describing work scenario using reactjs and how I can be benefiting from using the js library.
Thanks.
In my opinion, React is all about how effectively you can render your dom elements.
Rendering DOM (Painting your webpage with your HTML elements) is considered to be one of the costliest operation. And if you consider using other libraries( apart from react), there is a chance that your HTML will be rendered even if it doesnt change.
Here comes the power of React. React uses the concept of Virtual DOM which helps in rendering HTML to browser only when there is a change. For example, if you have a list of items being displayed, and if one list item changed because of some action, React will trigger a change to render only that element(of course we write very minimal code for this).
So if you use React as your front end library, you can easily benefit fast rendering of HTML and stopping unnecessary rendering of your DOM
Related
I'm getting ready to do my first React project, and my reading has made it pretty clear that I need to let React handle all rendering with the virtual DOM, and that I shouldn't do any manual DOM operations that would interfere with the virtual DOM calculations.
What I can't figure out, however, is this:
Suppose that I have a React component rendered in div #app in a page with other HTML. Does this mean that I have to refrain from any ordinary JavaScript DOM operations anywhere on the page? Or can I safely use DOM operations elsewhere on the page as long as I leave the #app div and elements inside the actual React component alone?
EDIT: Motivating use case
My reason for considering having non-React components manipulate the DOM outside of the React component is mostly so that the HTML can be seen by Google without jumping through a lot of hoops. Suppose that I wanted some descriptive text about the app that would be useful for SEO, and that description might have some dropdown toggles, etc. (hence the DOM issue). Would I really want/need to write everything in React just because the complex UI of the app itself uses React, if the cost is making some text hard for Google to index?
Assuming your html file looks like this:
<body>
<div id="app"></div>
<div id="others"></div>
</body>
and React is initialized like this:
ReactDOM.render(<Component/>, document.getElementById('app'));
you can safely modify div#others and any parts of the DOM except inside div#app as it is managed by React.
I may be misunderstanding your question, but React would be a great candidate to handle all of your DOM "operations".
Your React components can live on the same page as elements that are manipulated with run-of-the-mill JS DOM operations, but you are introducing conflicting paradigms. If you ever think to yourself "I can't do this in React, but I know how to with jQuery", you are most likely missing something.
EDIT: Thanks for clarifying the use case. You definitely don't need to write everything in React. As others have said, I would advise you to leave the part of the DOM owned by React alone with your other JS. Fetch as Google looks like it could be helpful for exploring SEO in React.
is performace degraded if we use jquery with reactjs?
because jquery changes directly DOM elements where as reactjs works with Virtual DOM.
is there any example reactjs with jquery?
is performace degraded if we use jquery with reactjs?
Not necessarily.
because jquery changes directly DOM elements where as reactjs works with Virtual DOM.
You are correct that jQuery does not utilize React's virtual DOM. Aside from rewriting core parts of jQuery to utilize it, vanilla jQuery will not. A wrapping component that does participate in React's virtual DOM can patch it in though.
The performance of this entirely depends on your usage. Keep in mind that React does still manipulate the DOM at the end of the virtual DOM work.
You can find the most up to date, official example at the Use React with Other Libraries page of the official React docs but it is admittedly light on the details.
is there any example reactjs with jquery?
If you check out this unit of react-training on wrapping DOM[-manipulating] libraries you can find a beautiful, comprehensive example of using ReactJS with both jQuery and jQuery UI.
Using the result of that article as a baseline, you will be using jQuery at time of React's initial mount time to minimally to do the DOM work and provide classnames for styling as needed, and React's pre-render props changing lifecycle event to re-render from changes through React. You are obviously free to use other events, such as shouldComponentUpdate or manually triggering renders as well, as your needs dictate.
Your performance will largely be tied to what you do in that re-render step.
Here are some tips that may help stave off some common performance vampires:
Ensure you are caching selectors and functions wherever possible
Ensure collection member's identities are properly keyed so that they aren't resulting in constant cache misses and thus constant re-renders
Especially if you are using unidirectional data flows or immutable data stores.
Some mapping operating always return new objects and so need extra care or a different api call.
Aside from that, keeping in mind both React best practices and jQuery best practices will take you a long way.
At the end of the day it's just JavaScript - React tries to keep away unnecessary heavy true DOM object creation/manipulation where jQuery allows misusing it just fine - but there is nothing by its nature to prevent making a performant jQuery app.
The question here is not about is this a good idea or not, because there is a real use-case : I'm scraping a specific website from a headless browser for an internal service and I need to extract data from react.
From an active production application, I would like to retrieve props from the root component using only "pure" JavaScript. The only thing I got is a div right now.
The constraints are:
It must be done using pure JavaScript (or using standard React lib)
I cannot add/setup react-devtools extensions or things like that
So far I could always hack into an event handler that I would trigger to manage to enter into React context but I'm looking for cleaner alternatives, any ideas?
I've been reading about react.js library from Facebook lately, but I cannot see any difference between React and jQueryUI widget factory. Can someone make comparison between the two and tell me why should I use react.js instead of jQuery widget factory ?
Thanks
They aren't comparable, as they solve vastly different problems. jQueryUI widget factory is more a stateful wrapper around manipulating the dom with jquery. Not much different than writing objects where your render/update calls do jQuery DOM operations. ReactJS is more about 1 directional data flow & rendering. So when the state changes, it makes it all the dom changes behind the scenes on its virtual dom. Then diffs the updates to the real dom. Making it to be very fast, and very clean.
I've been learning React.js for a couple of months now, and my number 1 reason to use React.js is because of how it forces you to structure things. Keeping components self contained, and only manipulating the output by changing a state is vastly powerful. I've also come to like the Flux pattern, with the one direction of data flow.
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.