Jenny Learns React: 1. What is React?
This blog has been completely untouched since I started it at the beginning of Fullstack Academy (OOPS). Now that I have completed the curriculum and have since become a teaching fellow, I will re-commission this blog to try to document my further learning. :)
With all the craze surrounding React/Flux, I figured I should take it for a spin. Coming from an Angular background, React was definitely not as easy to pick up as I had hoped, especially because React prefers JSX syntax, but once I got the hang of it, the benefit of React shines through.
I've seen a lot of articles regarding React v. Angular, and I hate to break it to you, but comparing the two is illogical. Angular is a full-on FRAMEWORK which includes a view layer, while React is ONLY a view layer. Unlike Angular, React does not include AJAX capabilities, have a data layer, nor does it have any event systems. Repeat after me:
I mentioned up there that React uses JSX syntax. As developers, we have been conditioned to not throw JS directly into the HTML. So, JSX syntax may initially be cringe-inducing, but when JSX is used with React, it makes your code much more comprehensive. Essentially, JSX syntax ties HTML and JS together in a nice bundle known as a "component" and allows you to easily see how your code will render in one file. Neato!
To ride off the component train of thought, React allows you to break up more complicated problems into bite-sized pieces of components. Think of components as Lego building blocks, which you can use to build different combinations components to create your app. The components can be built on top of other components and be re-used for other purposes later as well.
Lastly, React also uses this thing called a virtual DOM that handles data changes reflected in the DOM more efficiently. What happens is that the DOM will re-render only when the data changes and it changes only what has changed, and reduces unnecessary re-rendering. React team member, Sebastian Markbage, gives a more in depth explanation here.
Disclaimer: I am still very new to React, and this is only my interpretation at this point in time of what React is and what it does. I will probably revisit this post in the future to fix any misinformation.