React.js Overview
React.js Overview
Interested in getting started with React.js? Read on to get a high-level overview of the framework and see if it's the one for you.
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
React is a JS framework originally developed by engineers at Facebook. There are many different opinions on the usefulness and advantages of this product. Let’s take a look at the pros and cons.
React Features
Comparing React.js with Angular or other MVC frameworks makes no sense since React is just a representation. React is a template-based language combined with several functions that support output to HTML, i.e. the result of React’s operation is HTML code.
React.js implements the concept of reactive programming: modification of the result of its work depends on the state of components. Thus, a = b + c, and A will always depend on the values of B an C.
React constantly works with the DOM, re-rendering it when conditions change (the part of the DOM that is changed by React.js is called a component). Prior to React, such a practice would have seriously affected the application’s performance, but the developers of React.js approached this problem quite radically: they completely rewrote the DOM in JavaScript.
An important feature of React.js is the use of JSX. This is a JS add-on supporting the use of pro-XML syntax in JavaScript code. JSX is a blend of JavaScript and HTML that is quite unusual for most developers. The standard practice is to separate the JS part and the markup, which makes it difficult to track HTML -> JS -> HTML changes. JSX helps you see all processes in a single place without getting distracted by the complexities of well-written and valid code. JSX compiles into pure JS.
Cons
The kind of difficulties React.js novices may face include:
- Complex documentation
- Not all standard browsers support React
- Few gadgets available
On the developer’s website, the tutorial is scattered across multiple tabs and the information is far from being structured. However, if there is a whole team working with React.js, this problem can be solved pretty quickly. We recommend studying the documentation at devdocs.io, where this information is presented in a more structured way.
To solve this problem, it is recommended that you use additional plug-ins – for example, the S5-shim library for IE8 support. There exist other extensions for React.js, however, considering the “weight” of the framework, their use should be minimized.
React.js is a relatively young framework, so all, even standard, widgets will have to be written nearly from scratch. Need a custom drop-down or lightbox? You’ll have to write a fair deal of code even for such simple tasks.
Pros
UI development is based on separate components – and that’s the future of development.
React works great for teams, it’s a pleasure to write in, and easy to test.
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Published at DZone with permission of Alex Azarov . See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}