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
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 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 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.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
My question is about the standards of React and JSX. I am unsure how to formulate a page using React. Do I break down my page into components and render everything through JSX? Or is it a combination of HTML with rendered components strewn throughout?
I have been unable to find any succinct response to this question, but from what I have gathered, is that I break the webpage into only components.
It's a combination of HTML with rendered components strewn throughout. You can however also have only one master "component" to render the entire app and it's "sub" components rendered within.
I don't think the term component is the best one here but I get what you mean rather I think you mean React Element.
Generally it is preferred and easier to just use React Elements where you need React eg for a search bar and have everything else in HTML.
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 5 years ago.
Improve this question
I'm about to choose whether to use React Navigation or to use React Router Native, I thought that React Navigation is better, but then I found some feedbacks like this react navigation issue, ps: React Router Native has similar API to React Router which seems very simple, I'm still lost! I need an advice
In my experience React Navigation works like a charm. It uses native-alike layouts if you don't wanna create your own, and let you customize them via props as you wish. It also lets you navigate inside functions without the need of redux actions, which i think are a must in React Router.
The main problem of React Navigation is its documentation, which is pretty lackluster. It has no complex examples, only simple stuff, so you have to lurk a little bit to do some stuff if your app starts getting complex, with a lot of nests.
Even so, the only hard to solve problem i really had with React Navigation was when i had a Stack Navigator (2nd) inside a Drawer Navigator which was nested inside a main Stack Navigator (1st), which back then wouldn't let me change the main header from within the 2nd Stack Navigator. This could be worked around by putting the 2nd Stack Navigator directly inside the main one.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I used react on several of my project is that it was well passed, but it is last time I saw that there is a react-hot-reload
What is react-hot-loader?
What is its use?
difference between Hot Module Replacement in Webpack and React Hot Loader ?
What is the advantage it will bring to the workflow?
how it works behind
can anyone explain me plz :)
React Hot Loader is a React library used to edit your code and automatically reflect that change in your running app while keeping the components mounted, which means you don't need to refresh your browser and you won't lose your current state. It's pretty convenient as you won't have to go step-by-step to test a specific state in your app every time you make a change in the code.
Your workflow would be faster, simpler and more comfortable.
Here's a live demo: http://gaearon.github.io/react-hot-loader/
Edit: React Hot Loader is now deprecated, use React Fast Refresh