JavaScript & JSX Via ReactJS

My journey into the world of ReactJS (currently 4 days in) and what I have learned so far. This blog post is a “work in progress” and I plan to add more information as my knowledge base expands. The original purpose of this blog was to detail JSX basics and help me solidify key concepts, but instead it exposed me to beyond-basic things that I then proceeded to research. Here goes my ever-evolving journey:

• JSX defined
• Pros and cons of using ReactJS (in my opinion)
• render() and how it is related to the DOM
• DOM node tree

JSX Defined

JSX is a syntax that can incorporate Javascript (JS) to create React applications. It resembles a mixture of HTML and JS, creating elements to dynamically insert into the application HTML as new instances are rendered. This allows specific elements (nodes) to be targeted and updated. The React framework can used with pure JavaScript or JSX, but implementing JSX simplifies the appearance of the code by relying on framework methods (native elements) to complete necessary tasks.

The two snippets (A & B) below show the relationship between JavaScript and JSX methods. Most prominent commonality: render().

A. JSX & React

B. Javascript & React

The snippet below, C, is included as reference to string interpolation, showing its similarity to JSX.

C. Javascript HTML String Interpolation

Cons of Using ReactJS

• The second to last item on the “pros” list is also my biggest “con” at this point in my new journey into ReactJS. The large file structure is slightly overwhelming when compared to other languages I’ve worked with, but — this is where it becomes a “pro” — this will hopefully allow me to take a step back in the design phases and flush out all relationships, especially when it comes time to scale up larger applications.

Pros of Using ReactJS

• Single-direction inline programming allows functions and properties to be expanded to other components and allows for user updates to components.
• The dynamic browser experience greatly increases the rate at which I can troubleshoot during debugging.
• The component-based syntax places higher pressure on the developer to do more planning on the front-end of conceptualization. I previously had (and am still working through) scoping difficulties I came across in Javascript. The component-based approach has so far allowed me to visualize connections and plan relationships more efficiently.
• Processing times can be significantly reduced with fine-tuning how often changes are rendered and what volume of code gets re-rendered. This leads me into my next section…

What is render() actually doing?

When render is executed, it is triggering an action that creates the network of individual components by creating elements and constructing the Virtual DOM tree. This tree will update with every subsequent change to component props or state. The picture below displays the node network .

Starting from top, going down, React’s diffing algorithm will work its way from the DOM Node and continue recursion through all the children elements until it finds all instances of element type differences.

• If an element type diff is found (example: <p> vs <img>), the entire node and all associations thereafter are destroyed and re-rendered via the following methods: componentWillUnmount() , componentWillMount(), and componentDidMount().
• If element types are not different, attributes/properties for the element are then compared.
• If differences are found, the node will stay intact, but the individual instance of the component itself will be updated via the following methods: componentWillReceiveProps() and componentWillUpdate().

Once all element type differences are accounted for, the Virtual DOM then becomes the Real DOM. This is quite powerful for single-page applications because it can help the developer ensure that lag time and content loading time is minimized. Cool resource for seeing your DOM manipulations in action:

1. Chrome’s Developer Tools ( CMD + OPT + J).

2. Navigate to the Performance tab.

3. Press the Record button toward the upper left-hand corner of the window. Longer recording times may cause the browser to lag.

4. The data will show a break down of your actions, ie which nodes took longest to load, how many times certain nodes were re-rendered, etc.

This will become a powerful tool when refactoring slow applications and can even be used to help guide decisions on how to structure new applications based on existing ones, that have already been optimized.

Conclusion

Just like the technology industry as a whole, my journey into ReactJS will be ever-evolving. I hope to add troubleshooting tips and solutions to issues I come across here in this blog.