Fabrit Global, profile picture
Uploaded byFabrit Global
PDF, PPTX228 views

Getting Started with React, When You’re an Angular Developer

The document outlines the advantages of learning React.js over Angular and Vue, emphasizing its popularity, ease of learning, and speed. It covers essential topics like the virtual DOM, component-based architecture, and practical tips for installation, building applications, and using features like JSX, event handling, and state management. The document also discusses Redux and Flux architectures for state management within React applications.

Embed presentation

Download as PDF, PPTX
MOTIVATION In case you are asking yourself why should you learn React.JS, here are a couple of reasons to give it a shot: • It is the first in the top 3 front-end frameworks & libraries • It is easier to learn than Angular • It is really fast
POPULARITY You might have noticed in the past year, Google Trends rated the worldwide interest on React to be higher than Vue and Angular. Also, there is a higher demand for React developers based on LinkedIn Jobs statistics. Angular React Vue
OVERVIEW Introduction Create an Application Components Styling and Requests Useful Tips In this presentation, we will touch the following topics:
1. Introduction In this section, we will cover the following aspects: • What Is React • Virtual DOM • JSX • Pros and Cons for Both React and Angular
What is React and how it compares to Angular? A JavaScript library for building user interfaces. Angular on the other hand is a framework. In general, the differentiating feature between a library and a framework is a matter of control — frameworks dictate how your project will be structured, whereas libraries are building blocks that can be used anywhere. If we use the metaphor of architecture, libraries are bricks, and frameworks are, fittingly, the frame. React has components only. We do not encounter directives, pipes, modules and other things you would expect to see with Angular. It is a good option if you work with fast updating data. Most JavaScript frameworks update the DOM more than they have to and the solution is the use of Virtual DOM.
Virtual DOM Every DOM object has a corresponding virtual DOM object. It stores in memory a snapshot of the object before updating. DOM updates only the needed changes. Imagine it as editing the blueprint, as opposed to moving rooms in the actual house The steps of updating an object are: 1. The entire virtual DOM gets updated. 2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed. 3. The changed objects, and the changed objects only, get updated on the ”real” DOM. 4. Changes on the real DOM cause the screen to change.
JSX They contain the information that will be displayed on the screen, the same as the declaration under .html files in Angular. You can declare variables equal to JSX, but you have to put them in brackets. They must be closed and if you want to display multiple elements you need to fit them into a bigger element for them to be seem as only one element. For example, if you want to show two paragraphs, you need to put them inside a div element. An XML/HTML-like syntax <p>Hello, {props.name}</p> <FormComponent name=“World”/>
Pros React • Virtual DOM improves both the user experience and the developer’s work – Virtual DOM helps updating any user’s changes without the other parts’ interference by applying isolated components. It greatly helps to smooth the experience of all participants in real-time mode. • Saving time while re-using React components – React deals with isolated components, that’s why you can reuse them anytime you need. System upgrades will not impact or change your system. • Less error prone - provided by the one-directional data flow. • An open-source library with a variety of tools – All updates are released to the community. React has had the open-source library and engineers can introduce the additional tools. Angular • Component-based architecture of Angular allows creating the UI with single parts (components) and reuse these components in the app. The elements also simplify user testing and maintenance. • TypeScript is the core language for Angular and it does compile to JavaScript. • High Performance. • Angular Material streamlines Material Design interface engineering – Angular team is constantly refreshing its framework with material design components. • Large Ecosystem – well-known Angular Resources incorporates the UI environments, IDEs, analytics tools, facilities for ASP.NET, etc.
Cons React • Lack of documentation due to high pace development – The popularity of this web front-end framework is higher than other frameworks. It has so many updates and innovations, that sometimes it is hard to find all the detailed information. • The JSX elements are found in the JS file where you can find the logic of the application too, which can make things confusing at first for some developers. Angular • Transferring legacy systems from AngularJS to Angular – the difference between AngularJS and Angular is huge, thus it takes a lot of time and efforts to migrate legacy systems. • Learning difficulty – junior developers have to cover the bundle of things while learning Angular such as: components, modules, dependency injection, and many other things. • The CLI documentation is poorly described and it does take a while for the developer to find out more about the CLI’s documentation on GitHub or other forums.
2. Create an Application In this section, we will cover the following aspects: • Prerequisites • How to Install • How to Create & Build • How to Display Hello, World!
Prerequisites Basic knowledge of HTML, CSS, and JavaScript. Basic understanding of ES6 features. To get started you should at least know the following features: 1. Let 2. Const 3. Arrow functions 4. Imports and Exports 5. Classes Basic understanding of how to use npm.
How to Install 1. Install Node.js 2. Install npm Both from https://nodejs.org/en/ 3. Install Visual Studio by following the steps in this article https://docs.microsoft.com/en-us/visualstudio/install/install-visual- studio?view=vs-2019 4. Open Visual Studio terminal 5. Run: “npm install -g create-react-app”
How To Create & Build Creating a React application is as simple as creating an Angular app by requiring only one command. Building the newly created application is the same as in Angular. 1. Run: “create-react-app my-app” 2. Run: “cd my-app” 3. Run: “npm start”
How to Display “Hello, World!” If you run an application, you will see a page filled with content, but we will want to get rid of all that. The information you see is from the App.js file, so go to App.js and replace the content in “function App(){…}” with a simple
3. Components In this section, we will cover the following aspects: • Rules • index.js • Functional Components • Passing Parameters • Class-Based Components • State • Lifecycle Methods
Rules • Always import React from ‘react’ if you use JSX. • Import ReactDOM from ‘react-dom’ only in index.js • Use only one JSX element ReactDOM.render ( What do I want to show, Where do I want to show it ) What do I want to show: • It can be a JSX element or a component Where do I want to show it: • Usually it is
index.js “ReactDOM” shows what the page will render on the actual DOM. <App /> is the functional component that will be shown, it needs a closing tag. Element with id ‘root’ is located in the public folder under index.html Index.html is the only file with .html extension, the other things you will display are JSX elements and you put then in the return statement of a component, or simply put a JSX directly on the render of “ReactDOM”. index.html and index.js are similar to app.component.html and app.component.js in Angular.
Functional Components App.js has what it will be rendered on the page along the logic code of the component. The inside of the return is the JSX needed by It needs to have export default App; Functional components are stateless, you will not have a constructor, or state in it. Stateless components print out what is given to them via props, or they always render the same thing. Aim to have a parent component keep all the information, and pass it down to its children stateless components. You do not need to use “this”. New features for functional components has been promised to be added in the future by Facebook members.
Passing Parameters The parameter has to be assigned on the selector of the component which is passing it. The component that receives the argument will always refer to it as “props”. You can access it by writing “props.{parameterName}”.
Class-Based Components Class-based components need to extend “React.Component”. They must contain a render method and inside it there will me a return statement. The output is the same as in the previous slide. You must refer to props with “this.props”. They can have a constructor, but they must contain a super() because we are inheriting from a class. They are stateful components, which means they are keeping track of changing data. You’ll need state ”somewhere” when information dynamically changes, like a user’s current favorite songs or top scores. Class-based components are the patent component who keep all the information. You can extend Component if you import {Component} from ‘react’. OUTPUT:
State The components can be stateless, which are functional components, or stateful, class-based components. The state is declared in the constructor. State is the private data of a component. Inside state you can declare multiple objects or primitives, arrays of objects or anything your component needs. You should treat it’s value as immutable and we need the “setState()” method to modify it. You can modify the value of the state without using “setState()”, but this will be overwritten by the call of “setState()” method, so it is not a good practice. Inside “setState()” method we will use “this” and because of that we need to bind it in the constructor or by using an arrow function inside the method. The component is re-rendered when state changes.
Lifecycle Methods Source: https://medium.com/@kartikag01/react-component-lifecycle-old-vs-new-32757aee5850
Lifecycle Methods We already talked about constructor and render, so we will go to the following methods: 1. componentDidMount which is called after the component is rendered; it is similar to ngAfterViewInit 2. getDerivedStateFromProps is called before rendering the elements; it is similar to ngOnInit 3. shouldComponentUpdate is where you specify the conditions weather the page should re-render or not by returning a boolean 4. getSnapshotBeforeUpdate is where you have access to the previous state. 5. componentDidUpdate is similar to ngAfterViewInit but only after an update occurred before 6. componentWillUnmount gets called when the component is removed from the DOM; similar to ngDestroy
4. Styling and Requests In this section, we will cover the following aspects: • Styling • Requests
Styling Get used to className and forget about class. For inline style you have to be careful: the hyphen is not recognized by JavaScript so this will imply some small changes, we will have to convert to camelCase . background-color becomes backgroundColor Another problem with inline style is that you need to be careful with the curly brackets. In this example we have one pair of curly brackets that introduces the JavaScript context, and the other is from defining a new JavaScript object. To make it easier to understand, try and see as a variable called styling, so in this case we will have You can import the CSS file and style it as usual.
Requests A request is made very similar to Angular. Here we will see how to make a request using fetch. It is a promise. We will need to call “then” two times because response is an object where we have data regarding a request (status, time and others) and not explicitly the data we needed from the back-end in the first one. On the second “then” we can manipulate the data we wanted to receive. If the fetch has only one parameter, the URL, it is by default a GET method.
5. Other Useful Tips In this section, we will cover the following aspects: • Event Handlers • Arrow Functions • Routing • How to Replace *ngIf • How to Replace *ngFor • Redux • Flux
Event handlers Arrow functions Another small change in the syntax Becomes You must prevent default behaviour explicitly. You should use arrow functions if you need to pass arguments. Arrow functions inside the “setState” method helps you access the previous value of the state. They get rid of the necessity to bind “this”. React developers are big fans of arrow function since they were introduced with ES6.
Routing We will need the react router library. To get this library, write in the CLI “npm install react-router-dom”. The routing part is made in index.js where we will need to import “Route”, “Link” and “BrowserRouter”. We must define which path will navigate to certain components and render the routing. In the next slide there will be an example of routing to three components.
Routing We imported the components that will be rendered based on the path. We can access the paths with “<Link to=“/contact”>Contact</Link>”, but keep in mind that you can replace “Contact” with anything At first we will render the App component because the application will start with the simple path “/”. In App component if we want, we can display links to other paths that were previously defined in the Router tag. We can handle the case when the user is looking for an unknown path by specifying a Route without a path. This is the case when a “404 Not found” page will be displayed so it is better to create a component for this case. A problem that may appear in this case is that two components may be rendered. For example, if you navigate to “/contact”, the contact Component will be rendered, but also the App because it matches the path “/” also. A solution to this problem is using the “exact” keyword before specifying the path, to force the rendering of the App component only when the path is empty after “/”.
How to Replace *ngIf You will have to replace the *ngIf with: • If-else • Ternary Operation • && • Switch • Enums • Multi-level Conditional Rendering *ngFor Map The method creates a new array by calling a provided function on every element in the calling array. For iterating over lists, you need to add an unique key to each element *ngFor=“let task of tasks” becomes tasks.map(task=>{…})
Examples for *ngIf && Ternary operation If-Else Switch
Examples for *ngIf Enum Multi-level
Redux Redux is a library who is helping you write applications that behave consistently, run in different environments (client, server and native) and are easy to test. Redux is not only for React, you can use it with Angular too or other view libraries. You need to run the following command to install it: “npm install --save redux”. It separates presentational components from container components. The basic principle around Redux is to store the whole state of your application in an object tree inside a single store. To change the state you must emit an action. An action is the name of the process the state needs to follow in order to get to the wanted state. A basic example of an action is “increment” which will raise the value of your state with one. The name of the action is “increment”, but raising the value with one, the process, is found in a pure reducer.
Reducer • A reducer is a pure function with state and action as the input and it will return the next state. • The reducer describes how the state transforms to the next state. • A pure function is a type of function which will always return the same output if the input given is the same and it will not produce side effects. • In this example, the pure function is a switch, but you can implement in another way as long as you keep it pure.
Store Another thing you should keep in mind is creating a store for keeping the state. To update the UI in response to state changes you can use subscribe. If you want to change the internal state you need to dispatch an action.
The Three Principles Single source of truth • The state of all the components is stored in one single store. State is read-only • The only way to change the state is dispatching an action Changes are made with pure functions • The reducers are made with pure functions to offer the same output every time the same input is offered
Flux Flux is an architecture that Facebook uses internally when working with React. It is ”not” a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Action Action Dispatcher Store View
View Let’s start with the View. The view is the user-visible layer which consists of React Components. Users can interact with React components since a component is mostly an HTML segment rendered on the web page. When a user interacts with a component an action can be invoked, such as showing a pop-up message when a button is clicked, and changing the colour of a DIV element on mouse hover and so on.
Action This moves to the next component, Action. In the above- mentioned example, a user clicking on the button is the event and showing a pop-up message is the action. There can be many predefined actions and for each event, a React component can invoke an action.
Dispatcher When an action is invoked, the dispatcher dispatches the action to the store. The dispatcher is responsible for the wiring of React components and Stores via actions. That means whenever a component invokes an action, the dispatcher will dispatch the action to all the registered stores.
Store Next component is the Store, which is just an object extended from the event emitter which acts as a data store. This data store keeps the state of the complete application or the state of a part of the application. When an action is dispatched to the store, the store can change its state based on the action. As an example when an action to change the colour of a DIV is dispatched, the store can change its current state to reflect the new colour for the DIV.
Resources 1.Overview Angular vs React vs Vue: Stats about the battle of Javascript technologies https://learningactors.com/angular-vs-react-vs-vue-stats-about-the-battle-of-javascript-technologies/ 3.Components Functional vs Class-Components in React https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108 React Component Lifecycle Old vs New https://medium.com/@kartikag01/react-component-lifecycle-old-vs-new-32757aee5850 5.Other Useful Tips React Training https://reacttraining.com/react-router/web/guides/quick-start Getting Started with React Router https://codeburst.io/getting-started-with-react-router-5c978f70df91 All React Conditional Rendering Techniques https://www.robinwieruch.de/conditional-rendering-react Usage with React https://redux.js.org/basics/usage-with-react Connect: Dispatching Actions with mapDispatchToProps https://react-redux.js.org/using-react-redux/connect-mapdispatch ReactJS for Noobs II — Flux https://codeburst.io/reactjs-for-noobs-ii-flux-5355adb33dad Other presentation you may want to see https://slides.com/alexanderfarennikov/react-js-fundamentals/fullscreen#/11/1 https://www.slideshare.net/hpphat/final-reactjs-presentation The most useful YouTube tutorial to get started https://www.youtube.com/watch?v=DLX62G4lc44
THANK YOU! Got any further questions? You can send me a message at: bianca.grecea@fabritglobal.com Grecea Bianca-Elena Full-Stack Web Developer at Scan the QR code to connect on LinkedIn

