The document provides an overview of React, a JavaScript library developed by Facebook for building user interfaces through a component-based architecture. It outlines the reasons for using React, its features such as JSX, single-way data flow, and virtual DOM, as well as setup tools like Babel and Webpack. Additionally, it addresses the advantages and disadvantages of using React in web development.

1. REACT

2. POINTS WILL BE COVER..
1. WHAT IS REACT ?
2. WHY REACT ?
3. LIFESTYLE METHODS.
4. “HELLO” WORLD PROGRAM
5. SET-UP TOOLS
6. JAVASCRIPT FUNCTIONS
7. FEATURES
8. ADVANTAGES & DISADVANTAGES

3. WHAT IS REACT ?
• REACT WAS FIRST CREATED BY JORDAN WALKE, A SOFTWARE ENGINEER
WORKING FOR FACEBOOK.
• JAVASCRIPT LIBRARY CREATED BY FACEBOOK.
• USER INTERFACE (UI) LIBRARY.
• TOOL FOR BUILDING UI COMPONENTS.
• COMPONENT BASED ARCHITECTURE.
• 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”.

4. WHY REACT ?
• Allows developers to create large web applications which can change data, without reloading
the page.
Simplicity
Testability Native Approach
Provides the “V”
in MVC
Fast, Scalable,
Simple.

5. LIFESTYLE METHODS
componentwillMount:function()
{
this.dosomething1();
}
componentshouldMount:function()
{
this.dosomething2();
}
componentShouldUpdate:function()
{
this.dosomething3();
}

6. componentDidMount:function()
{
this.dosomething4();
}
componentWillUnmount:function()
{
this.dosomething5();
}

7. SIMPLE “HELLO” WORD PROGRAM.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

8. TYPICAL SET-UP TOOLS
• Node and pnm.
• Babel.
• Webpack.
• Nb (You can use Gulp instead of Webpack).

9. WHAT IS BABEL ?
• It’s JavaScript compiler that includes the ability to compile JSX into regular JavaScript.
• Babel's npm module's name is babel-core.
• It’s native platform.
• Babel comes in two parts: the core, and plugins.
• Collections of plugins are grouped into presets

10. WEBPACK ?
• Webpack is a popular module bundling system built on top of Node.js.
• It can handle not only combination and minification of JavaScript and CSS files, but also
other assets such as image files (spriting) through the use of plugins.
• Webpack can be used as an alternative to Cassette or ASP.NET Combination and
Minification.

11. JAVASCRIPT FUNCTION-
Map()
• Applies on array.
• Returns a new
array with
‘transformed’
elements.
• You specify the
function.
Filter()
• Return a sub-array.
• Involve a
conditional logic.
Other
Function
• Merge()
• Flatten()
• Reduce()
• Render()

12. FEATURES OF REACT.
JSX
• JSX is simple JavaScript which allows HTML quoting and uses these
HTML tag syntax to render subcomponents.
• HTML syntax is processed into JavaScript calls of React Framework.
React Native
• React has native libraries which were announced by Facebook in 2015,
which provides the react architecture to native applications like IOS,
Android and UPD.

13. Single-way Data Flow
• Component cannot directly modify any properties but can pass a call back function
with help of which we can do modifications.
• In React, a set of immutable values are passed to the components renderer as
properties in its HTML tags.
• This complete process is known as “properties flow down; actions flow up”
Virtual Document Object Model
• React creates an in-memory data structure cache which computes the changes made
and then updates the browser.
• This allows a special feature which enable programmer to code as if whole page is
render on each change where as react library only render components which
actually change.

14. ADVANTAGES OF REACT.
Highly
efficie
nt.
Easier
to write
JavaScri
pt via
jsx.
Easyto
write
UI test
cases.
Highly
efficie
nt.
Out-Of-
The-box
developer
tools.
Very good
for SEO.
Easy
forData
binding
reuse
React
compone
nts

15. DISADVANTAGES
• It’s only a view layer.
• ReactJS into an MVC framework requires configurations.
• High pace of development
• Poor documentation
• Additional SEO hassle

16. Thank you