Sie sind auf Seite 1von 3

React JS

React is a JS library for building fast and interactive user interface for web and
mobile apps
React is open source means any user can access the sourcecode (modify and enhance
it)
In model view architecture, react is the view which is responsible for app's look
and feel

------------------------
Why its popular?

1. easy creation of dynamic web app


2. performance enhancement (virtual DOM and one way data binding)
3. Reuseable component
4. Uni-directional data flow (one way data flow)
5. used for mobile applications(React native which is cross compatible android and
ios)
6. Dedicated tool for debugging

------------------------
Features of React?

1. JSX

By JSX we can add HTML to javascript files. It helps easier the code to understand
and debug
JS + HTML = JSX;

const app = <h1>Hello</h1>;

(const app =) is JS
(<h1>Hello</h1>) is HTML
; is JS

2. Virtual DOM

React creates a virtual DOM that exact a copy of real dom. Traditionally when ever
something chnages in webapplication, all objects in real dom are updated. This
makes web app slower.

How react helps in this?


If 2 objects state changes, then react compaires the virtual dom(after update) with
virtual dom(right before update). After compairision react figures out which
virtual dom objects are changed, then react updates those objects in real DOM

This makes a big difference in speed.

3. Performace

React uses virtual dom, which impact the speed of apps

4. One way data binding


This means information flows in one direction. This generally used when information
is displayed and not updated.
Component of react are funcitonal in nature.i.e they recieve information through
arguments and pass information through the return values.

5. Extensions
React has many extensions, that we can use for full fledged web app.
It provide server side rendering.
React Native, Flux, Redux

6. Debugging

Easy because large developer community.

------------------------
Bulding blocks of React

Components | State | Props

1. Components

Components are bulding blocks of react application. Single app consists of multiple
component.

Each component represent part of user interface.

eg. A website have header component, footer component and inside body lots of
components are there.

It is actually a function that return HTML elements

React component are discreet and processed independently

Components can used multiple times across the app.

Component must define a render method.

Nested Component:- Component can contain serveral other component.

Types of Compenents

1. Stateless Functional Component


-> Pure JS functions
-> They return HTML elements
2. Stateful Class Component
-> Extends the Component class
-> Must contain render method that return HTML

2. State

State of a compenent is a object that hold data and that can change on period of
time.
Its the data used for the compenent to render.
Render method is responsible for how the UI looks.
Every time state chnage react re-render the component to browser.
State object can store multiple properties.
this.setState() is used to change the value of state object.

Every time the state chnages, the component is re-render to browser.

3. Props
Its called properties. It allow to pass arguments or data to components

It helps making the component more dynamic.

props are passed to component in a way simillar to HTML-tag attribute

props in a component are readyonly and cannot changed

-------------------------------

props vs state

Das könnte Ihnen auch gefallen