More Related Content

PPTX
Angular interview questions
byGoa App
 
PDF
Getting Started with React-Nathan Smith
byTandemSeven
 
PPTX
Angular View Encapsulation
byJennifer Estrada
 
PDF
Angular Best Practices - Perfomatix
byPerfomatix Solutions
 
PPTX
Angular vs react
byInfinijith Technologies
 
PPTX
Angular kickstart slideshare
bySaleemMalik52
 
PPTX
Angular IO
byJennifer Estrada
 
PDF
Get rid of controllers in angular 1.5.x start using component directives
byMarios Fakiolas
 
Angular interview questions
byGoa App
 
Getting Started with React-Nathan Smith
byTandemSeven
 
Angular View Encapsulation
byJennifer Estrada
 
Angular Best Practices - Perfomatix
byPerfomatix Solutions
 
Angular vs react
byInfinijith Technologies
 
Angular kickstart slideshare
bySaleemMalik52
 
Angular IO
byJennifer Estrada
 
Get rid of controllers in angular 1.5.x start using component directives
byMarios Fakiolas
 

What's hot

PPTX
React JS: A Secret Preview
byvaluebound
 
PPTX
Introduction to angular with a simple but complete project
byJadson Santos
 
PPTX
Angular 9
byRaja Vishnu
 
