React is a great library for making changes to the DOM. There are lots of good features about React that make it easy to modify elements. Let?s take a look at a common use case in manipulating the DOM and see how it?s done in React.
Adding/Removing a class name
Say we have a part of our DOM that looks like this:
<div class=”container”> <button id=”someButton”>Click Me!</button> <div id=”someElement”>I’m an element</div></div>
When the button is clicked, we want to add the class ?clicked? to the element and when the button is clicked again, we want to remove the class.
Using JQuery, our code would look something like this:
$(document).ready(function(){ $(‘#someButton’).on(‘click’,function(){ if($(‘#someElement’).hasClass(‘clicked’)){ $(‘#someElement’).removeClass(‘clicked’); }else{ $(‘#someElement’).addClass(‘clicked’); } });});
Now lets look at how you?d do something like that in a React component:
var ExampleComponent = React.createClass({ getInitialState : function(){ return ({isClicked : false}) }, handleClick : function(){ this.setState({isClicked : !this.state.isClicked}); }, render: function() { var someElementClass = this.state.isClicked ? ‘clicked’ : ”; return(<div className=”container”> <div id=”someElement” className={someElementClass}> I’m an element </div> <button id=”someButton” onClick={this.handleClick}> Click me! </button> </div> ); } });ReactDOM.render(<ExampleComponent />,document.getElementById(‘content’));
So, what?s going on in this snippet of code? Let?s break it down:
- React uses a syntax called JSX which is that funky XML-like code in the ?render? function. It can be a little off-putting when you first look at it, but after using it, it becomes second nature, almost like writing HTML. This article has more details about JSX syntax and how it works.
- React components have a function called ?getInitialState?. This does exactly what the function name would imply ? it sets the initial state of the component. We can throw any sort of variable we want in there and access it via this.state. In this particular component, we?ve used a isClicked boolean to determine whether or not the button has been clicked.
- The handleClick function is where all the action happens. In this function , another React component function gets called ? this.setState(). This is the ?magic? function in React that allows you to update and modify your app. Updating this.state directly is BAD ? don?t do it, just don?t. Your app will be unhappy and your users will have sad faces while trying to use your app. The only way to change this.state is to call the this.setState() function. When this function is called, a re-rendering of the virtual DOM happens and any changes that need to be made happen in the real DOM.
What?s the virtual DOM you ask? Good question. One of the cool features about React is that it stores JavaScript objects that are representations of the actual DOM and only makes changes to the actual DOM when necessary. This article explains more in detail how the changes actually happen if you?re interested in diving deeper.
4. Finally, the last line of code (ReactDOM.render())is what actually takes our component and render it on the page.
While React appears to be more verbose than JQuery, it has some powerful features that allow you to compartmentalize your application rather than having huge JavaScript file full of $(document).ready() declarations (as I mentioned in my previous post). Each component can be put into it?s own JavaScript file and used when necessary. And if you breakdown the structure of your app enough you?ll know exactly what each component is doing and when it is changing. You don?t run the risk of updating other parts of your application. I like to think of each component has having one job and doing that job very well.
While JQuery definitely has it?s place in the web world ? there are many great uses for it, I believe React can be used to replace more of the complex functionalities that often create a huge mess and maintenance headache. I?ve loved using it for Shopsifter!
Happy Sifting!
