In the avalanche of front-end JavaScript frameworks, by now you might have probably heard about Facebook’s React. Now the most prevalent question that’s lingering in the minds of most developers is - what should I use, Angular or React? It’s a question both novices and veterans will eventually have to tackle if they’re to keep up with the ever-evolving world of front-end web development. Typically, people take React as any other web development MVC framework, but, actually, it is not.
The difficulty starting out with React isn’t React itself. It’s important to remember React is “just the V in MVC” or “just the view layer”. Comparing React to Angular or React to Ember is unfair because React isn’t trying to be a full-fledged framework. It’s just trying to be the view layer, which it’s really good at.
Emergence of React JS
React is used by the largest companies in the world as well as some of the smaller startups. It was built by the engineers who work on Facebook.com, one of the world's largest websites, but it can scale to projects of any size.
Below are the stats for trends in UI Frameworks and Libraries for the month of August 2017.
(Source: https://www.latitude.work/trends/august-2017#ui-frameworks-and-libraries)
The Simple Definition of React
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.
What makes React so popular
Simple
Let your UI change automatically with significant changes in the underlying data. React.JS is simple and easy to work with.
Unidirectional Data Flow
If you think about the difference between a static website and a complex web application like Facebook, the only real difference is that Facebook has a bunch of state inside it. Be it your list of Friends, Notifications, Posts, etc.; Facebook has states to manage, which a local static website doesn’t.
In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, which provides a declarative interface via directives and data binding requires a linking function to manually update DOM nodes.
What is more exciting about React is that its main purpose is to manage the state inside your application. Your UI is just a function of your State. As the state updates, the UI going to update as well.
Reusable Components
React provides a component-based structure. You start with tiny components like button, checkbox, dropdown etc. and then you create wrapper components composed of those smaller components. After that, you write higher-level wrapper components. And it goes on like that until you have this one root component - which is your app.
Each component decides how it should be rendered. Each component has its own internal logic. This approach has some really amazing results.
You can reuse the components anywhere you need. As a result:
1. Your app has consistent look and feel
2. Code re-use makes it easier to maintain and grow your codebase, and
3. It is easier to develop your app.
Most of the React is just JavaScript
Lastly, a lot of times, React is just JavaScript. What I love about React is that more you get using JavaScript, the better you’re going to be at React. React API is actually pretty small because it relies heavily on the API that you already know - JavaScript.
The Bonus called React Native and React VR
Not only will React make you a better developer, but it will also open up to other development platforms like Native and VR.
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
Mostly, it is assumed that React Native apps are Hybrid apps which, irrespective of the platform, open a web view and renders an HTML. In fact the “Write once, run everywhere” mantra doesn’t fully apply to React Native as it expects developers to use the components which best follow the native behaviors of the platform.
React Native renders native views, which means, all the browser compatibility issues go away. As all views are Native, the performance will be much better, and you get the Native feel with super smooth animations, just how you want it to be.
React VR
In April 2017, at its F8 developer conference, Facebook announced the launch of React VR, a new JavaScript framework that lets developers build virtual reality experiences.
React VR lets you build VR apps using JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components.
Anyone with experience in building React apps should be able to build React VR apps pretty easily (and those developers will also be able to leverage many of the existing tools in the React ecosystem).
Conclusion
One benefit to the ongoing avalanche of front-end JavaScript frameworks is that occasionally, a new idea crops up that makes us think. Since React is just a View library, it shines when you have lots of dynamic content changing within the view. Should you have any query or you have something exciting to share about React, your ‘Reactions’ a ‘Reactors’ are most welcome. Just drop us an email at info@signitysolutions.com or drop in a comment below. Happy Reacting!