PDF
An Overview of the React Ecosystem
byFITC
 
PPTX
Angular tutorial
byRohit Gupta
 
PDF
Angular 2 Essential Training
byPatrick Schroeder
 
PDF
Spring boot jpa
byHamid Ghorbani
 
PPTX
Quick answers to Angular2+ Interview Questions
byLuis Martín Espino Rivera
 
PDF
Client-side JavaScript
byLilia Sfaxi
 
PPTX
Academy PRO: React JS
byBinary Studio
 
PPT
What's new and exciting with JSF 2.0
byMichael Fons
 
PPT
JSF Custom Components
byMichael Fons
 
PPTX
Make Mobile Apps Quickly
byGil Irizarry
 
PPTX
React and Flux life cycle with JSX, React Router and Jest Unit Testing
byEswara Kumar Palakollu
 
PPTX
Introduction to angular 2
byDor Moshe
 
PPTX
AngularJS2 / TypeScript / CLI
byDomenico Rutigliano
 
PPTX
Lecture 32
byJannat Khan
 
PDF
Tech Webinar: Angular 2, Introduction to a new framework
byCodemotion
 
PDF
Angular2 Development for Java developers
byYakov Fain
 
PDF
20150516 modern web_conf_tw
byTse-Ching Ho
 
React JS: A Secret Preview
byvaluebound
 
