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

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
• 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
• 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
• 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
• 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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie Getting Started with React, When You’re an Angular Developer (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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