Bursting the jargon bubble — React
When I started with React, I was bombarded with a dozen technical slangs which sounded gibberish to me. But with the grace of almighty, those jargons soon became familiar. Here are those words broken down to please the ears of anyone who hears them for the first time.
If you are looking for an article which explains concepts and syntax of React, you are at the wrong place. This article by Samer Buna explains them perfectly https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2
Babel: Babel is a JavaScript transpiler. A transpiler is basically a compiler which converts the source code from one language to the source code of another. In our case, babel converts code written in es6 into es5 so that JavaScript is treated the same way across all browsers whether old or new.
Look, how this tiny arrow function gets converted into our old friendly function syntax.
Check out https://babeljs.io/ for more info.
Webpack: Webpack is a module bundler. If you ever came across gulp the term module bundler will sound familiar to you. Webpack takes in all your JavaScript files and combines them to return a single JS file. On similar grounds, it can combine CSS files also. But I believe, calling webpack just a module bundler isn’t justified. It can compile your SCSS, give you a development environment, manages external and internal dependencies, can make your production build ready and what not.
Explore more about webpack - https://webpack.js.org
Virtual DOM: Virtual DOM is like a blueprint of the actual DOM. Whenever something is updated on our webpage the changes are reflected in the virtual DOM which compares the present copy of blueprint to the previous one and updates only the part which was changed. This might sound a bit complex all of a sudden, but it improves the performance of our web applications significantly.
This list outs possibly everything you need to know about virtual DOM, considering you are not building one yourself -
https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom
Component Life Cycle: Sounded to me like some trivial game of life when I heard it for the very first time. React provides life cycle methods which execute at different point of times with respect to the component’s state. The methods which give us control to handle our UI every time something is rendered to the screen, something is re-rendered, updated or unmounted. Also, we can decide if we want to render the component again or not.
This article by Scott Domes explains every bit of life cycle methods in React - https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
Flux: React is a JavaScript library for handling the view layer of the applications. But flux is with which the ‘M’ i.e model and ‘C’ i.e controller comes into the picture. It enables us to manage data and state across the whole application. It enables us to store data globally, update it and use it across the application. React with Flux behaves exactly like any other MVC framework.
Facebook has a detailed documentation of flux and its architecture: https://facebook.github.io/flux/docs/overview.html
Subscribe and get awesome content delivered to your inbox. I won’t spam!
Feel free to reach out to me.
twitter, facebook,linkedIn,Instagram
http://www.pratiksingh.xyz/
