SlideShare a Scribd company logo
REACT JS
INTRODUCTION
CONTENT
• Introduction React JS and JSX
• Component, State, Props.
• Component API, Life Cycle.
• Pros & Cos
• Demonstration
WHAT IS REACT?
• A JavaScript Library For Building User Interfaces
• Renders your UI and responds to events.
• It also uses the concept called Virtual DOM, creates an in-memory data structure
cache, enumerates the resulting differences, and then updates the browser’s
displayed DOM efficiently.
• One of the unique features of React.js is not only it can perform on the client side, but
it can also be rendered on the server side, and they can work together interoperably.
#1 Everything is a Component:
React has no…
… controllers
… directives
… templates
… global event listeners
… models
… no view models
Just Components
#2 Single Source of Truth
Traditional data flows
No framework: Any component can communicate with any other component
React: 1-way data flow
JSX
• JSX = Javascript + XML.
const element = <h1>Hello, world!</h1>;
JSX
<script>
var helloEl = React.createElement('div', { className: 'hello' }, 'Hello,
world!');
React.render(
helloEl,
document.body
);
</script>
<script type="text/jsx">
var helloEl = <div className: "hello">Hello, world!</div>;
React.render(
helloEl,
document.body
);
</script>
JSX
<script>
var helloEl = React.createElement('div', { className: 'hello' }, 'Hello,
world!');
React.render(
helloEl,
document.body
);
</script>
<script type="text/jsx">
var helloEl = <div className: "hello">Hello, world!</div>;
React.render(
helloEl,
document.body
);
</script>
COMPONENT
• 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.
COMPONENT
class TodoInput extends React.Component {
render() {
return (
<div className="form-inline">
<input className="form-control" type="text" value={this.state.content}
onChange={this.updateState}/>
</div>
);
}
}
COMPONENT - PROPS
COMPONENT - STATE
class TodoInput extends React.Component {
constructor(props) {
super(props); //Call this function because 'this' is not allowed before super().
this.state = {
content: ''
};
this.addTodo = this.addTodo.bind(this);
}
updateState(e) {
this.setState({content: e.target.value});
}
addTodo() {
// We of course not declare onSave function of this component at parent component
// Refer to: Body.jsx for more information
// We declare this onSave at mapDispatchToProps function
this.props.onSave.call(this, this.state.content, this.props.todo && this.props.todo.id || null);
this.setState({
content: ''
})
}
render() {
return (
<div className="form-inline">
<div className="form-group">
<input className="form-control" type="text" value={this.state.content}
onChange={this.updateState}/>
</div>
</div>
);
}
}
REACT COMPONENT LIFECYCLE
• React enables to create components by invoking the React.createClass() method
which expects a render method and triggers a lifecycle that can be hooked into via a
number of so called lifecycle methods.
• This short article should shed light into all the applicable functions.
• Understanding the component lifecycle will enable you to perform certain actions
when a component is created or destroyed. Further more it gives you the
opportunity to decide if a component should be updated in the first place and to
react to props or state changes accordingly.
THE LIFECYCLE -
INITIALIZATION
• Code and example here
THE LIFECYCLE -
STATE CHANGES
• Code and example here
THE LIFECYCLE -
PROPS CHANGES
• Code and example here
THE LIFECYCLE -
UNMOUNTING
• Code and example here
PROS & COS OF REACT.JS
THE GOOD POINTS:
• React.js is extremely efficient
- Virtual DOM
• It makes writing Javascript easier
- React.js uses a special syntax called JSX
• It gives you out-of-the-box developer
tools
- React.js chrome extension
• It’s awesome for SEO
• UI Test Cases
THE BAD:
• React.js is only a view layer.
• Integrating React.js into a traditional
MVC framework would require some
configuration
• There is a learning curve for beginners
who are new to web development.
Why you should use React.js:
• React.js works great for teams, strongly enforcing UI and workflow patterns.
• The user interface code is readable and maintainable.
• And also, there is now a lot of demand for developers with ReactJS experience.
Introduction Web Development using ReactJS
DEMONSTRATION
[Complete Demo]
Introduction Web Development using ReactJS
Introduction Web Development using ReactJS

More Related Content

PPTX
[Final] ReactJS presentation
PPTX
Intro to React.js
PPTX
Intro react js
PPTX
React - Start learning today
PPTX
PPTX
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
PPTX
BackboneJS + ReactJS
PPTX
Adding a modern twist to legacy web applications
[Final] ReactJS presentation
Intro to React.js
Intro react js
React - Start learning today
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
BackboneJS + ReactJS
Adding a modern twist to legacy web applications

Similar to Introduction Web Development using ReactJS (20)

PDF
Full Stack React Workshop [CSSC x GDSC]
PPTX
React JS: A Secret Preview
PPTX
reactJS
PDF
React js TRAINING IN BANGALORE
PPTX
React js TRAINING IN BANGALORE
PDF
Intro to React - Featuring Modern JavaScript
PPTX
ReactJS (1)
PDF
React JS and Redux
PPTX
React JS .NET
PDF
The Road To Redux
PDF
react hook and wesite making structure ppt
PPTX
React + Redux + TypeScript === ♥
PDF
React && React Native workshop
PDF
Complete React Javascript Course Syllabus.pdf
PPTX
Introduction to React JS for beginners
PPTX
React Hooks Best Practices in 2022.pptx
PPTX
react-slides.pptx
PPTX
Getting Started With ReactJS
PDF
A full introductory guide to React
PPTX
unit 2 React js.pptxdgdgdgdgdgdgdgdgdsgdgdg
Full Stack React Workshop [CSSC x GDSC]
React JS: A Secret Preview
reactJS
React js TRAINING IN BANGALORE
React js TRAINING IN BANGALORE
Intro to React - Featuring Modern JavaScript
ReactJS (1)
React JS and Redux
React JS .NET
The Road To Redux
react hook and wesite making structure ppt
React + Redux + TypeScript === ♥
React && React Native workshop
Complete React Javascript Course Syllabus.pdf
Introduction to React JS for beginners
React Hooks Best Practices in 2022.pptx
react-slides.pptx
Getting Started With ReactJS
A full introductory guide to React
unit 2 React js.pptxdgdgdgdgdgdgdgdgdsgdgdg
Ad

Recently uploaded (20)

PDF
Spectral efficient network and resource selection model in 5G networks
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PDF
Machine learning based COVID-19 study performance prediction
PPTX
sap open course for s4hana steps from ECC to s4
PPTX
Machine Learning_overview_presentation.pptx
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
DOCX
The AUB Centre for AI in Media Proposal.docx
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Spectral efficient network and resource selection model in 5G networks
NewMind AI Weekly Chronicles - August'25-Week II
Machine learning based COVID-19 study performance prediction
sap open course for s4hana steps from ECC to s4
Machine Learning_overview_presentation.pptx
gpt5_lecture_notes_comprehensive_20250812015547.pdf
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
The AUB Centre for AI in Media Proposal.docx
Programs and apps: productivity, graphics, security and other tools
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Encapsulation_ Review paper, used for researhc scholars
Assigned Numbers - 2025 - Bluetooth® Document
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Chapter 3 Spatial Domain Image Processing.pdf
Mobile App Security Testing_ A Comprehensive Guide.pdf
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Ad

Introduction Web Development using ReactJS

  • 2. CONTENT • Introduction React JS and JSX • Component, State, Props. • Component API, Life Cycle. • Pros & Cos • Demonstration
  • 3. WHAT IS REACT? • A JavaScript Library For Building User Interfaces • Renders your UI and responds to events. • It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the resulting differences, and then updates the browser’s displayed DOM efficiently. • One of the unique features of React.js is not only it can perform on the client side, but it can also be rendered on the server side, and they can work together interoperably.
  • 4. #1 Everything is a Component: React has no… … controllers … directives … templates … global event listeners … models … no view models Just Components
  • 5. #2 Single Source of Truth Traditional data flows No framework: Any component can communicate with any other component React: 1-way data flow
  • 6. JSX • JSX = Javascript + XML. const element = <h1>Hello, world!</h1>;
  • 7. JSX <script> var helloEl = React.createElement('div', { className: 'hello' }, 'Hello, world!'); React.render( helloEl, document.body ); </script> <script type="text/jsx"> var helloEl = <div className: "hello">Hello, world!</div>; React.render( helloEl, document.body ); </script>
  • 8. JSX <script> var helloEl = React.createElement('div', { className: 'hello' }, 'Hello, world!'); React.render( helloEl, document.body ); </script> <script type="text/jsx"> var helloEl = <div className: "hello">Hello, world!</div>; React.render( helloEl, document.body ); </script>
  • 9. COMPONENT • 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.
  • 10. COMPONENT class TodoInput extends React.Component { render() { return ( <div className="form-inline"> <input className="form-control" type="text" value={this.state.content} onChange={this.updateState}/> </div> ); } }
  • 12. COMPONENT - STATE class TodoInput extends React.Component { constructor(props) { super(props); //Call this function because 'this' is not allowed before super(). this.state = { content: '' }; this.addTodo = this.addTodo.bind(this); } updateState(e) { this.setState({content: e.target.value}); } addTodo() { // We of course not declare onSave function of this component at parent component // Refer to: Body.jsx for more information // We declare this onSave at mapDispatchToProps function this.props.onSave.call(this, this.state.content, this.props.todo && this.props.todo.id || null); this.setState({ content: '' }) } render() { return ( <div className="form-inline"> <div className="form-group"> <input className="form-control" type="text" value={this.state.content} onChange={this.updateState}/> </div> </div> ); } }
  • 13. REACT COMPONENT LIFECYCLE • React enables to create components by invoking the React.createClass() method which expects a render method and triggers a lifecycle that can be hooked into via a number of so called lifecycle methods. • This short article should shed light into all the applicable functions. • Understanding the component lifecycle will enable you to perform certain actions when a component is created or destroyed. Further more it gives you the opportunity to decide if a component should be updated in the first place and to react to props or state changes accordingly.
  • 14. THE LIFECYCLE - INITIALIZATION • Code and example here
  • 15. THE LIFECYCLE - STATE CHANGES • Code and example here
  • 16. THE LIFECYCLE - PROPS CHANGES • Code and example here
  • 17. THE LIFECYCLE - UNMOUNTING • Code and example here
  • 18. PROS & COS OF REACT.JS THE GOOD POINTS: • React.js is extremely efficient - Virtual DOM • It makes writing Javascript easier - React.js uses a special syntax called JSX • It gives you out-of-the-box developer tools - React.js chrome extension • It’s awesome for SEO • UI Test Cases THE BAD: • React.js is only a view layer. • Integrating React.js into a traditional MVC framework would require some configuration • There is a learning curve for beginners who are new to web development.
  • 19. Why you should use React.js: • React.js works great for teams, strongly enforcing UI and workflow patterns. • The user interface code is readable and maintainable. • And also, there is now a lot of demand for developers with ReactJS experience.