Introduction to angular with a simple but complete project
byJadson Santos
 
Angular 9
byRaja Vishnu
 
An Overview of the React Ecosystem
byFITC
 
Angular tutorial
byRohit Gupta
 
Angular 2 Essential Training
byPatrick Schroeder
 
Spring boot jpa
byHamid Ghorbani
 
Quick answers to Angular2+ Interview Questions
byLuis Martín Espino Rivera
 
Client-side JavaScript
byLilia Sfaxi
 
Academy PRO: React JS
byBinary Studio
 
What's new and exciting with JSF 2.0
byMichael Fons
 
JSF Custom Components
byMichael Fons
 
Make Mobile Apps Quickly
byGil Irizarry
 
React and Flux life cycle with JSX, React Router and Jest Unit Testing
byEswara Kumar Palakollu
 
Introduction to angular 2
byDor Moshe
 
AngularJS2 / TypeScript / CLI
byDomenico Rutigliano
 
Lecture 32
byJannat Khan
 
Tech Webinar: Angular 2, Introduction to a new framework
byCodemotion
 
Angular2 Development for Java developers
byYakov Fain
 
20150516 modern web_conf_tw
byTse-Ching Ho
 

Similar to Getting Started with React, When You’re an Angular Developer

PPTX
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
byKarmanjay Verma
 
PDF
react hook and wesite making structure ppt
byarunkumarn100
 
PDF
unit 3_Adv WTAdvanced Web Tecg Design_HTML_CSS_JAVASCRIPT_AJAX_PPT.pdf
byGauravDwivedi695361
 
PPTX
React JS - A quick introduction tutorial
byMohammed Fazuluddin
 
PPTX
Learn react-js
byC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
PPTX
Reactjs notes.pptx for web development- tutorial and theory
byjobinThomas54
 
PPTX
ReactJS presentation.pptx
byDivyanshGupta922023
 
PPTX
Introduction to React JS.pptx
bySHAIKIRFAN715544
 
PPTX
Introduction to ReactJS UI Web Dev .pptx
bySHAIKIRFAN715544
 
PDF
Learn react by Etietop Demas
byEtietop Demas
 
PPTX
Unit 2 Fundamentals of React -------.pptx
bykrishitajariwala72
 
PPTX
[Final] ReactJS presentation
by洪 鹏发
 
PPTX
UNIT - 5 ADVANCED CLIENT-SIDE PROGRAMMING WITH REACTJS.pptx
byBIswaryaUGCT
 
PDF
Fundamental concepts of react js
byStephieJohn
 
PDF
Welcome to React & Flux !
byRitesh Kumar
 
PDF
React js
byRajesh Kolla
 
PPTX
React_Complete.pptx
bykamalakantas
 
PDF
Tech Talk on ReactJS
byAtlogys Technical Consulting
 
