FRONTEND DEVELOPMENT WITH REACT.JS

FRONTEND DEVELOPMENT WITH REACT.JS

• 1.
  International Research Journalof Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 09 Issue: 06 | June 2022 www.irjet.net p-ISSN: 2395-0072 © 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal | Page 2339 FRONTEND DEVELOPMENT WITH REACT.JS Anjali Rananavare1 Department of MCA, Vivekanand Education Society’s Institute of Technology, Mumbai, India. ---------------------------------------------------------------------***--------------------------------------------------------------------- Abstract - The most fundamental software or any app development is to select which is the right frontend framework or library to go with. The market has an extensive variety due to the extensive range of problems that developers face every day. For front-end development, react.js is playing a vital role and creating new opportunities for developers to build new applications. This paper addresses how react.js is helping in the building user interfaces and the advantages it is having in building the front-end. According to a survey conducted by Web Technology Surveys, React.js is used by 46.4% of all the world's websites. If we say that React.JS is ubiquitous, it will not be an overstatement. The new audiences have mixed interests when it comes to websites. After all, companies like Facebook, PayPal, Instagram utilize this JavaScript-based UI library for a major part of their application’s front-end development for web as well as mobile. In this paper, the key features include its advantages over other frameworks, its working and its architecture. Key Words: JavaScript, React.JS, Node.JS, Angular, Virtual DOM, Web development, Frontend development. 1. INTRODUCTION When React came into the picture, Angular was the sole and major challenger within the JS framework house. Whereas Angular was a whole and correct framework, it absolutely was terribly tough for developers as they had to do a lot of coding. Even seasoned JavaScript developers, found it tough to code and that they were trying to find some various alternatives to resolve their answer. Angular.JS was never the preferred way to build JS applications. It has a lot of functionalities and those weren't required by most developers. React.js came, and it revolutionized the manner internet applications are developed. However, React is not a MVC framework as Angular is. It's solely a library. That is, React.js doesn’t embody state managers, routers, and API managers within the core library. It's going to seem like a limitation except for React developers, however this is often solely the most effective in creating websites as code is extremely simple to grasp with all parts and alternative things. The aim of the paper is to demonstrate the suitableness of the React.js frameworks offered for the event of internet applications moreover as mobile. 2. APPLICATIONS OF REACT.JS React.JS has numerous applications as a tool to create interactive, rich, and robust UI’s. ● Creation of dynamic applications with ease- React JS requires less coding and offers more functionality which makes it easier to create dynamic web applications for developers. ● Open-sourced library- React.JS is JavaScript’s open- sourced library is one of the reasons as React JS is emerging as the fastest emerging JS library among the frontend developer’s community and organizations. ● Use of Reusable components- React.JS is all about components. Components are the main aspect of any React.JS application. Multiple components could be there in the application which can be re-used and development times could be reduced. ● Easy debugging tools- Chrome extension is issued by Facebook to debug the react applications which eventually results in faster debugging of react applications. React Developer Tool is a Chrome extension developed for open- source JavaScript libraries. ● Backed by a large development community- Facebook who designed and released React JS uses React JS in their application also Instagram, Reddit, Netflix are one of the leading companies that uses React JS in their web applications.
• 2.
  International Research Journalof Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 09 Issue: 06 | June 2022 www.irjet.net p-ISSN: 2395-0072 © 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal | Page 2340 3. ARCHITECTURE Above are the four main aspects of React.JS 3.1 React Virtual DOM The virtual DOM (Virtual document object model) is one among the best components of React JS. It is a very little like the DOM generated by the browser; however, the only distinction is that it's kept within the memory. At point once changes are needs to be done in page content, they are mirrored to the memory residing virtual DOM first; then that a diff() algorithm appearance at the 2 DOM i.e., the virtual DOM and also the browser DOM then changes done square measure mirrored to the program DOM itself, instead of refreshing the complete DOM. This offers a super boost to the appliance essentially once an oversized data changes are to be made. 3.2 One-Way data flow React JS is constructed in such a way that data flow i.e., downstream is allowed and supported. Unidirectional flow ensures that data flows in a single direction throughout the application which provides a lot of control between the states and models in an application. Unidirectional flow conjointly ensures that design of application is a smaller amount complicated and comprehensible. It doesn't create any cascading updates within the view part. 3.3 React Components Components are tiny UI (User Interface) elements that offer data to look at which might conjointly change over the period of time. These reusable components are bound along to create a whole UI for the application. Components let developers split UI in multiple parts and to style and build UI in only manner. They're like JavaScript functions; they perform identical tasks but in numerous environments and approaches. They take input referred to as props and return React elements (what one can see on the screen). 3.4 JSX Syntax It stands for JavaScript XML. It's a syntax extension in JavaScript. JSX is usually recommended to be used with React JS to style and build programs. JSX is quicker, safer and easier since, JSX ASCII text file is compiled to JavaScript. It shows a really optimized result. Scrutiny to the equivalent code written in JavaScript, the standard of application is much higher once developed with JSX. 4. REACT ADVANTAGES AND DISADVANTAGES Some explanations for selecting react as the frontend development as follows- • simple to find out as we are able to quickly build things. • It helps us build an expensive interface as a poorly trying interface wouldn’t look smart. • Quicker development and may be accustomed to earn cash quicker too. Productivity is a vital issue and React is certainly breathing in this case moreover. • It's sure by nice firms and everyone these firms uses React to create their websites. One in every of the well- known firms is Netflix itself. • It's got sturdy community support and also the variety of downloads exceeds Angular. • It's one in every of the trending topics and everybody is keen on the event too. Some disadvantages together with all blessings' area unit as follows- • Need to import libraries for state and model as React doesn’t implement MVC and is also not having a whole structure • React moves off from class-based modules and may be an obstacle for Object Oriented Programming and developers might not be relaxed thereupon. 5. HOW DOES REACT WORK? Everything in React is associated with an “element” or a “component”. Elements are created by victimization, one thing referred to as “JSX” or syntactical JavaScript. It's essentially like declaring HTML content as constants, variables, functions, etc. JSX isn’t completely necessary however but is usually most popular while coding a React app. Components are the building blocks of any React app.
