ReactJS

• A javascript library for building user interfaces

• UI is the point of human computer interaction
and communication in a device. This can
include display screens, keyboards,a mouse
and appearance of desktop.
 Is ReactJS Library or Framework?
• It is not a framework .React is library for
building user interfaces.
• React js React.js React(one and same thing)
• It is to create an awesome UI
• React was first designed by Jorden Walke ,a
software engineer at FB
• It was first deployed for Facebook News Feed
around 2011
 About React
• It was open sourced at JSCONF
• Component Based approach
• A component is one of the core building
blocks of React
• In other word,we can say that every
application you will be made up of pieces
called components
 About React
• Component makes the task of building UI
much easier.
Why we need components?
• Components we use when we need to use
one thing again and again in order to avoid
long writing of codes.
 Front End
• Frontend (also known as client-side) is a component
that offers a user interface, manages user input, and
uses APIs to connect to the backend.
• Client-Side
• Users typically see an interactive interface.
• The primary difficulty a front-end developer has is
the website's ongoing evolution. They guarantee that
the same website will display properly across various
browsers, operating systems, and gadgets.
 BackEnd
• APIs are provided by the backend (also known as the server
side), which no longer renders HTML for client applications.
• By being closer to or having the ability to interface with the
essential resource, a "backend" application or software indirectly
supports and offers frontend services. Typically, the application's
backend will manage information retrieval from the database (or
other storage location) and transmission to the frontend so that
the frontend interface can display the information in some
fashion (although sometimes the transmission of this info is
handled by yet another intermediate program)
Why React is a library not a framework?

• Why React JS is a Library not Framework - TJ

WEBDEV
 React Features
• Declarative:
Interactive user interfaces may be easily made with
React. React will effectively update and render the
appropriate components as your data changes if
you provide straightforward views for each state in
your application. Declarative views improve the
predictability and debuggability of your code.
 Features
• Component-Based:
Create state-managing, encapsulated
components, then combine them to create
intricate user interfaces. You can simply transmit
rich data through your app and keep state off of
the DOM because component functionality is
written in JavaScript rather than templates.
 Features
• JSX:
• React uses JSX for templating rather than standard
JavaScript. JSX is an object-oriented, statically-typed
programming language created for use with contemporary
web browsers. Basically, JavaScript is a simple language
that supports HTML quoting and renders components
using HTML tag syntax. React Framework JavaScript calls
are generated from HTML syntax. Don't worry; we will
investigate this further later.
 React Native
• React Native:
• Facebook announced React's native libraries in 2015, bringing the
React architecture to native apps for iOS and Android.
• Single-Way data flow:
• In React, a collection of immutable values are sent as properties in
the HTML tags of the component to the renderer. Components
cannot alter any properties directly, but they can send a callback
function to which we can make changes. The entire process can be
summed up by the phrase “properties flow down; actions flow
up”.
 SPA
• Saves lot of time
• Saves lot of Bandwidth
• Saves lot more as its much faster
• Gmail is perfect example
 PROS/CONS
• What are the pros and cons of React (knowled
gehut.com)
 Installation
• Install nodejs and npm
• Install visual studio
code/sublime/Atom/Brackets
• Install React from Terminal
• A)npm install –g create-react-app
• B)create-react-app-version
• C)create-react-app<projectname>
 Check the versions
• Node –v
npm –v
Npm install –g create-react-app
After this
Create-react-app –version
Npm startTo start the server
 Folders/Files
• Node_modules Folder->is the repository of
modules/library which you are using inside
your project.Whatever you are importing in
your project that module or library should
present inside the node_module folder.
• When you do npm install that time that
module or the library install inside the
node_module folder and one entry addedin
package.json file
• Package.json->react app->It contains complete
information like versions react,react-
dom,react-scripts