React is an open source JavaScript library for building user interfaces. It allows building encapsulated components that manage their own state, then composing them to make complex UIs. React minimizes DOM changes by updating the DOM efficiently. The main advantages of React include declarative views that make code more predictable, the ability to easily pass rich data through the app, and rendering on both the web and mobile. Components in React implement a render method that takes input data and returns what to display.

1. Full Stack Web
Development
Department of Computer Science,
FCAI Air University, Islamabad
ReactJS - An Introduction

2. Full Stack Web
Development
Department of Computer Science,
FCAI Air University, Islamabad
Shortcomings of JavaScript

3. Full Stack Web
Development
Department of Computer Science,
FCAI Air University, Islamabad
Why use ReactJS
● The React team realized that JavaScript is fast, but updating the DOM makes it slow.
● React minimizes DOM changes.
● It has figured out the most efficient and intelligent way to update DOM.
● Before React, most frameworks and libraries would update the DOM unintelligently
to reflect a new state.
● The main advantage of using a Library over a Framework is that Libraries are
lightweight, and there is a freedom to choose different tools.
● The Framework consists of an entire ecosystem to build an application, and you
don't have an easy way to use any other tools outside the Framework

4. Full Stack Web
Development
Department of Computer Science, FCAI
Air University,
Islamabad
ReactJS
● React is an open source, JavaScript library for developing user interface (UI)
in web application.
● React is developed and released by Facebook.
● Facebook is continuously working on the React library and enhancing it by
fixing bugs and introducing new features.

5. Full Stack Web
Development
Department of Computer Science, FCAI
Air University, Islamabad
ReactJS contd..
● ReactJS is a simple, feature rich, component based JavaScript UI library.
● It can be used to develop small applications as well as big, complex applications.
● ReactJS provides minimal and solid feature set to kick-start a web application.
● React community compliments React library by providing large set of ready-made
components to develop web application in a record time.
● React community also provides advanced concept like state management,
routing, etc., on top of the React library.

6. Full Stack Web
Development
Department of Computer Science, FCAI
Air University, Islamabad
Declaration by ReactJS
● React makes it painless to create interactive UIs.
● Design simple views for each state in your application, and React will efficiently
update and render just the right components when your data changes.
● Declarative views make your code more predictable and easier to debug.

7. Full Stack Web
Development
Department of Computer Science, FCAI
Air University, Islamabad
Component based
● Build encapsulated components that manage their own state, then compose
them to make complex UIs.
● Since component logic is written in JavaScript instead of templates, you can
easily pass rich data through your app and keep state out of the DOM.
● We don’t make assumptions about the rest of your technology stack, so you can
develop new features in React without rewriting existing code.
● React can also render on the server using Node and power mobile apps using
React Native.

8. Full Stack Web
Development
Department of Computer Science, FCAI
Air University, Islamabad
Simple Component
● React components implement a render() method that takes input data and
returns what to display.
● This example uses an XML-like syntax called JSX.
● Input data that is passed into the component can be accessed by render() via
this.props.

9. Full Stack Web
Development
Department of Computer Science, FCAI
Air University, Islamabad

10. Full Stack Web
Development
Department of Computer Science, FCAI
Air University, Islamabad
Questions?