If you are getting started in web development, it is tempting to learn the most used technologies early on. More and more junior developers are investing in React through self learning or coding boot camps.
The problem?
While React is a great choice for building many types of applications, it is important to understand that there are alternatives. More crucially, React exists to solve a set of problems that developers face. Understand those problems first, and learn React next.
A little bit of history
People doing web development from the mid-90s till the mid-2000s experienced the dominance of Internet Explorer, incompatibilities between browser engines, slow advancements in the web and a lack of good practices to organise code.
Creating anything using JavaScript meant worrying about problems such as:
- Having the DOM reflect the application's state.
- Organising the code and splitting it into different files.
- Adding and removing event listener.
Several solutions to these problems were introduced. jQuery made it easier to manipulate the DOM. RequireJs gave developers a way to break down applications into multiple files and load them in the browser. Tools such as Gulp, Grunt and later Webpack improved the build experience even further. Frameworks such as BackboneJs, Ember and later AngularJs offered a way to structure applications and organise the code.
Enter React
At first glance, React looks like a step backwards. React focuses on the View layer instead of embracing the full MVC architecture. Unlike its predecessors and some of its peers, React offers no out-of-the-box solutions for common needs such as routing, state management or styling. The distinction gives React the status of a library and not a framework.
What problems is React solving?
Having the UI reflect the app state
React’s goal is eliminating manual manipulation of the DOM. Instead of querying a certain node to update its attributes or children, you would describe the end result you want and React will take care of the rest.
To achieve that, React dumps the common paradigm of separating HTML and JavaScript. Your JavaScript code is no longer there to manipulate the UI created by HTML. Your JavaScript IS THE UI. (React still permits direct DOM manipulation using refs)
DOM updates are expensive
React makes updates to the DOM less expensive by comparing what the browser is rendering with what your UI is describing. This should improve the user experience in the browser.
Event management is messy
React simplifies event management by adding a single event listener to the root of the document. This should reduce memory leaks introduced by complex event listeners in an application.
Code is unorganised
React offers a way to organise code by breaking it down into components. This encourages the application to be broken down into simple units, respecting the single responsibility principle.
The best of both worlds
Understanding how the DOM works, its limitations and bottlenecks is an essential skill to create client-side web applications. Learning libraries and frameworks early on masks those complexities. It deprives you of understanding what is going on in the browser.
Those libraries and frameworks are just syntactic sugar around what the browser can natively do. It all boils down to what the JavaScript engine is doing and how the DOM is updated. This knowledge is essential to catch bugs and avoid performance issues.
Learn how to create an application using nothing more than HTML, JavaScript and CSS. Feel the pain of managing state, events and DOM updates manually. Understand the common pitfalls, the performance bottlenecks and memory leaks. Transition to an MVC framework. Understand that your front-end code can be organised and architected. Pick an old framework and give it a test drive. Backbone.JS is a great introduction to application frameworks. Finally, learn React.
Conclusion
Don’t limit yourself to a certain library or framework. Eventually, the next big thing will come and sweep them off. Focus instead on what changes slowly. React will disappear, but the browser will not.