The document is a review of React.js, an open-source front-end JavaScript library maintained by Facebook, focusing on building user interfaces for web and mobile applications. It highlights React's benefits like component reusability, virtual DOM for efficient rendering, and ease of learning for developers, making it a strong choice for modern web development. Additionally, the document discusses its role in creating single-page applications and cross-platform mobile apps using React Native.

Similar to Review on React JS

More from ijtsrd

Recently uploaded

Review on React JS

• 1.
  International Journal ofTrend in Scientific Research and Development (IJTSRD)Volume 5 Issue 4, May-June 2021 Available Online: www.ijtsrd.com e-ISSN: 2456 – 6470@ IJTSRD | Unique Paper ID – IJTSRD42490 | Volume – 5 | Issue – 4 | May-June 2021 Page 1137Review on React JSBhupati Venkat Sai Indla1, Yogeshchandra Puranik21PG Student, 2Professor,1,2MCA, P.E.S. Modern College of Engineering, Pune, Maharashtra, IndiaABSTRACTThis is a review on react js. Its introduction, how to use it, why to use it. Itsuses in the front-end development world and its effectivenessandadvantagesas well.KEYWORDS: React, React js, web development, frontend web devHow to cite this paper: Bhupati VenkatSai Indla | Yogeshchandra Puranik"Review on React JS"Published inInternational Journalof Trend in ScientificResearch andDevelopment(ijtsrd),ISSN: 2456-6470,Volume-5 | Issue-4,June 2021, pp.1137-1139, URL:www.ijtsrd.com/papers/ijtsrd42490.pdfCopyright © 2021 by author (s) andInternational Journal ofTrendinScientificResearch and Development Journal. Thisis an Open Access article distributedunder the terms ofthe CreativeCommons AttributionLicense (CC BY 4.0)(http: //creativecommons.org/licenses/by/4.0)INTRODUCTION:React (also known as React.js or ReactJS) is an open-sourcefront-end JavaScript library for buildinguserinterfacesor UIcomponents. It is maintained by Facebook and a communityof individual developers and companies. React can be usedas a base in the development of single-page or mobileapplications. However, React is only concerned with statemanagement and rendering that state to the DOM, socreating React applications usually requires the use ofadditional libraries for routing, as well as certain client-sidefunctionality.DeclarativeReact makes it painless to create interactive UIs. Designsimple views for each state in your application, and Reactwill efficiently update and render just the right componentswhen your data changes.Declarative views make your code more predictable andeasier to debug.Component-BasedBuild encapsulatedcomponentsthatmanagetheirownstate,then compose them to make complex UIs.Since component logic is written in JavaScript instead oftemplates, you can easily pass rich data through your appand keep state out of the DOM.Learn Once, Write AnywhereWe don’t make assumptions about the rest of yourtechnology stack, so you can develop new features in Reactwithout rewriting existing code.React can also render on the server using Node and powermobile apps using React Native.Web before ReactjsLet’s take a walk down to the technology space before 2015when web development was all about scripting andrendering. The time when languages like HTML, CSS ruledthe frontend, and PHP ruled the backend.Web development was so easy back then. All we needed todo was to put static HTML pages in some folders and renderthem using PHP. Although that’s not a unique and intuitiveway to develop websites, you were still able to establish atwo-way connection between clientandserver.All thecreditgoes to Server-Side Rendering (SSR). We’ve been buildingweb applications this way for decades, but what we didn’tsee coming is the revolution of websites after Javascriptlibraries like Reactjs.The dawn of Single page apps (SPA), Javascript, andReactjsEver since the Javascript revolution took over, you can do alot more with Javascript than you could ten years ago.So what brings the change?The answer is: writing web apps with client-side Javascript.Yes, we are referring to the development of SinglePageApps(SPA) using Javascript. While many Javascript frameworkslet you write client-side javascript, Angular wastheonlyonethat promoted this approach.Imagine being able to fetch some data via Javascript, addsome attributes to your markup, and voila!: you have built adynamic website without messing up with PHP and servers.But, no matter how popularized this approach seemedto be,DOM manipulations (a way to render several components)remained not so fast.IJTSRD42490
• 2.
  International Journal ofTrend in Scientific Research and Development (IJTSRD) @ www.ijtsrd.com eISSN: 2456-6470@ IJTSRD | Unique Paper ID – IJTSRD42490 | Volume – 5 | Issue – 4 | May-June 2021 Page 1138Enter Reactjs!The Isomorphic javascript library, introduced in 2015,enabled developers to build dynamic web applications withblazing speed.React was primarily used to render views in web or mobileapplications. It allowed developers to create reusablecomponents that are independentof eachother.Sowhen anycritical feature of a web application broke, they were stillbetter off with the remaining elements. Also, React broughtthis fantastic feature called Virtual DOM that enableddevelopers to implement SSR without needing to updatethewhole view each time during an update.What’s so revolutionary about this, you ask?For instance, while building a dynamic front-end or a SPA,you also want client-side routing to ensure a quicknavigational experience for the end-user. Now, navigation isnot something you would want to lose when you implementSSR. Thankfully, you can still use Reactjs on the client-sideand implement navigation. What thismeansisthattheinitialrender uses SSR, and the subsequent navigationsbehavelikea SPA. Also, with React, you are not moving away with SSR;you are just utilizing it whenever needed.To sum this up: Reactjs shines in building dynamic andengaging web interfaces and triumphs over other javascriptframeworks (such as Angular, Ember). The reasonis:VirtualDOM facilitates updating components whenever a user doesany interaction without affecting otherpartsoftheinterface.Why Do JavaScript Developers Use React JS?React is a JavaScript library that specializes in helpingdevelopers build user interfaces, or UIs. In termsof websitesand web applications, UIs are the collection of on-screenmenus, search bars, buttons, and anything else someoneinteracts with to USE a website or app.Before React JS, developers were stuck building UIs by handwith “vanilla JavaScript” (developers speak for the rawJavaScript language on itsown)orwithlessUI-focusedReactpredecessors like jQuery. That meant longer developmenttimes and plenty of opportunities for errors and bugs. So, in2011, Facebook engineer Jordan Walke created React JSspecifically to improve UI development.In addition to providing reusable React library code (savingdevelopment time and cutting down on the chance forcoding errors), React comes with two key features that addto its appeal for JavaScript developers:JSXVirtual DOMJSXAt the heart of any basic website are HTML documents. Webbrowsers read these documents and display them on yourcomputer, tablet, or phone as web pages. During thisprocess, browsers create something called a DocumentObject Model (DOM), a representational tree of howthe webpage is arranged. Developers can then add dynamic contentto their projects by modifying the DOM with languages likeJavaScript.JSX (short for JavaScript eXtension) is a React extension thatmakes it easy for web developers to modify their DOM byusing simple, HTML-style code.And—sinceReactJSbrowsersupport extends to all modern web browsers—JSX iscompatible withany browserplatformyoumightbeworkingwith.This isn’t just a matter of convenience, though—using JSX toupdate a DOM leads to significant site performanceimprovements and development efficiency.Virtual DOMIf you’re not using React JS (and JSX), your website will useHTML to update its DOM (the process that makes things“change” on screen without a user having to manuallyrefresh a page). This works fine for simple, static websites,but for dynamic websites that involveheavyuserinteractionit can become a problem (since the entire DOM needs toreload every time the user clicks a feature calling for a pagerefresh).However, if a developer uses JSX to manipulate and updateits DOM, React JS creates something called a Virtual DOM.The Virtual DOM (like the name implies) is a copy of thesite’s DOM, and React JS uses this copy to see what parts ofthe actual DOM need to change when an event happens (likea user clicking a button).Let’s say a user enters a comment in a blog post form andpushes the “Comment” button. Without using React JS, theentire DOM would have to update to reflect this change(using the time and processing power it takes to make thisupdate). React, on the other hand, scans the Virtual DOM tosee what changed after a user action (inthiscase,a commentbeing added) and selectively updatesthatsectionoftheDOMonly.This kind of selective updating takes less computing powerand less loading time, which might not sound like muchwhen you’re talking about a single blog comment, but—when you start to think about all the dynamics and updatesassociated with even a slightly complex website—you’llrealize it adds up to a lot.Why use React? – React usage benefitsNow that you found out the origination of this ground-breaking library, let’s find out the benefits of React and whyshould you use it for your web application projects:It’s Easier to Learn for Developers : One of the mainconcerns developers have is choosing a framework (orlibrary) that is easier to learn and implement. React is easyto grasp for developers who are familiarwithJavascript. Soifyou have a team of developers thatareverywell-versedwithJavascript, Reactjs should be your best bet. However, even ifdevelopers don’t know Javascript, React can be the rightplace to start. Unlike Angular, React holds a smooth learningcurve.React enables developers to reuse components:InReact,your application comprises components. Ideally, you startwith building small components like buttons, checkboxes,dropdowns, menus, etc. and create wrapper componentsaround these smaller components. And as you go on writingthe higher level wrapper components, you will have a singleroot component and several hierarchical components. Now,here’s a no-brainer: each component in React has its ownlogic. So if you want to re-use the button componentthroughyour app, you are good to go. I am pretty much confidenteverybody wants reusability in their project.It provides a unique Abstraction Layer: Another lesser-known business-related benefit with React is that it allowsfor a good abstraction layer, which means an end-user can’t
• 3.
  International Journal ofTrend in Scientific Research and Development (IJTSRD) @ www.ijtsrd.com eISSN: 2456-6470@ IJTSRD | Unique Paper ID – IJTSRD42490 | Volume – 5 | Issue – 4 | May-June 2021 Page 1139access the complex internals. Your developer only needs tobe aware of some basics, and they'd be better off knowingthe internal functionalities. Moreover, itdoesnotdictate anyarchitectural patterns like MVC, MVP, and MVVM. Yourdeveloper is free to design an app’s architecture in any wayhe sees fit.It’s well established with a vibrant ecosystem ofDeveloper tools: React consists of a rich and vibrantecosystem. Developers can find dozens of ready-made andcustomizable charts, graphics, documentation tools, andother components that allow them to build a web app in lesstime without reinventing the wheel. There’s this awesomecollection of Reactjs dev tools and tutorials that helpdevelopers to build awesome stuff.Single-page applications catering to multiple industriesReactjs can be used to build a Single page applicationcatering to any industry. A single-page app is different fromthe traditional multi-page app that you see everywhere.When a user navigates on a SPA, he will keep interactingwith the same page without interacting with anentirelynewpage. Instead, the web pages (also known as views in thiscontext) typically load inline within the same page itself.An app like Trello is the best example of single pagenavigation. Technically, such a type of navigation can beimplemented by a technique called routing. The good newsis: React offers a library called React-router, which providesrouting capabilities in SPAs.Cross-platform Mobile Apps (React Native)Using Reactjs in your project comes with a bonus: ReactNative. Yes, you can build cross-platform apps for Androidand iOS using React Native.For instance, suppose you have built a website for yourbakery business. After some-time, you can also build amobile app using React Native tosupportit.Ofcourse,you oryour developer will not be able to re-use the same code youwrote for the web. Better still, you will be able to use thesame architecture and methodology for building the mobileapp. Sounds cool, doesn’t it?Where else should you use Reactjs?The list is endless, but here’s a taste of some example webapps where you can use Reactjs:Blogs (Gatsby)Business websitesPortfoliosForumsRating websitesMembership siteseLearning modulesGalleriesPersonal websites for self-promotionJob boardsBusiness directoriesQ&A websites like QuoraNon-profit websites for collecting donationsWikis and knowledge basesMedia-centric sites like YouTubeAuction and coupon sitesConclusionReactjs is an excellent addition to the projects that needcomponent reusability, impressive user interactions, orcrazy animations. That said, it’s a robust UI library to buildprojects that cater to small, medium, and even large-scaleorganizations. That’swhyso manycompaniesrelyheavilyonReact for their long-termbusinessgoals.ConsideringReactjspros and cons, it can be easily summed up in three words:non-risky, responsive and advanced. The main idea behindthis particular library is: “to build large-scale applicationswith data that changes repeatedly over time” and it tacklesthe challenge well. It provides developers with thecapability of working with a virtual browser (DOM) that ismuch faster and user-friendly, than the real one. Apart fromthat, it offers the easier creation of interactive UIs, JSXsupport, component-based structure and much more. Thecombination of the above-mentioned factors makes it areasonable choice for both startups and enterprises.References:[1] https://en.wikipedia.org/wiki/React_(JavaScript_library)[2] https://reactjs.org/[3] https://www.simform.com/why-use-react/