Move over, AngularJS. There's a new sheriff in town. This sheriff's name is React! You've probably overheard conversations comparing the two, which can be related to comparing Microsoft Edge to Google Chrome. Microsoft Edge being Angular in this context. Sure, Internet Explorer, aka 'Microsoft Edge', has seniority over Chrome, but in the tech world, this means nothing when a new, more efficient, multi-capable, technology gets introduced. For anyone that's actually used AngularJS, this will feel familiar at times, but so much easier at the same time because React is an unopinionated framework.
Since I've peaked your interest enough, let's get to it! I used codesandbox.io to make a few of these snippets, and you can actually follow along there to play around with what you've learned here.
Starting here:
Clicking the "Add Dependency" button will give you an option to search for dependencies. All you need to play around in here should be react and react-dom. The react dependency will give us access to the react library. ReactDOM will allow us to have React's amazing rendering functionality.
Fun fact: These two actually were once together prior to v0.14. This may seem confusing, but ReactDOM is simply what's being used to glue our react code to the DOM. Don't think on it too much; ignore complexity!
Now that we have added react and react-dom to our dependencies, next is to import it! Thanks to ES6, we can do that by simply doing the following:
This short-hand syntax easily imports our newly-added dependencies to our project.
Now to the fun stuff!
Okay cool, now we have React and ReactDOM in our library. Lets put it to use! As you can see, we have this fun function in here called ReactDOM.render(). Don't get too freaked out here, most simply put, ReactDOM.render is a function, just like any other basic function, and it takes in two arguments.The first argument, as seen above, is what you would like to render. In my example, I've just put some h1 tags with some text between it. The second parameter is where you would like to render these things. In this case, our h1 tags will be rendered to the element on the DOM with the Id of "app". This will be added to the "virtual DOM" that React is well-known for, but for explanation purposes, this is what it would look like if the code was injected into your actual HTML code.
As you can see here, the code will be put in between the div tags provided, so for future projects, it's safe to assume that this is where your finished renderings will be placed. Remember that virtial DOM thing I mentioned earlier? This actually allows our web pages to load in much faster thanks to how React handles our code.
Check this out:
In this diagram, you can see that React's virtual DOM essentially "patches" your current code with the changes you've made from using the ReactDOM.render function. Later on you'll see just how powerful this is; you're able to split up your project into multiple pages and easily pass down information from parent nodes to child nodes of your application. This will be done using the react term, "props". This most effectively allows you to refer to another file's properties that you've passed down into the depending child file. Don't get tripped up here, it's much more simple than it sounds.
Feel free to play around with this example code we've created, this is actually the most basic use of ReactDOM and we haven't even utilized the amazing React library yet. Another article is coming soon with more fun-filled things that we can actually throw into that fancy ReactDOM.render function.
Top comments (0)