Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I often heard that it is bad idea to combine react and jquery but I think it is more easier for me to make change on DOM with jQuery
Example:
<a className="toggleLink">Click Here to toggle Menu</li>
<div className="contentToToggle">content to toggle</div>
For jquery, I will write to function extend then I can use again for many cases or I can use click event directly by class. This class will also used again.
jQuery.fn.extend({
toggle: function(element){...}
});
but in react, I feel quite complex, each click on each component, I have to make a state to return for that component only.
Expose that I have 10 click events: First to toggle, second to addClass, third for showing popup...
So it should be bad idea to use React in this case. Is it right?
I want someone here can help me with this situation. Thanks
It is always preferred to not mix React and JQuery and it might make things more complicated.
Both of them have different ideologies. JQuery modifies actual DOM whereas React plays around with Virtual DOM.
Coding things with React may seem little bit heavy and cumbersome initially but it keeps things much more clear and less abstract going forward. Hope this helps !
No no no no no and some more no 😉😂
They are two different approaches to building a web app. Using JQuery means React could no longer be handling state, events and UI rendering. Which can causes conflicts, almost like two builders trying to build the same road at the same time using different materials and approaches.
If you using React you should use React's approach to manipulating and updating the DOM. That being said you don't have to use React if you don't want to. If you're familiar with JQuery build the site the way you know how if that will get it done quicker and React is not a requirement.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm learning ReactJS, I know that react is about declaring the way something should render, giving it some data and poof, when the data changes, it renders those changes.
But if I want to manipulate the DOM, an example change a color, create a accordion, make animations, add and remove a class, etc.
React can do that? Could I migrate my jQuery projects to Reactjs without any problem?
There are many approaches for that task, a complete list is here in the official Docs. Either use React as a Wrapper on top of your jQuery Application or Translate your jQuery App to a React App.
From the official Docs
React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty .
Here is a medium article that may help you.
How-my-team-converted-our-website-from-jquery-to-react-in-small-steps
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am doing this at some point in my React app:
document.getElementById(element).scrollIntoView({ behavior: "smooth" });
As a beginner, I have two questions around this:
1) Is this considered bad practice in React? Should I rather use refs?
2) Am I technically modifying the DOM in any way using this technique? As far as I know, I am not, but maybe there's something going on in the background I'm not aware of.
In general, refs is better than document.getElementById, because it is more in line with the rest of your react code.
In react, every component class can have multiple component instances.
Also using id is dangerous, because react does not prevent you to have multiple forms on 1 page, and then your DOM contains multiple inputs with same ID. And that is not allowed.
Another advantage to using refs, is that by design, you can only access the refs in the context where you define it. This forces you to use props and state (and possibly stores) if you need to access info outside of this context.
And this an advantage, because there is less/ no chance of you breaking your unidirectional data flow, which would make your code less manageable.
NB: In almost all cases, refs can be avoided altogether. It is a design principle for Netflix to use no refs, ever, as explained by Steve McGuire (Senior User Interface Engineer at Netflix) in this video from reactjs conf 2016 (9:58m into the video).
In your case, this would mean putting the email-input value in state of the form, add on onChange handler, and use the state value in the submit event.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
My question is the following. Should I avoid using any kind of jQuery code in Angular application as it seems legit to have only one thing interacting with DOM.
Another question is if anyone came across problems where he couldn't find any other solution but writing a quick hack with jQuery.
Thank YOU!
Yes it's a bad practice, but sometimes it will save you much time, especially when you are looking for a plugin,
Do it when necessary only, and keep a note to switch it back when other solutions are available.
The first thing you should do is to read this thread on SO "Thinking in AngularJS" if I have a jQuery background?. This will give you some perspective.
When it comes to Angular, it the model that drives the view and most of the times direct DOM manipulation is not required.
For example if you are using DOM manipulation to show\hide element, add remove class or set style, then better to use ng-show\ng-class\ng-style directive.
But there are cases when DOM manipulation is required and that is the time you write directives and either use jqLite or jQuery to manipulate DOM.
My suggestion would be to avoid jQuery unless you have to incorporate a jquery plugin that is dependent on jQuery.
While developing always look if the inbuilt directives that can serve your purpose. If not can jqLite be used to achieve what is desired. Your final resort should be jQuery.
Well it's just two large resources, which makes your app "heavy". Otherwise it's only a preference thing. Personally I don't use jQuery with any of the reactive frameworks (Vue, React nor Angular).
Remember that anything jQuery can do, you can do with vanilla JS.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Being a front-end developer working in a team, I have found myself solving a recurring problem many times.
For example, much of our frontend javascript code is written using jQuery and CSS selectors (mostly targeting a CSS "class"). The problem is, is that many times another developer that is fixing some CSS code will remove a class or will change the DOM element nesting it under another element making the JS code break.
To prevent this, my idea was to use/add a "data-js" attribute to each element that we want to use for Javascript. However I am not sure about the performance of a jQuery selector written like this:
$('[data-js="my_js_selector"]').click();
Another idea I had, was to add a js-specific class to a dom element that is somehow manipulated by Javascript:
link
and then calling it simply with $('.js-link').click()
It would be very nice that you could only look into HTML and tell that some element has some Javascript manipulations attached without actually looking into the JS code.
Is this a good idea? Or are there some other best practices to separate JS-triggering from CSS styling?
In Scalable and Modular Architecture for CSS (SMACSS), Jonathan Snook teaches that a "state" class such as the one you proposed with .js-link is the best approach.
The relevant discussion is in the section on State Rules:
Sub-module styles are applied to an element at render time and then
are never changed again. State styles, however, are applied to
elements to indicate a change in state while the page is still running
on the client machine.
For example, clicking on a tab will activate that tab. Therefore, an
is-active or is-tab-active class is appropriate. Clicking on a dialog
close button will hide the dialog. Therefore, an is-hidden class is
appropriate.
This contradicts what two commenters said. CSS code and classes should be flexible; CSS developers should be able to refactor and improve code without worrying about breaking functionality not related to presentation.
The point made by #ArunPJohny supports the state class approach. Engines are unfortunately not optimized to recognize data- attributes any more than they are to recognize arbitrary custom attributes, such as foo-.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've lately realized that I would like to jump into AngularJS framework. I was developing with jQuery for few years now.
I want to create some application that helps user to modify webpage dom (some sort of browser WYSIWYG editor). It just loads page normally and adds some custom sidebar with tools - like managing css styles, adding new elements, editing curent content. So basically there is only one view added - sidebar. Main part is normal page that has nothing to do with my editor.
I'm in the middle of work and I was doing it with jQuery - but it requires a lot of same, repeating DOM manipulation.
So do you think guys it's good to make it with AngularJS?
I would have features like:
a lot of inputs for various css styles that will modify styles of selected item in real item (last clicked item would be active or something like this)
options like duplicate item, remove item, restore default styles, sort with other items
adding new items ( for now I'm doing it with jQuery UI Dragging and Sorting)
and so on that you can imagine it would need.
My goal is to focus on business logic of this (and there is a lot of this) and leave all those events, checking item propeties, updating them etc to framework.
Also what other frameworks are good for this? jQuery is great for DOM modifications but in this case all of them are very similar to each other.
Thanks.
At first glance, I would say that Angular is not likely to be a good fit for this project. Most of the power of Angular comes from directives, which are generally applied by adding attributes to your markup. Since the main bulk of the markup in the page is out of your control, much of what angular does won't help you modify the underlying page. Angular might help you with your own UI, but most likely jQuery would be more useful for applying the styles to the elements on the original page.
I think angular is great for any client side coding, automatic updating of async data & organization of code in an MVC structure. Just give it a try.