SlideShare a Scribd company logo
1 of 11
React JS Training in Bangalore
CONTENT
• Introduction React JS and JSX
• Component, State, Props.
• Life Cycle of Component
• 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.
WHAT IS REACT?
• modules
• controllers
• directives
• scopes
• templating
• linking functions
• filters
• dependency injection
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 - PROPS
• Props is what you pass into the Component via attributes.
• Props is the only way to input data. (Or you can use Redux).
• Props are immutable.
• Container component will define data that can be changed
• Child Component will received data from parent component via
props.
COMPONENT - STATE
• Private data of component
• When change -> Re-render Component
• Can’t read from outside Component
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.
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 - Server
rendering
• UI Test Cases
THE BAD
• React.js is only a view layer.
• There is a learning curve for
beginners who are new to web
development.
• Library size. (~ Angular)
Why Reactjs:
use
• React.js works great for teams,
strongly enforcing UI and workflow
patterns.
• The user interface code is
readable and maintainable.
• Componentized UI is the future of
web development, and you need to
start doing it now.
• And also, there is now a lot of
demand for developers with ReactJS
experience.
NOT USE
• Slow you down tremendously at
the start.
• You will reinvent a lot of wheels.
For More Details Contact Us
Himansu: +91-9739305140
Email: info@nearlearn.com
VISIT US AT React JS Training in Bangalore
React Native Training in Bangalore

More Related Content

What's hot

JDBC: java DataBase connectivity
JDBC: java DataBase connectivityJDBC: java DataBase connectivity
JDBC: java DataBase connectivityTanmoy Barman
 
Require JS
Require JSRequire JS
Require JSImaginea
 
Geek Time Juin 2016 : React
Geek Time Juin 2016 : ReactGeek Time Juin 2016 : React
Geek Time Juin 2016 : ReactOLBATI
 
Introduction to require js
Introduction to require jsIntroduction to require js
Introduction to require jsAhmed Elharouny
 
Java programming - intro
Java programming - introJava programming - intro
Java programming - introKathleen Ong
 
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSPhilipp Burgmer
 
Skinny Framework 1.0.0
Skinny Framework 1.0.0Skinny Framework 1.0.0
Skinny Framework 1.0.0Kazuhiro Sera
 
Building Massive AngularJS Apps
Building Massive AngularJS AppsBuilding Massive AngularJS Apps
Building Massive AngularJS AppsGordon Bockus
 
MVC 1.0 als alternative Webtechnologie
MVC 1.0 als alternative WebtechnologieMVC 1.0 als alternative Webtechnologie
MVC 1.0 als alternative WebtechnologieOPEN KNOWLEDGE GmbH
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
React JS & Functional Programming Principles
React JS & Functional Programming PrinciplesReact JS & Functional Programming Principles
React JS & Functional Programming PrinciplesAndrii Lundiak
 
Introduction to ASP.NET MVC 1.0
Introduction to ASP.NET MVC 1.0Introduction to ASP.NET MVC 1.0
Introduction to ASP.NET MVC 1.0Shiju Varghese
 
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
 Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1... Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...WebStackAcademy
 

What's hot (19)

Jsp
JspJsp
Jsp
 
JDBC: java DataBase connectivity
JDBC: java DataBase connectivityJDBC: java DataBase connectivity
JDBC: java DataBase connectivity
 
Require JS
Require JSRequire JS
Require JS
 
Geek Time Juin 2016 : React
Geek Time Juin 2016 : ReactGeek Time Juin 2016 : React
Geek Time Juin 2016 : React
 
Introduction to require js
Introduction to require jsIntroduction to require js
Introduction to require js
 
Road Trip To Component
Road Trip To ComponentRoad Trip To Component
Road Trip To Component
 
Java programming - intro
Java programming - introJava programming - intro
Java programming - intro
 
Node js projects
Node js projectsNode js projects
Node js projects
 
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
 
Skinny Framework 1.0.0
Skinny Framework 1.0.0Skinny Framework 1.0.0
Skinny Framework 1.0.0
 
Zend framework 02 - mvc
Zend framework 02 - mvcZend framework 02 - mvc
Zend framework 02 - mvc
 
Building Massive AngularJS Apps
Building Massive AngularJS AppsBuilding Massive AngularJS Apps
Building Massive AngularJS Apps
 
MVC 1.0 als alternative Webtechnologie
MVC 1.0 als alternative WebtechnologieMVC 1.0 als alternative Webtechnologie
MVC 1.0 als alternative Webtechnologie
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
React JS & Functional Programming Principles
React JS & Functional Programming PrinciplesReact JS & Functional Programming Principles
React JS & Functional Programming Principles
 
