Review on React JS

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 1137 Review on React JS Bhupati Venkat Sai Indla1, Yogeshchandra Puranik2 1PG Student, 2Professor, 1,2MCA, P.E.S. Modern College of Engineering, Pune, Maharashtra, India ABSTRACT This is a review on react js. Its introduction, how to use it, why to use it. Its uses in the front-end development world and its effectivenessandadvantages as well. KEYWORDS: React, React js, web development, frontend web dev How to cite this paper: Bhupati Venkat Sai Indla | Yogeshchandra Puranik "Review on React JS" Published in International Journal of Trend in Scientific Research and Development(ijtsrd), ISSN: 2456-6470, Volume-5 | Issue-4, June 2021, pp.1137-1139, URL: www.ijtsrd.com/papers/ijtsrd42490.pdf Copyright © 2021 by author (s) and International Journal ofTrendinScientific Research and Development Journal. This is an Open Access article distributed under the terms of the Creative Commons Attribution License (CC BY 4.0) (http: //creativecommons.org/licenses/by/4.0) INTRODUCTION: React (also known as React.js or ReactJS) is an open-source front-end JavaScript library for buildinguserinterfacesor UI components. 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. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality. Declarative React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. Component-Based Build encapsulatedcomponentsthatmanagetheirownstate, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. Learn Once, Write Anywhere We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native. Web before Reactjs Let’s take a walk down to the technology space before 2015 when web development was all about scripting and rendering. The time when languages like HTML, CSS ruled the frontend, and PHP ruled the backend. Web development was so easy back then. All we needed to do was to put static HTML pages in some folders and render them using PHP. Although that’s not a unique and intuitive way to develop websites, you were still able to establish a two-way connection between clientandserver.All thecredit goes to Server-Side Rendering (SSR). We’ve been building web applications this way for decades, but what we didn’t see coming is the revolution of websites after Javascript libraries like Reactjs. The dawn of Single page apps (SPA), Javascript, and Reactjs Ever since the Javascript revolution took over, you can do a lot 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 frameworks let you write client-side javascript, Angular wastheonlyone that promoted this approach. Imagine being able to fetch some data via Javascript, add some attributes to your markup, and voila!: you have built a dynamic 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 1138 Enter Reactjs! The Isomorphic javascript library, introduced in 2015, enabled developers to build dynamic web applications with blazing speed. React was primarily used to render views in web or mobile applications. It allowed developers to create reusable components that are independentof eachother.Sowhen any critical feature of a web application broke, they were still better off with the remaining elements. Also, React brought this fantastic feature called Virtual DOM that enabled developers to implement SSR without needing to updatethe whole 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 quick navigational experience for the end-user. Now, navigation is not something you would want to lose when you implement SSR. Thankfully, you can still use Reactjs on the client-side and implement navigation. What thismeansisthattheinitial render uses SSR, and the subsequent navigationsbehavelike a 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 and engaging web interfaces and triumphs over other javascript frameworks (such as Angular, Ember). The reasonis:Virtual DOM facilitates updating components whenever a user does any interaction without affecting otherpartsoftheinterface. Why Do JavaScript Developers Use React JS? React is a JavaScript library that specializes in helping developers build user interfaces, or UIs. In termsof websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app. Before React JS, developers were stuck building UIs by hand with “vanilla JavaScript” (developers speak for the raw JavaScript language on itsown)orwithlessUI-focusedReact predecessors like jQuery. That meant longer development times and plenty of opportunities for errors and bugs. So, in 2011, Facebook engineer Jordan Walke created React JS specifically to improve UI development. In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers: JSX Virtual DOM JSX At the heart of any basic website are HTML documents. Web browsers read these documents and display them on your computer, tablet, or phone as web pages. During this process, browsers create something called a Document Object Model (DOM), a representational tree of howthe web page is arranged. Developers can then add dynamic content to their projects by modifying the DOM with languages like JavaScript. JSX (short for JavaScript eXtension) is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code.And—sinceReactJSbrowser support extends to all modern web browsers—JSX is compatible withany browserplatformyoumightbeworking with. This isn’t just a matter of convenience, though—using JSX to update a DOM leads to significant site performance improvements and development efficiency. Virtual DOM If you’re not using React JS (and JSX), your website will use HTML to update its DOM (the process that makes things “change” on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involveheavyuserinteraction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh). However, if a developer uses JSX to manipulate and update its DOM, React JS creates something called a Virtual DOM. The Virtual DOM (like the name implies) is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens (like a user clicking a button). Let’s say a user enters a comment in a blog post form and pushes the “Comment” button. Without using React JS, the entire DOM would have to update to reflect this change (using the time and processing power it takes to make this update). React, on the other hand, scans the Virtual DOM to see what changed after a user action (inthiscase,a comment being added) and selectively updatesthatsectionoftheDOM only. This kind of selective updating takes less computing power and less loading time, which might not sound like much when you’re talking about a single blog comment, but— when you start to think about all the dynamics and updates associated with even a slightly complex website—you’ll realize it adds up to a lot. Why use React? – React usage benefits Now that you found out the origination of this ground- breaking library, let’s find out the benefits of React and why should you use it for your web application projects: It’s Easier to Learn for Developers : One of the main concerns developers have is choosing a framework (or library) that is easier to learn and implement. React is easy to grasp for developers who are familiarwithJavascript. Soif you have a team of developers thatareverywell-versedwith Javascript, Reactjs should be your best bet. However, even if developers don’t know Javascript, React can be the right place to start. Unlike Angular, React holds a smooth learning curve. React enables developers to reuse components:InReact, your application comprises components. Ideally, you start with building small components like buttons, checkboxes, dropdowns, menus, etc. and create wrapper components around these smaller components. And as you go on writing the higher level wrapper components, you will have a single root component and several hierarchical components. Now, here’s a no-brainer: each component in React has its own logic. So if you want to re-use the button componentthrough your app, you are good to go. I am pretty much confident everybody wants reusability in their project. It provides a unique Abstraction Layer: Another lesser- known business-related benefit with React is that it allows for 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 1139 access the complex internals. Your developer only needs to be aware of some basics, and they'd be better off knowing the internal functionalities. Moreover, itdoesnotdictate any architectural patterns like MVC, MVP, and MVVM. Your developer is free to design an app’s architecture in any way he sees fit. It’s well established with a vibrant ecosystem of Developer tools: React consists of a rich and vibrant ecosystem. Developers can find dozens of ready-made and customizable charts, graphics, documentation tools, and other components that allow them to build a web app in less time without reinventing the wheel. There’s this awesome collection of Reactjs dev tools and tutorials that help developers to build awesome stuff. Single-page applications catering to multiple industries Reactjs can be used to build a Single page application catering to any industry. A single-page app is different from the traditional multi-page app that you see everywhere. When a user navigates on a SPA, he will keep interacting with the same page without interacting with anentirelynew page. Instead, the web pages (also known as views in this context) typically load inline within the same page itself. An app like Trello is the best example of single page navigation. Technically, such a type of navigation can be implemented by a technique called routing. The good news is: React offers a library called React-router, which provides routing capabilities in SPAs. Cross-platform Mobile Apps (React Native) Using Reactjs in your project comes with a bonus: React Native. Yes, you can build cross-platform apps for Android and iOS using React Native. For instance, suppose you have built a website for your bakery business. After some-time, you can also build a mobile app using React Native tosupportit.Ofcourse,you or your developer will not be able to re-use the same code you wrote for the web. Better still, you will be able to use the same architecture and methodology for building the mobile app. Sounds cool, doesn’t it? Where else should you use Reactjs? The list is endless, but here’s a taste of some example web apps where you can use Reactjs: Blogs (Gatsby) Business websites Portfolios Forums Rating websites Membership sites eLearning modules Galleries Personal websites for self-promotion Job boards Business directories Q&A websites like Quora Non-profit websites for collecting donations Wikis and knowledge bases Media-centric sites like YouTube Auction and coupon sites Conclusion Reactjs is an excellent addition to the projects that need component reusability, impressive user interactions, or crazy animations. That said, it’s a robust UI library to build projects that cater to small, medium, and even large-scale organizations. That’swhyso manycompaniesrelyheavilyon React for their long-termbusinessgoals.ConsideringReactjs pros and cons, it can be easily summed up in three words: non-risky, responsive and advanced. The main idea behind this particular library is: “to build large-scale applications with data that changes repeatedly over time” and it tackles the challenge well. It provides developers with the capability of working with a virtual browser (DOM) that is much faster and user-friendly, than the real one. Apart from that, it offers the easier creation of interactive UIs, JSX support, component-based structure and much more. The combination of the above-mentioned factors makes it a reasonable choice for both startups and enterprises. References: [1] https://en.wikipedia.org/wiki/React_(JavaScript_libr ary) [2] https://reactjs.org/ [3] https://www.simform.com/why-use-react/