Weitere ähnliche Inhalte Ähnlich wie ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka (20) Kürzlich hochgeladen (20) ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React Tutorial | Edureka2. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS?
Why do we need ReactJS?
3. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS
Remember the Facebook newsfeeds before
2009, when each time you had to refresh the
page for new updates ??
4. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS
Dispatcher
Initial Data
Real Time
Data
User Input
Store
ViewRefresh
5. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS
▪ Uses DOM (Document Object Model)
▪ More memory consumption
▪ Slow performance
Drawbacks Of Traditional Data Flow
DOM
6. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS
▪ Uses DOM (Document Object Model)
▪ More memory consumption
▪ Slow performance
Drawbacks Of Traditional Data Flow
DOM
DOM
DOM
7. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
React JS
1 2
43
8. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
React JS
101 2
43
9. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
React JS
1 2
43
10. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
React JS
2
43
11. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
React JS
101 2
43
12. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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.
13. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS?
Dispatcher
Initial Data
Real Time
Data
User Input
Store
View
14. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS?
Dispatcher
Initial Data
Real Time
Data
User Input
Store
15. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS?
Dispatcher
Initial Data
Real Time
Data
User Input
Store
View
16. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Agenda
ReactJS Fundamentals
What Is ReactJS?
Hello World Program
ReactJS Installation
Advantages Of ReactJS
17. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What Is ReactJS?
Now, let’s understand what is ReactJS.
18. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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.
19. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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.
20. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Aspects Of ReactJS?
Virtual DOM
Data Binding
Serverside Rendering
Patch
Virtual DOM Real DOM
21. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Aspects Of ReactJS?
Virtual DOM
Data Binding
Serverside Rendering One Way Data Binding
Action Dispatcher Store View
Action
22. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Aspects Of ReactJS?
Virtual DOM
Data Binding
Serverside Rendering
23. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Advantages of ReactJS
Let’s find out the advantages of ReactJS.
24. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Advantages of ReactJS
Application’s performance is increased
Used on Client as well as Server Side
Readability is improved
Easily used with other frameworks
25. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
ReactJS Installation
Let’s get started with ReactJS.
26. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
ReactJS Installation
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Add these <script> tags inside
<head> tag of your HTML code.
27. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Hello World Program
Let’s start coding with ReactJS.
28. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Hello World Program
29. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Hello World Program
30. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Hello World Program
This is how the output will look like:
31. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
ReactJS Fundamentals
Let’s find out about various concepts we just used in our code
32. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
KeysEventsStatesComponents
RouterRefsLifecycleProps
33. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
2 6543 987
JSX
KeysEventsStatesComponents
RouterRefsLifecycleProps
34. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
35. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
JSX Uses
Embedding JavaScript
Specifying Attributes
JSX Nested Elements
Regular JSX var MyComponent = React.createClass({
render : function () {
return (
<div>
Hello World!!!
</div>
);
});
36. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
JSX Uses
Embedding JavaScript
Specifying Attributes
JSX Nested Elements
Regular JSX
var MyComponent = React.createClass( {
render : function () {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
});
<h1>,<h2>,<p> nested
inside <div>
37. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
JSX Uses
Embedding JavaScript
Specifying Attributes
JSX Nested Elements
Regular JSX
var styles={ backgroundcolor: ’cyan’};
var MyComponent=React.createClass({
render : function () {
return (
<div style={styles}>
<h1>Header</h1>
</div>
);
}
});
Adding Attributes
38. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
JSX Uses
Embedding JavaScript
Specifying Attributes
JSX Nested Elements
Regular JSX
var MyComponent = React.createClass({
render: function () {
return(
<div>
<h2> {2+4} </h2>
</div>
);
}
});
JavaScript Expression
39. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
KeysEventsStates
Components
RouterRefsLifecycleProps
41. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Components
Component 1
42. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Components
Component 2
43. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Components
Component 3
44. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
45. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
46. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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.
47. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
48. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
49. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
KeysEventsStatesComponents
RouterRefsLifecycle
Props
50. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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.
51. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
KeysEvents
States
Components
RouterRefsLifecycleProps
52. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
53. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
KeysEventsStatesComponents
RouterRefs
Lifecycle
Props
54. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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.
55. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Initial Phase
56. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Updating Phase
57. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Props Change Phase
58. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Unmounting Phase
59. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
Keys
Events
StatesComponents
RouterRefsLifecycleProps
60. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Events
Events are the triggered reactions to specific actions like mouse hover, mouse click, key press etc.
React
Component
Action
61. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Events
Events are the triggered reactions to specific actions like mouse hover, mouse click, key press etc.
React
Event
React
Component
Action
62. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
63. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Event
button
button
button
Event handler
Event handler
Event handler
Event listener
Event listener
Event listener
In other UI
64. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
65. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
KeysEventsStatesComponents
Router
Refs
LifecycleProps
66. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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
67. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
➢ Managing focus, text selection or media playback
Refs Use Cases
➢ Triggering imperative animations
➢ Integrating with third-party DOM libraries
68. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
Keys
EventsStatesComponents
RouterRefsLifecycleProps
69. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Keys
Key =101
Key=102
render()
render()
React
Elements
Keys are the elements which helps React to identify components uniquely
70. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Keys
Key =101
Key=103
render()
render()
React
Elements
Keys are the elements which helps React to identify components uniquely
71. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
1 2 6543 987
JSX
KeysEventsStatesComponents
Router
RefsLifecycleProps
72. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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.
73. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
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