ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Agenda

Why ReactJS?
Why do we need ReactJS?

Why ReactJS
Remember the Facebook newsfeeds before
2009, when each time you had to refresh the
page for new updates ??

Why ReactJS
Dispatcher
Initial Data
Real Time
Data
User Input
Store
ViewRefresh

Why ReactJS
▪ Uses DOM (Document Object Model)
▪ More memory consumption
▪ Slow performance
Drawbacks Of Traditional Data Flow
DOM

Why ReactJS
▪ Uses DOM (Document Object Model)
▪ More memory consumption
▪ Slow performance
Drawbacks Of Traditional Data Flow
DOM
DOM
DOM

React JS
1 2
43

React JS
101 2
43

React JS
2
43

Why ReactJS?
Facebook after implementation of ReactJS became more user friendly. Each time new stories are
added, a New Stories notification appears. Clicking which will automatically refresh the news
feeds section.

Why ReactJS?
Dispatcher
Initial Data
Real Time
Data
User Input
Store
View

Why ReactJS?
Dispatcher
Initial Data
Real Time
Data
User Input
Store

Agenda
ReactJS Fundamentals
What Is ReactJS?
Hello World Program
ReactJS Installation
Advantages Of ReactJS

What Is ReactJS?
Now, let’s understand what is ReactJS.

What Is ReactJS?
ReactJS is an open source JavaScript
library used to develop User Interfaces.
ReactJS was introduced by Facebook on May,
2013. It was open sourced in March, 2015.

What Is ReactJS?
It is basically the View in MVC
(Model-View-Controller)
ReactJS is concerned with the components
that utilizes the expressiveness of JavaScript
with a HTML – like template syntax.

Aspects Of ReactJS?
Virtual DOM
Data Binding
Serverside Rendering
Patch
Virtual DOM Real DOM

Aspects Of ReactJS?
Virtual DOM
Data Binding
Serverside Rendering One Way Data Binding
Action Dispatcher Store View
Action

Aspects Of ReactJS?
Virtual DOM
Data Binding
Serverside Rendering

Advantages of ReactJS
Let’s find out the advantages of ReactJS.

Advantages of ReactJS
Application’s performance is increased
Used on Client as well as Server Side
Readability is improved
Easily used with other frameworks

Let’s get started with ReactJS.

Hello World Program
Let’s start coding with ReactJS.

Hello World Program

Hello World Program
This is how the output will look like:

ReactJS Fundamentals
Let’s find out about various concepts we just used in our code

1 2 6543 987
JSX
KeysEventsStatesComponents
RouterRefsLifecycleProps

2 6543 987
JSX

JSX
✓ JSX stands for JavaScript XML
✓ Makes HTML easy to understand
✓ It is Robust
✓ Boosts up the JS performance
function intro(){
return <h1>Hello World!!</h1>;
}
JSX

JSX Uses
Embedding JavaScript
Specifying Attributes
JSX Nested Elements
Regular JSX var MyComponent = React.createClass({
render : function () {
return (
<div>
Hello World!!!
</div>
);
});

JSX Uses
JSX Nested Elements
Regular JSX
var MyComponent = React.createClass( {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
});
<h1>,<h2>,<p> nested
inside <div>

JSX Uses
JSX Nested Elements
Regular JSX
var styles={ backgroundcolor: ’cyan’};
var MyComponent=React.createClass({
return (
<div style={styles}>
<h1>Header</h1>
</div>
);
}
});
Adding Attributes

JSX Uses
JSX Nested Elements
Regular JSX
var MyComponent = React.createClass({
render: function () {
return(
<div>
<h2> {2+4} </h2>
</div>
);
}
});
JavaScript Expression

1 2 6543 987
JSX
KeysEventsStates
Components

Components

Components
Component 1

Components
Component 2

Components
Component 3

Everything in ReactJS is component1
Each Component Return a DOM Object2
It splits the UI into independent reusable pieces3
Each independent piece is processed separately4
It can refer other components in output5
It can be further split into smaller components6
Components

