React is a JavaScript library created by Facebook. 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”. React can be used in the development of single-page or mobile applications.

1. Rudar Daman Singla
Software Consultant
Knoldus Inc.
Getting Started
with React Basics
Shubhrank Rastogi
Software Consultant
Knoldus Inc.

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session timings, you
are requested not to join sessions
after a 5 minutes threshold post
the session start time.
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

3. React Components
Component Lifecycle
OUR AGENDA
01
`
What is React
02 Angular vs React
03
04
05
06 Demo
Some Famous Apps Built on React JS07
Create React App
References08

4. REACT

5. What is React?
● React is a JavaScript library created by Facebook.
● 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”.
● React can be used in the development of single-page or
mobile applications.
● Current stable release: 16.12.0 (November 14, 2019)

6. Angular vs React

7. Data Binding
Angular vs React

8. Language
Angular vs React

9. App Architecture
Angular vs React

10. Community Support
Angular vs React

11. Create React App
● npx create-react-app my-app
● cd my-app
● npm start
● sudo npm install -g create-react-app
● create-react-app my-app
● cd my-app
● npm start

12. React Components
● Components let you split the UI into independent, reusable pieces, and think about each piece in
isolation.
● The simplest way to define a component is to write a JavaScript function:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
● Also ES6 class is used to define a component:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

13. Class-based vs Functional Components
Class-based Functional
class XY extends Component const XY = props => {...}
Access to state Access to State (useState())
Lifecycle Hooks No Lifecycle Hooks
Access state and pros via “this” Access props via “props”
Use if you need to manage state or access to
lifecycle hooks and you don’t want to use hooks!
Use in all other classes

14. Component Lifecycle Creation
constructor(props)
call super(props)
DO: Set up state
DON’T: Cause Side effects
getDerivedStateFromProps(props, state)
DO: Sync state
DON’T: Cause Side effects
render() Prepare & structure your JSX
Render Child Components
componentDidMount()
DO: Cause Side effects
DON’T: Update State (triggers
re-render)

15. Demo

16. Component Flow Diagram

17. Some Famous Apps Built on ReactJS

18. Q/A

19. ● https://reactjs.org/docs
● https://www.udemy.com/course/react-the-complete-guide-incl-redux
References

20. Thank You !