AngularJS
AngularJSAngularJS
AngularJS
 
Lecture 1. java database connectivity
Lecture 1. java database connectivityLecture 1. java database connectivity
Lecture 1. java database connectivity
 
Introduction to ASP.NET MVC 1.0
Introduction to ASP.NET MVC 1.0Introduction to ASP.NET MVC 1.0
Introduction to ASP.NET MVC 1.0
 
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
 Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1... Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
 

Similar to React js TRAINING IN BANGALORE

Reactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOMReactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOMTamir Azrab
 
Basic React Knowledge.
Basic React Knowledge.Basic React Knowledge.
Basic React Knowledge.jacobryne
 
Basic React Knowledge.
Basic React Knowledge.Basic React Knowledge.
Basic React Knowledge.jacobryne
 
The following features are associated with reacting to lifecycle methods.
The following features are associated with reacting to lifecycle methods.The following features are associated with reacting to lifecycle methods.
The following features are associated with reacting to lifecycle methods.Wikiance
 
FRONTEND BOOTCAMP 3.pdf
FRONTEND BOOTCAMP 3.pdfFRONTEND BOOTCAMP 3.pdf
FRONTEND BOOTCAMP 3.pdfEhtesham46
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To ChooseAlbiorix Technology
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js SimplifiedSunil Yadav
 
An evening with React Native
An evening with React NativeAn evening with React Native
An evening with React NativeMike Melusky
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkRajitha Pathiraja
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSIRJET Journal
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !Ritesh Kumar
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Adam Mokan
 
Techpaathshala ReactJS .pdf
Techpaathshala ReactJS .pdfTechpaathshala ReactJS .pdf
Techpaathshala ReactJS .pdfTechpaathshala
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 

Similar to React js TRAINING IN BANGALORE (20)

Reactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOMReactjs Introduction - Virtual DOM
Reactjs Introduction - Virtual DOM
 
REACTJS1.ppsx
REACTJS1.ppsxREACTJS1.ppsx
REACTJS1.ppsx
 
Basic React Knowledge.
Basic React Knowledge.Basic React Knowledge.
Basic React Knowledge.
 
Basic React Knowledge.
Basic React Knowledge.Basic React Knowledge.
Basic React Knowledge.
 
The following features are associated with reacting to lifecycle methods.
The following features are associated with reacting to lifecycle methods.The following features are associated with reacting to lifecycle methods.
The following features are associated with reacting to lifecycle methods.
 
FRONTEND BOOTCAMP 3.pdf
FRONTEND BOOTCAMP 3.pdfFRONTEND BOOTCAMP 3.pdf
FRONTEND BOOTCAMP 3.pdf
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
React.js vs node.js
React.js vs node.jsReact.js vs node.js
React.js vs node.js
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
An evening with React Native
An evening with React NativeAn evening with React Native
An evening with React Native
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
React js
React jsReact js
React js
 
Techpaathshala ReactJS .pdf
Techpaathshala ReactJS .pdfTechpaathshala ReactJS .pdf
Techpaathshala ReactJS .pdf
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 

Recently uploaded

Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxsocialsciencegdgrohi
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxAvyJaneVismanos
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonJericReyAuditor
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,Virag Sontakke
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfMahmoud M. Sallam
 

Recently uploaded (20)

Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptx
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lesson
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 

React js TRAINING IN BANGALORE

  • 1. React JS Training in Bangalore
  • 2. CONTENT • Introduction React JS and JSX • Component, State, Props. • Life Cycle of Component • 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. WHAT IS REACT? • modules • controllers • directives • scopes • templating • linking functions • filters • dependency injection
  • 5. 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.
  • 6. COMPONENT - PROPS • Props is what you pass into the Component via attributes. • Props is the only way to input data. (Or you can use Redux). • Props are immutable. • Container component will define data that can be changed • Child Component will received data from parent component via props.
  • 7. COMPONENT - STATE • Private data of component • When change -> Re-render Component • Can’t read from outside Component
  • 8. 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.
  • 9. 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 - Server rendering • UI Test Cases THE BAD • React.js is only a view layer. • There is a learning curve for beginners who are new to web development. • Library size. (~ Angular)
  • 10. Why Reactjs: use • React.js works great for teams, strongly enforcing UI and workflow patterns. • The user interface code is readable and maintainable. • Componentized UI is the future of web development, and you need to start doing it now. • And also, there is now a lot of demand for developers with ReactJS experience. NOT USE • Slow you down tremendously at the start. • You will reinvent a lot of wheels.
  • 11. For More Details Contact Us Himansu: +91-9739305140 Email: info@nearlearn.com VISIT US AT React JS Training in Bangalore React Native Training in Bangalore