Before getting into the details, let us see some basics to develop a good understanding.
Ø WHAT IS REACT JS?
REACT JS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It is maintained by FACEBOOK and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
React is created by a FACEBOOK ENGINEER, JORDAN WALKE who released an early prototype of React called “Fax JS”. He was influenced by XHP, an HTML component library for PHP. It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.
Ø Why REACT?
As we have gone through the basic introduction to REACT. Now, let us get into the specifications and characteristics of it.
· PERFORMANCE:
Using React will lead to a fast user interface without doing much work to specifically optimize for performance.
· Simplicity: React JS comes with simple plain JavaScript code.
· All the power of HTML, CSS, and JavaScript together inside the component.
· It’s easy to learn: Anyone who has some background with HTML CSS and JavaScript can Learn. React JS is dedicated to Developers and Designers and Microsoft engineers.
· Increasing development speed: React JS allows us to create reusable UI components that can be used in many web pages.
· Testability: React JS applications are super easy to test.
Ø Why REACT is so popular?
At the time when React was announced, Ember JS and Angular 1.x were the predominant choices as a framework. Both these imposed too many conventions on the code that porting an existing app was not convenient at all. React chose to be very easy to integrate into an existing project because that’s how they had to do it at Facebook to introduce it to the existing codebase. Also, those 2 frameworks brought too much to the table, while React only chose to implement the View layer instead of the full MVC stack.
Ø Big Companies using REACT JS:
So, REACT JS is not only used by FACEBOOK but it is used by several big companies as well. Some of them are given below.
·
NETFLIX–
the biggest paid video-streaming service.
·
YAHOO!
– The
mail client in REACT.
·
INSTAGRAM
– a social networking app
made for sharing photos and videos.
·
EBAY-
a true marketplace where sellers can list items
at a fixed price and even open their store.
·
Microsoft
has
used React JS in many big projects
like:
Skype web version, Microsoft office365, Skype mobile application, and others.
Ø Components:
React pushes the idea of reusable components. They are widgets or other parts of a layout (a form, a button, or anything that can be marked up using HTML) that you can reuse multiple times in your web application. In React every component features a render() method which is responsible for displaying the HTML code. Usually React components are written using the JSX syntax, described in the following section, but you can use pure JavaScript as well.
Ø The JSX syntax:
JSX is a JavaScript syntax extension that looks similar to XML and that you mix with normal JavaScript code. Its use is optional but, as I said, most developers using React have employed it. It comes in handy because it’s a concise syntax for defining tree structures with attributes. Being based on XML, it has the benefit of balanced open and closing tags. This can help make large trees easier to read than function calls or object literals.
Ø Props and State:
React relies on a unidirectional data flow. This means the data flow occurs from parent to child components via attributes. Inside the component, you can access the values of the passed properties (or props using the React parlance), via the props object. When the values change, React makes sure to re-render your component so that your UI is up-to-date. In React, props are immutable which means that once passed, unless the parent is updated, they won’t change.
In addition to props, every component can have its own, private data. This data is referred to as a state. A component can store a value in its state and pass it to its child components via props. This ensures that whenever a component’s state changes, the props also change. As a result, the child components that depend on these props re-render themselves automatically.
Ø Pros and Cons:
Some of the Pros of REACT JS are given in the following.
· Virtual DOM in React makes the user experience better and the developer’s work faster.
· Permission to reuse React components significantly saves time.
· One-direction data flow in React JS provides a stable code.
· An open-source Facebook library: constantly developing and open to the community.
· REDUX: convenient state container.
· REACT HOOKS: improved state management.
· Wide React and REDUX toolset.
Cons of REACT JS are given below.
· The pace of development.
· ‘HTML in my JavaScript!’ – JSX as a barrier.
· Poor documentation.
· Additional SEO hassle.
The purpose of this blog was to get know-how about the basic introduction of REACT. To know its importance and to
develop an interest in its learning, we have got some basic information.
