stubbornella/if-you-like-jquery-you-are-gonna-love-react.md

## if-you-like-jquery-you-are-gonna-love-react.md

      
    Raw
  

              if-you-like-jquery-you-are-gonna-love-react.md
            
          
    I bet you think I'm making that up, right? Here is the thing, they both solve the same problem, just in different ways:

DOM interactions are complicated, it would be great if we didn't have to worry about them.

That's it, that is all both libraries do. I'm exaggerating a little, but not too much! They aren't trying to solve every problem out there, both libraries are highly focused on the DOM. They leave other bells and whistles to adjacent libraries, following a "do one thing and do it well" philosopy.
jQuery solves the DOM complexity problem by giving you handy ways of accessing particular nodes, and little methods for adding events to those nodes once you find them.
$("#price"); // finds the price element

It is pretty straight forward, it looks for an element with the id price.
And this code adds a click event to it:
$("#price").click(<some code to execute>) // adds a click event to the price element

React (more specifically jsx) does the same thing. JSX looks very much like html which makes it easier to get the hang of, but has a few key differences we'll learn more about later.
<a class="price" onClick={this.handleClick}> //onClick sets up our link to have a click event
  {price} // this will set the data in the "price" attribute
</a>

You might be thinking this looks like inline event handlers. Wait, I thought we weren't supposed to use those anymore? The nice thing about React is that it scoops these up and turns them into just what you want. They may look like inline event handlers, but they are safe to use.
What is even more fun is that you can have custom elements that render out to whatever html you want! You control the markup, you just let React generate it for you. So, this kind of thing is possible:
<price>{price}</price>

Building a component

React components need some boilerplate to work correctly.
class PriceButton extends React.Component { // define the component you are creating
  // business logic
  
  render() {
    return (
      // the html you want to output
    );
  }
}

ReactDOM.render(
  <PriceButton />, // renders your component
  document.getElementById('example') // where in the dom to render it
);

Don't worry too much about what this means, you'll end up typing it every time you make a new component and eventually you'll become familliar with all of the options.