Components
✓ A valid React component, accepts a single ‘props’ object argument to produce a React element.
✓ These are called “functional” as they literally are JavaScript functions.
<button onClick={this.handleClick}>Click Here</button>
Prop

Components
Simplest way of defining a
component is through JavaScript
STATEFUL
STATELESS
<Component/>
STATELESS
<Component/>
Components in ReactJS can be in two forms:
1. Stateful: Remembers everything it does
2. Stateless: Doesn’t remembers anything it does.

Stateful Components
1
Core which stores information about components state in memory
2
Can change states
3
Contains knowledge of past, current and possible future state changes
4
Receives information from the stateless components if state change is required

Stateless Components
1
Calculates states internal state of components
2
Never changes the state
3
Contains no knowledge of past, current and possible future state changes
4
Provides Referential Transparency i.e for same inputs will produce same output

1 2 6543 987
JSX
RouterRefsLifecycle
Props

Props
✓ Props are read-only components
✓ Whether components are declared as function or class, it must never change its props
✓ Such components are called ‘pure functions’
RULE: All React components must act like pure functions with respect to their props.

1 2 6543 987
JSX
KeysEvents
States
Components

States
✓ Heart of react components
✓ Must be kept as simple as possible
✓ Determines components rendering and behavior
✓ Creates dynamic and interactive components
Components
Components
Components
Components
Components
Props Props
Props Props
State
State
State
State
Props

1 2 6543 987
JSX
RouterRefs
Lifecycle
Props

Lifecycle
React provides various methods which notifies when certain stage of the lifecycle occurs called Lifecycle methods
✓ These are special event handlers that are called at
various points in components life
✓ Code can be added to them to perform various tasks
✓ They are invoked in a predictable order
✓ Entire lifecycle is divided into 4 phases.

Initial Phase

Updating Phase

Props Change Phase

Unmounting Phase

1 2 6543 987
JSX
Keys
Events
StatesComponents

Events
Events are the triggered reactions to specific actions like mouse hover, mouse click, key press etc.
React
Component
Action

Events
Events are the triggered reactions to specific actions like mouse hover, mouse click, key press etc.
React
Event
React
Component
Action

Events
✓ Events pass event arguments to the event handler
✓ Whenever an event is specified in JSX, a synthetic event is generated
✓ This synthetic event wraps up the browsers native event and are passed as argument to the
event handler

Event
button
button
button
Event handler
Event handler
Event handler
Event listener
Event listener
Event listener
In other UI

Event
button
button
button
Event
handler
Event
handler
Event
handler
Event listener
Event listener
Event listener
button
button
button Event handler
Event listener
In ReactIn other UI

1 2 6543 987
JSX
Router
Refs
LifecycleProps

Refs
✓ Refs stands for references
✓ Refs are used to return references to a particular element or component returned by render().
React Element
render(){
}
<Component/>
ref
render() {
}
ref

➢ Managing focus, text selection or media playback
Refs Use Cases
➢ Triggering imperative animations
➢ Integrating with third-party DOM libraries

1 2 6543 987
JSX
Keys
EventsStatesComponents

Keys
Key =101
Key=102
render()
render()
React
Elements
Keys are the elements which helps React to identify components uniquely

Keys
Key =101
Key=103
render()
render()
React
Elements
Keys are the elements which helps React to identify components uniquely

1 2 6543 987
JSX
Router
RefsLifecycleProps

Router
✓ React Router is a powerful routing library built on top of React Framework.
✓ It helps in adding new screens and flows to the application very quickly.
✓ It keeps the URL in sync with data that’s being displayed on the web page.

Router Advantages
Easily understands the application views.1
It can restore any state and view with simple URL.2
It handles nested views and the resolutions.3
State can be restored by the user by moving backward and forward.4
It maintains a standardized structure and behavior.5
While navigating it can do implicit CSS transitions.6

ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka (20)

More from Edureka! (20)

Recently uploaded (20)

ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka