Introduction of React Library- AchieversIT

1

WELCOME TO
React Js

2
WHAT IS REACT ?

1. React is a JavaScript library for building fast
   and interactive user interfaces for the web as
   well as mobile applications
2. It is an open-source, reusable component-based
   front-end library
3. In a model view controller architecture, React
   is the View which is responsible for how the
   application looks and feels
4. React divides the UI into multiple components,
   which makes the code easier to debug, and each
   component has its own property and function

3
WHY REACT ?

1. Easy creation of dynamic web applications
2. Performance Enhancements
3. Reusable Components
4. Unidirectional data flow
5. Small learning curve
6. Can be used for Mobile apps
7. Dedicated tools for easy debugging

4
FEATURES OF REACT ?

1. JSX is a syntax extension to JavaScript. It is
   used with React to describe what the User
   Interface should look like

• 2 By using JSX, you can write HTML structures
  in the same file that contains JavaScript code

• 3 JSX helps in making the code easier to
  understand and debug as it avoids usage of JS DOM
  structures which are rather complex

• 4 React keeps a lightweight representation of
  the Real DOM in the memory, and that is known as
  the Virtual DOM
• 5 Manipulating the DOM is much slower that
  manipulating virtual DOM, because nothing gets
  drawn onscreen
• 6 When the state of an object changes, Virtual
  DOM changes only that object in the real DOM
  instead of updating all the objects

5
COMPONENT STATE PROPS
 Components

1. Components are the building blocks of any React
   application, and a single app usually consists of
   multiple components
2. A component is essentially a piece of the User
   Interface. It is like a function that returns
   HTML elements
3. It splits the User Interface into independent,
   reusable pieces that can be processed separately

6
States

1.  State of a component is an object that holds
   some data
2. This data influences the output of a component

Props

1. Props is short for properties, that allow us to
   pass arguments or data to components
2. Props are passed to components in the way
   similar to that of HTML-tag attributes

7
What is the future of react JS?

• Instead of a full web app, React JS gives the
  ability to function on individual components,
  which allows them to have the best possible
  rendering output. React development has emerged
  as the future of web creation with its extra
  versatility and ease.

8

• THANK YOU