PDF
FRONTEND DEVELOPMENT WITH REACT.JS
byIRJET Journal
 
PDF
Introduction Web Development using ReactJS
byssuser8a1f37
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
byKarmanjay Verma
 
react hook and wesite making structure ppt
byarunkumarn100
 
unit 3_Adv WTAdvanced Web Tecg Design_HTML_CSS_JAVASCRIPT_AJAX_PPT.pdf
byGauravDwivedi695361
 
React JS - A quick introduction tutorial
byMohammed Fazuluddin
 
Learn react-js
byC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Reactjs notes.pptx for web development- tutorial and theory
byjobinThomas54
 
ReactJS presentation.pptx
byDivyanshGupta922023
 
Introduction to React JS.pptx
bySHAIKIRFAN715544
 
Introduction to ReactJS UI Web Dev .pptx
bySHAIKIRFAN715544
 
Learn react by Etietop Demas
byEtietop Demas
 
Unit 2 Fundamentals of React -------.pptx
bykrishitajariwala72
 
[Final] ReactJS presentation
by洪 鹏发
 
UNIT - 5 ADVANCED CLIENT-SIDE PROGRAMMING WITH REACTJS.pptx
byBIswaryaUGCT
 
Fundamental concepts of react js
byStephieJohn
 
Welcome to React & Flux !
byRitesh Kumar
 
React js
byRajesh Kolla
 
React_Complete.pptx
bykamalakantas
 
Tech Talk on ReactJS
byAtlogys Technical Consulting
 
FRONTEND DEVELOPMENT WITH REACT.JS
byIRJET Journal
 
Introduction Web Development using ReactJS
byssuser8a1f37
 

Recently uploaded

PDF
Supercharging Android Apps with On-Device AI: Gemini Nano
bydinoykraj
 
PDF
Oracle MySQL HeatWave - Complete - Version 3
byLuca Bonesini
 
PDF
UiPath DevConnect 2025: UiPath ScreenPlay - The Future of Human-Like Automation
byDianaGray10
 
PDF
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
PPTX
AI: Beyond Generative AI and LLM | Harrie de Groot (harrie.dev)
byHarrie de Groot
 
PDF
IDSECCONF2025 - Faisal Ilham - Semi Automating Vulnerability Scanner and Expl...
byidsecconf
 
PPTX
kernel PPT (Explanation of Windows Kernal).pptx
byINFOBYTES1
 
PDF
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
PDF
Supervised Machine Learning Approaches for Log-Based Anomaly Detection: A Cas...
byMohammed BEKKOUCHE
 
PDF
IDSECCONF2025 - Budi Rahardjo - Cyber Security and AI.pdf
byidsecconf
 
PDF
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
PDF
Top Crypto Supers 15th Report November 2025
byStephen Perrenod
 
PDF
Linux Foundation Certified System Administrator (LFCS) Exam.pdf
byLinuxCert Guru
 
PPTX
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
PDF
The Great AI Divide Estimated AI Contribution to Economy by 2030 by Dinis Gu...
byDinis Guarda
 
PDF
Migrating to the AWS Cloud - Amazon Web Services
byVICTOR MAESTRE RAMIREZ
 
PDF
Building Powerful Web Apps to Improve Productivity and Engagement - Esri UK W...
byEsri UK
 
PPTX
Redcentric Data Centres: vision, mission and values
byRedcentric
 
PDF
How to Spot a Fraudulent Shopping Website
byAshwini Singh
 
PDF
UnityNet AI Induced Harm & Youth Protection Position Statement 2025-11-15
byLHelferty
 
Supercharging Android Apps with On-Device AI: Gemini Nano
bydinoykraj
 
Oracle MySQL HeatWave - Complete - Version 3
byLuca Bonesini
 
UiPath DevConnect 2025: UiPath ScreenPlay - The Future of Human-Like Automation
byDianaGray10
 
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
AI: Beyond Generative AI and LLM | Harrie de Groot (harrie.dev)
byHarrie de Groot
 
IDSECCONF2025 - Faisal Ilham - Semi Automating Vulnerability Scanner and Expl...
byidsecconf
 
kernel PPT (Explanation of Windows Kernal).pptx
byINFOBYTES1
 
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
Supervised Machine Learning Approaches for Log-Based Anomaly Detection: A Cas...
byMohammed BEKKOUCHE
 
IDSECCONF2025 - Budi Rahardjo - Cyber Security and AI.pdf
byidsecconf
 
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
Top Crypto Supers 15th Report November 2025
byStephen Perrenod
 
Linux Foundation Certified System Administrator (LFCS) Exam.pdf
byLinuxCert Guru
 
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
The Great AI Divide Estimated AI Contribution to Economy by 2030 by Dinis Gu...
byDinis Guarda
 
Migrating to the AWS Cloud - Amazon Web Services
byVICTOR MAESTRE RAMIREZ
 
Building Powerful Web Apps to Improve Productivity and Engagement - Esri UK W...
byEsri UK
 
Redcentric Data Centres: vision, mission and values
byRedcentric
 
How to Spot a Fraudulent Shopping Website
byAshwini Singh
 