• 3.
  International Research Journalof Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 09 Issue: 06 | June 2022 www.irjet.net p-ISSN: 2395-0072 © 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal | Page 2341 They will have many elements among them that are programmed to interact and behave during a certain manner. Every React part incorporates a lifecycle that you simply will track and alter throughout the course of its 3 phases: 1. Mounting 2. Updating 3. Unmounting The term “mounting” refers to the method of inserting elements into the Document Object Model (DOM). DOM is largely a typical way data is diagrammatic and accessed on a web page. You'll think about it as a tree of HTML/XML objects that you'll somewhat visualize in your developer tools for any website. Whenever a web page is loaded the browser creates this DOM with all the content associated with that page. Victimization JavaScript, you'll manipulate and modify these contents. So, once a React app is loaded, the primary step is mounting wherever the components are placed into the DOM. React is ready to try and do all this by making a virtual DOM that is then wont to update and adjust with the important DOM. When mounting a component, React calls the subsequent four inbuilt functions in this order: 1. constructor() The first step wherever initial state values are set. 2. getDerivedStateFromProps() The getDerivedStateFromProps method is called right before rendering the elements in the DOM. 3. render() This methodology outputs the Hypertext mark-up language to the DOM. 4. componentDidMount() The componentDidMount() method is called after the component is rendered. The render() methodology is important and can be known at least times; the others are elective and can be invoked only if they are defined. When a component is updated, the lifecycle moves on to future step. Once the state or props (shorthand for properties) of a component change, the component is alleged to be updated. To do the equivalent, React calls the subsequent 5 inherent ways during this order: 1. getDerivedStateFromProps() 2. shouldComponentUpdate() 3. render() 4. getSnapshotBeforeUpdate() 5. componentDidUpdate() Each of those ways helps verify and update the state changes within the component and re-render them. Within the next part of the life cycle, the component gets off from the DOM or unmounted as React likes to call it. Once a component is unmounted, only one inbuilt method in React is called: 1. componentWillUnmount() The developers will write the logic in these methods to change the behavior of the React app as and after they are called. 6. COMPARISON Making comparisons between Angular and React nowadays is a popular topic in the tech community. However, Angular.JS, React.JS, Vue.JS, Ember.JS, Backbone.JS and several As a matter of fact, React Native has become the selection of forty percent of the developers worldwide. It's evident from the graph below by Statista that React Native isn't simply existing however thriving within the market. Web technologies are the foremost well-liked web technologies. Amongst them Angular and React are widely adopted and advanced JavaScript technologies getting used to make single-page applications (SPAs). Below table shows a comparison between AngularJS framework and React.JS library.
• 4.
  International Research Journalof Engineering and Technology (IRJET) e-ISSN: 2395-0056 Volume: 09 Issue: 06 | June 2022 www.irjet.net p-ISSN: 2395-0072 © 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal | Page 2342 As shown in Table, there are some fundamental differences between AngularJS and React in terms of data binding, dependency handling, DOM manipulation and languages they use. But the biggest difference is that Angular JS is a framework whereas ReactJS is a library. Though, both of them are used for front-end development. Many businesses, news, travel, social networking companies in the USA, the UK, Asia, France, Germany, Canada and many other countries are using both React and Angular. Angular is very popular among the developers as it is a complete framework which comes with MVC (Model-View-Controller) while React is a library, not a framework. 7. CONCLUSION React.Js framework can be used for building beautiful User Interfaces by implementing some core JavaScript features. It is easy to use and implement as it provides us with a mark-up syntax that is closely related to HTML [8]. Virtual DOM is the most important feature which prevents reloading of a page and increases the overall efficiency of our application. As our application is built over JavaScript, it also provides us with a package manager called NPM, which provides an easier way of installing external dependencies. To alter the lifecycle of our class components, React provides us with lifecycle methods. React Hooks also provides us with the same functionalities but is built for our functional components. React is one of the most widely used frameworks that is being used by many developers for building applications or interfaces. Thus the demand for this framework and its functionalities will definitely grow in the near future. React is that library assisting companies to achieve their goals, fortifying its relevance in the market for a longer time to come. REFERENCES  “React JS: An Open-Source JavaScript Library for Front-end Development” by Naimul Islam Naim.  https://reactjs.org/tutorial/tutorial.html  https://en.wikipedia.org/wiki/React_(JavaScript _library)  ReactJS.org,’ ReactJS official'. [Online].  Krunal Shah, “Top 14 React Libraries you must try in 2020”  Wikipedia.org, 'React (JavaScript Library)'. [Online]. Available: https://en.wikipedia.org/wiki/React_(JavaScript _library). [Accessed: Feb- 2018]  COMPARATIVE ANALYSIS OF ANGULARJS AND REACTJS Anurag Kumar and Ravi Kumar Singh International Journal of Latest Trends in Engineering and Technology Vol.(7)Issue(4), pp.225-227 DOI: http://dx.doi.org/10.21172/1.74.030 e- ISSN:2278-621X  https://www.simform.com/why-use-react/  https://www.javatpoint.com/react- features  Prof. B. A. Khivsara, Umesh Khivsara, “Design and Implementation of Single Page Application Based on AngularJS,” 6th International Conference on Recent Trends in Engineering & Technology (ICRTET - 2018).