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
I have a ReactJS functional component that should update the class of an element within same component on a click event.
The question is really simple and I am probably overthinking it as performance-wise. Am I better of converting the functional component so that it manages state and I change class depending on the state? Or am I better of with changing class onClick with classList.add('active') ?
If anyone has any idea which would be better please let me know :)
If you need to change elements classes in relation with some internal state of the component (that you change with onClick handler), then you should go with stateful components (class components or use Hooks).
I strongly suggest you to avoid directly accessing DOM elements and manually add classes. React has it's own way to keep control of these things.
Related
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 am having a hard time finding a good yet simple article on the 'behind the scenes' of jQuery. I know this is not simple though.
But does jQuery actually uses cycles and states like React does ? If not, what is it, in simple words ?
What is happening when jQuery does that ?
$('.netreviews_stats_stars_big').css('opacity', '0.2');
The DOM manipulation parts of jQuery do direct DOM manipulation. It doesn't take a data-driven approach like React so the idea of state in the React sense is meaningless.
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
I wonder if writing react components as HTML first can be a good idea to plan the project or it is actually a bad idea and time consuming??
Though, this is primarily opinion based question, the react documentation simply states to follow these rules:
Start With A Mock
Break The UI Into A Component Hierarchy
Build A Static Version in React
Identify The Minimal (but complete) Representation Of UI State
Identify Where Your State Should Live
Add Inverse Data Flow
See Thinking in React for more info.
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
I am learning React and wondered if there was a way to re-render on state change without using React. Is this possible in plain JavaScript?
Let's assume that our whole application is this:
<input id="myState" />
<h2 id="myView"></h2>
We have some sort of value we call state and we have some sort of value we call view. Now what we want is that when we update our state, we want to update our view. Yes, that is absolutely possible without React/Redux/etc.
window.onload = function(){
var state = document.getElementById('myState'),
view = document.getElementById('myView')
state.addEventListener('keyup',function(e){
view.innerText = e.target.value
})
}
Every time the 'state' of our application changes, we are resetting the 'view'.
Going past this dummy problem you will run into alot of issues, which are the issues that React/Angular/Ember/Backbone/etc all try to help fix.
Can it be done in vanilla JS? Yes, because someone else already did it in vanilla JS.