Intro to React.js
If you are reading this article, I can assume that you have heard about react.js and want to learn more about react and how it works. Before diving into react let’s get a clear concept about what react is and how it works.
React is a popular javascript library used to create front-end of the web application, which holds about 70% of the market share. it was developed by a team from facebook in order to solve problems with large-scale and data-driven web applications. Upon it’s release in 2013, React was viewed with scepticism as the conventions of React are quite unique. React handles components or views in a unique way. In an attempt to not intimidate new users the core react team published an article titled “Why React?”. You can give it a five-minute read to get a brief idea about React.
If you are done reading the article you will be amazed by what react has to offer. You will be amazed to know how a javascript library will solve problems with DOM and large data.
What is React?
The first thing to know about react is that it is a library. Unlike Angular, which is a framework with everything pre-installed, React is a library where only the barebone of the library is loaded. React only gives a structure to start your work. Rest of the tool choice is left to the developer's decisions. React has a third party library to solve every problem. There are so many different libraries continually being added to the mix that, is hard to keep track. Don’t worry about the third-party libraries right now. We will discuss the core parts that every react app needs as go along.
New Script Syntax
React has come of age in an important but chaotic time in the history of JavaScript. The ECMA used to release updates infrequently. It would take up to 10 years to release new specs. This meant for the developers that they would not have to learn the new syntaxes frequently.
As of 2015, ECMA started to release new features and additional syntaxes every year. This change replaced the numbered released system with a yearly release system.
Functional JavaScript
In addition to the changes emerging at a language level, there is a lot of momentum around functional JavaScript programming. JavaScript isn’t necessarily a functional language, but functional techniques can be used in JavaScript code. React emphasizes functional programming over object-oriented programming. This shift in thinking can lead to benefits in areas like testability and performance. But when a lot of React materials assume an understanding of the paradigm, it can be hard to learn so much at once.
Pros and cons of React
Benefits of React:
- Easy to learn, thanks to its simple design, use of JSX (an HTML-like syntax) for templating, and highly detailed documentation.
- Developers spend more time writing modern JavaScript, and less time worrying about the framework-specific code.
- Extremely fast, courtesy of React’s Virtual DOM implementation and various rendering optimizations.
- Great support for server-side rendering, making it a powerful framework for content-focused applications.
- First-class Progressive Web App (PWA) support, thanks to the `create-react-app` application generator.
- Data-binding is one-way, meaning less unwanted side effects.
- Redux, the most popular framework for managing application state in React, is easy to learn and master.
- React implements Functional Programming (FP) concepts, creating easy-to-test and highly reusable code.
- Applications can be made type-safe with either Microsoft’s TypeScript or Facebook’s Flow, with both featuring native support for JSX.
- Migrating between versions is generally very easy, with Facebook providing “code mods” to automate much of the process.
- Skills learned in React can be applied (often directly) to React-Native development.
Drawbacks of React:
- React is unopinionated and leaves developers to make choices about the best way to develop. This can be tackled by strong project leadership and good processes.
- The community is divided on the best way to write CSS in React, split between traditional stylesheets (CSS Modules) and CSS-in-JS (i.e. Emotion and Styled Components).
- React is moving away from class-based components, which may be a barrier for developers more comfortable with Object-Oriented Programming (OOP).
- Mixing templating with logic (JSX) can be confusing for some developers at first.
