John Keells Group - Confidential

Introduction to

REACT

NAME : DINUSHKA RUKSHAN

DESIGNATION : SOFTWARE ENGINEER

What is React ?

React is a JavaScript library created by

Facebook.

React is a tool for building UI components.

React is a declarative, efficient, and flexible JavaScript library for

building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

John Keells Group - Confidential

Sites build with React

Facebook

Whatsapp Web

Netflix

Instagram

John Keells Group - Confidential

How does React Work ? React creates a VIRTUAL DOM in memory.

Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React only changes what needs to be changed.

React finds out what changes have been made, and changes only what needs to be changed.

John Keells Group - Confidential

Benefits from React

Build Reusable Components (Not templates)

Reactive Updates (React auto updates UI when data

changes.)

Performance (Virtual DOM)

John Keells Group - Confidential

React JSX

JSX stands for JavaScript XML.

JSX allows us to write HTML in React.

JSX makes it easier to write and add HTML in React.

John Keells Group - Confidential

Three Important Terminologies

Components

State

Props

John Keells Group - Confidential

Components

Components let you split the UI into independent,

reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions.

They accept arbitrary inputs (called "props") and return

React elements describing what should appear on the

screen.

John Keells Group - Confidential

John Keells Group - Confidential

Create a Component

John Keells Group - Confidential

State React components has a built-in state object.

The state object is where you store property values that belongs to

the component.

When the state object changes, the component re-renders.

John Keells Group - Confidential

Using the state Object Refer to the state object anywhere in the component by using the

this.state.propertyname syntax:

John Keells Group - Confidential

Props Props are arguments passed into React components.

React Props are like function arguments in JavaScript and attributes in HTML.

Props are also how you pass data from one component to another, as parameters.

John Keells Group - Confidential

React Events Just like HTML, React can perform actions based on user events.

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot} instead of onClick="shoot()".

John Keells Group - Confidential

Keells Intranet & Keells User Management

John Keells Group - Confidential

Thank you