UnityNet AI Induced Harm & Youth Protection Position Statement 2025-11-15
byLHelferty
 

Getting Started with React, When You’re an Angular Developer

  • 2.
    MOTIVATION In case youare asking yourself why should you learn React.JS, here are a couple of reasons to give it a shot: • It is the first in the top 3 front-end frameworks & libraries • It is easier to learn than Angular • It is really fast
  • 3.
    POPULARITY You might havenoticed in the past year, Google Trends rated the worldwide interest on React to be higher than Vue and Angular. Also, there is a higher demand for React developers based on LinkedIn Jobs statistics. Angular React Vue
  • 4.
    OVERVIEW Introduction Create an Application Components Styling and RequestsUseful Tips In this presentation, we will touch the following topics:
  • 5.
    1. Introduction In thissection, we will cover the following aspects: • What Is React • Virtual DOM • JSX • Pros and Cons for Both React and Angular
  • 6.
    What is Reactand how it compares to Angular? A JavaScript library for building user interfaces. Angular on the other hand is a framework. In general, the differentiating feature between a library and a framework is a matter of control — frameworks dictate how your project will be structured, whereas libraries are building blocks that can be used anywhere. If we use the metaphor of architecture, libraries are bricks, and frameworks are, fittingly, the frame. React has components only. We do not encounter directives, pipes, modules and other things you would expect to see with Angular. It is a good option if you work with fast updating data. Most JavaScript frameworks update the DOM more than they have to and the solution is the use of Virtual DOM.
  • 7.
    Virtual DOM Every DOMobject has a corresponding virtual DOM object. It stores in memory a snapshot of the object before updating. DOM updates only the needed changes. Imagine it as editing the blueprint, as opposed to moving rooms in the actual house The steps of updating an object are: 1. The entire virtual DOM gets updated. 2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed. 3. The changed objects, and the changed objects only, get updated on the ”real” DOM. 4. Changes on the real DOM cause the screen to change.
  • 8.
    JSX They contain theinformation that will be displayed on the screen, the same as the declaration under .html files in Angular. You can declare variables equal to JSX, but you have to put them in brackets. They must be closed and if you want to display multiple elements you need to fit them into a bigger element for them to be seem as only one element. For example, if you want to show two paragraphs, you need to put them inside a div element. An XML/HTML-like syntax <p>Hello, {props.name}</p> <FormComponent name=“World”/>
  • 9.
    Pros React • Virtual DOMimproves both the user experience and the developer’s work – Virtual DOM helps updating any user’s changes without the other parts’ interference by applying isolated components. It greatly helps to smooth the experience of all participants in real-time mode. • Saving time while re-using React components – React deals with isolated components, that’s why you can reuse them anytime you need. System upgrades will not impact or change your system. • Less error prone - provided by the one-directional data flow. • An open-source library with a variety of tools – All updates are released to the community. React has had the open-source library and engineers can introduce the additional tools. Angular • Component-based architecture of Angular allows creating the UI with single parts (components) and reuse these components in the app. The elements also simplify user testing and maintenance. • TypeScript is the core language for Angular and it does compile to JavaScript. • High Performance. • Angular Material streamlines Material Design interface engineering – Angular team is constantly refreshing its framework with material design components. • Large Ecosystem – well-known Angular Resources incorporates the UI environments, IDEs, analytics tools, facilities for ASP.NET, etc.
  • 10.
    Cons React • Lack ofdocumentation due to high pace development – The popularity of this web front-end framework is higher than other frameworks. It has so many updates and innovations, that sometimes it is hard to find all the detailed information. • The JSX elements are found in the JS file where you can find the logic of the application too, which can make things confusing at first for some developers. Angular • Transferring legacy systems from AngularJS to Angular – the difference between AngularJS and Angular is huge, thus it takes a lot of time and efforts to migrate legacy systems. • Learning difficulty – junior developers have to cover the bundle of things while learning Angular such as: components, modules, dependency injection, and many other things. • The CLI documentation is poorly described and it does take a while for the developer to find out more about the CLI’s documentation on GitHub or other forums.
  • 11.
    2. Create anApplication In this section, we will cover the following aspects: • Prerequisites • How to Install • How to Create & Build • How to Display Hello, World!
  • 12.
    Prerequisites Basic knowledge ofHTML, CSS, and JavaScript. Basic understanding of ES6 features. To get started you should at least know the following features: 1. Let 2. Const 3. Arrow functions 4. Imports and Exports 5. Classes Basic understanding of how to use npm.
  • 13.
    How to Install 1.Install Node.js 2. Install npm Both from https://nodejs.org/en/ 3. Install Visual Studio by following the steps in this article https://docs.microsoft.com/en-us/visualstudio/install/install-visual- studio?view=vs-2019 4. Open Visual Studio terminal 5. Run: “npm install -g create-react-app”
  • 14.
    How To Create& Build Creating a React application is as simple as creating an Angular app by requiring only one command. Building the newly created application is the same as in Angular. 1. Run: “create-react-app my-app” 2. Run: “cd my-app” 3. Run: “npm start”
  • 15.
    How to Display“Hello, World!” If you run an application, you will see a page filled with content, but we will want to get rid of all that. The information you see is from the App.js file, so go to App.js and replace the content in “function App(){…}” with a simple
  • 16.
    3. Components In thissection, we will cover the following aspects: • Rules • index.js • Functional Components • Passing Parameters • Class-Based Components • State • Lifecycle Methods
  • 17.
    Rules • Always importReact from ‘react’ if you use JSX. • Import ReactDOM from ‘react-dom’ only in index.js • Use only one JSX element ReactDOM.render ( What do I want to show, Where do I want to show it ) What do I want to show: • It can be a JSX element or a component Where do I want to show it: • Usually it is
  • 18.
    index.js “ReactDOM” shows whatthe page will render on the actual DOM. <App /> is the functional component that will be shown, it needs a closing tag. Element with id ‘root’ is located in the public folder under index.html Index.html is the only file with .html extension, the other things you will display are JSX elements and you put then in the return statement of a component, or simply put a JSX directly on the render of “ReactDOM”. index.html and index.js are similar to app.component.html and app.component.js in Angular.
  • 19.
    Functional Components App.js haswhat it will be rendered on the page along the logic code of the component. The inside of the return is the JSX needed by It needs to have export default App; Functional components are stateless, you will not have a constructor, or state in it. Stateless components print out what is given to them via props, or they always render the same thing. Aim to have a parent component keep all the information, and pass it down to its children stateless components. You do not need to use “this”. New features for functional components has been promised to be added in the future by Facebook members.
  • 20.
    Passing Parameters The parameterhas to be assigned on the selector of the component which is passing it. The component that receives the argument will always refer to it as “props”. You can access it by writing “props.{parameterName}”.
  • 21.
    Class-Based Components Class-based componentsneed to extend “React.Component”. They must contain a render method and inside it there will me a return statement. The output is the same as in the previous slide. You must refer to props with “this.props”. They can have a constructor, but they must contain a super() because we are inheriting from a class. They are stateful components, which means they are keeping track of changing data. You’ll need state ”somewhere” when information dynamically changes, like a user’s current favorite songs or top scores. Class-based components are the patent component who keep all the information. You can extend Component if you import {Component} from ‘react’. OUTPUT:
  • 22.
    State The components canbe stateless, which are functional components, or stateful, class-based components. The state is declared in the constructor. State is the private data of a component. Inside state you can declare multiple objects or primitives, arrays of objects or anything your component needs. You should treat it’s value as immutable and we need the “setState()” method to modify it. You can modify the value of the state without using “setState()”, but this will be overwritten by the call of “setState()” method, so it is not a good practice. Inside “setState()” method we will use “this” and because of that we need to bind it in the constructor or by using an arrow function inside the method. The component is re-rendered when state changes.
  • 23.
  • 24.
    Lifecycle Methods We alreadytalked about constructor and render, so we will go to the following methods: 1. componentDidMount which is called after the component is rendered; it is similar to ngAfterViewInit 2. getDerivedStateFromProps is called before rendering the elements; it is similar to ngOnInit 3. shouldComponentUpdate is where you specify the conditions weather the page should re-render or not by returning a boolean 4. getSnapshotBeforeUpdate is where you have access to the previous state. 5. componentDidUpdate is similar to ngAfterViewInit but only after an update occurred before 6. componentWillUnmount gets called when the component is removed from the DOM; similar to ngDestroy
  • 25.
    4. Styling andRequests In this section, we will cover the following aspects: • Styling • Requests
  • 26.
    Styling Get used toclassName and forget about class. For inline style you have to be careful: the hyphen is not recognized by JavaScript so this will imply some small changes, we will have to convert to camelCase . background-color becomes backgroundColor Another problem with inline style is that you need to be careful with the curly brackets. In this example we have one pair of curly brackets that introduces the JavaScript context, and the other is from defining a new JavaScript object. To make it easier to understand, try and see as a variable called styling, so in this case we will have You can import the CSS file and style it as usual.
  • 27.
    Requests A request ismade very similar to Angular. Here we will see how to make a request using fetch. It is a promise. We will need to call “then” two times because response is an object where we have data regarding a request (status, time and others) and not explicitly the data we needed from the back-end in the first one. On the second “then” we can manipulate the data we wanted to receive. If the fetch has only one parameter, the URL, it is by default a GET method.
  • 28.
    5. Other UsefulTips In this section, we will cover the following aspects: • Event Handlers • Arrow Functions • Routing • How to Replace *ngIf • How to Replace *ngFor • Redux • Flux
  • 29.
    Event handlers Arrowfunctions Another small change in the syntax Becomes You must prevent default behaviour explicitly. You should use arrow functions if you need to pass arguments. Arrow functions inside the “setState” method helps you access the previous value of the state. They get rid of the necessity to bind “this”. React developers are big fans of arrow function since they were introduced with ES6.
  • 30.
    Routing We will needthe react router library. To get this library, write in the CLI “npm install react-router-dom”. The routing part is made in index.js where we will need to import “Route”, “Link” and “BrowserRouter”. We must define which path will navigate to certain components and render the routing. In the next slide there will be an example of routing to three components.
  • 31.
    Routing We imported thecomponents that will be rendered based on the path. We can access the paths with “<Link to=“/contact”>Contact</Link>”, but keep in mind that you can replace “Contact” with anything At first we will render the App component because the application will start with the simple path “/”. In App component if we want, we can display links to other paths that were previously defined in the Router tag. We can handle the case when the user is looking for an unknown path by specifying a Route without a path. This is the case when a “404 Not found” page will be displayed so it is better to create a component for this case. A problem that may appear in this case is that two components may be rendered. For example, if you navigate to “/contact”, the contact Component will be rendered, but also the App because it matches the path “/” also. A solution to this problem is using the “exact” keyword before specifying the path, to force the rendering of the App component only when the path is empty after “/”.
  • 32.
    How to Replace *ngIf Youwill have to replace the *ngIf with: • If-else • Ternary Operation • && • Switch • Enums • Multi-level Conditional Rendering *ngFor Map The method creates a new array by calling a provided function on every element in the calling array. For iterating over lists, you need to add an unique key to each element *ngFor=“let task of tasks” becomes tasks.map(task=>{…})
  • 33.
  • 34.
  • 35.
    Redux Redux is alibrary who is helping you write applications that behave consistently, run in different environments (client, server and native) and are easy to test. Redux is not only for React, you can use it with Angular too or other view libraries. You need to run the following command to install it: “npm install --save redux”. It separates presentational components from container components. The basic principle around Redux is to store the whole state of your application in an object tree inside a single store. To change the state you must emit an action. An action is the name of the process the state needs to follow in order to get to the wanted state. A basic example of an action is “increment” which will raise the value of your state with one. The name of the action is “increment”, but raising the value with one, the process, is found in a pure reducer.
  • 36.
    Reducer • A reduceris a pure function with state and action as the input and it will return the next state. • The reducer describes how the state transforms to the next state. • A pure function is a type of function which will always return the same output if the input given is the same and it will not produce side effects. • In this example, the pure function is a switch, but you can implement in another way as long as you keep it pure.
  • 37.
    Store Another thing youshould keep in mind is creating a store for keeping the state. To update the UI in response to state changes you can use subscribe. If you want to change the internal state you need to dispatch an action.
  • 38.
    The Three Principles Singlesource of truth • The state of all the components is stored in one single store. State is read-only • The only way to change the state is dispatching an action Changes are made with pure functions • The reducers are made with pure functions to offer the same output every time the same input is offered
  • 39.
    Flux Flux is anarchitecture that Facebook uses internally when working with React. It is ”not” a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Action Action Dispatcher Store View
  • 40.
    View Let’s start withthe View. The view is the user-visible layer which consists of React Components. Users can interact with React components since a component is mostly an HTML segment rendered on the web page. When a user interacts with a component an action can be invoked, such as showing a pop-up message when a button is clicked, and changing the colour of a DIV element on mouse hover and so on.
  • 41.
    Action This moves tothe next component, Action. In the above- mentioned example, a user clicking on the button is the event and showing a pop-up message is the action. There can be many predefined actions and for each event, a React component can invoke an action.
  • 42.
    Dispatcher When an actionis invoked, the dispatcher dispatches the action to the store. The dispatcher is responsible for the wiring of React components and Stores via actions. That means whenever a component invokes an action, the dispatcher will dispatch the action to all the registered stores.
  • 43.
    Store Next component isthe Store, which is just an object extended from the event emitter which acts as a data store. This data store keeps the state of the complete application or the state of a part of the application. When an action is dispatched to the store, the store can change its state based on the action. As an example when an action to change the colour of a DIV is dispatched, the store can change its current state to reflect the new colour for the DIV.
  • 44.
    Resources 1.Overview Angular vs Reactvs Vue: Stats about the battle of Javascript technologies https://learningactors.com/angular-vs-react-vs-vue-stats-about-the-battle-of-javascript-technologies/ 3.Components Functional vs Class-Components in React https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108 React Component Lifecycle Old vs New https://medium.com/@kartikag01/react-component-lifecycle-old-vs-new-32757aee5850 5.Other Useful Tips React Training https://reacttraining.com/react-router/web/guides/quick-start Getting Started with React Router https://codeburst.io/getting-started-with-react-router-5c978f70df91 All React Conditional Rendering Techniques https://www.robinwieruch.de/conditional-rendering-react Usage with React https://redux.js.org/basics/usage-with-react Connect: Dispatching Actions with mapDispatchToProps https://react-redux.js.org/using-react-redux/connect-mapdispatch ReactJS for Noobs II — Flux https://codeburst.io/reactjs-for-noobs-ii-flux-5355adb33dad Other presentation you may want to see https://slides.com/alexanderfarennikov/react-js-fundamentals/fullscreen#/11/1 https://www.slideshare.net/hpphat/final-reactjs-presentation The most useful YouTube tutorial to get started https://www.youtube.com/watch?v=DLX62G4lc44
  • 45.
    THANK YOU! Got anyfurther questions? You can send me a message at: bianca.grecea@fabritglobal.com Grecea Bianca-Elena Full-Stack Web Developer at Scan the QR code to connect on LinkedIn