What is React?

What is React?

React is a JavaScript library for building a fast and interactive user interface for the web as well as a mobile application. It is an open-source, reusable component-based front-end library. In a model view controller architecture, React is the "view" which is responsible for the how the app looks and feels. 

• A JavaScript library for building user interfaces
• Declarative
• Technology stack agnostic
• Component-based Architecture 
• Not a framework
• Focus on Ui
• Rich Ecosystem

Why learn React?

• Created and maintained by Facebook 
• More than 100k starts on GitHub
• Huge community
• in-demand skillset

React History

• Design  by  Jordan Walke
• First deployed on facebook's newsfeed  in 2011
• Open-sourced at JSConf US in May 2013
• Designed for speed, simplicity, and scalability

React Vocabulary

1. One-way data flow
2. JSX
3. Components
4. State
5. Props
6. Virtual DOM
7. Element
8. Flux/Redux 
9. Routing

Create a New React App

Create React App could be a comfortable environment for learning React and is that the best way to start building a brand new Single page application in React.

npx create-react-app <Project_Name>
cd <Project_Name>
npm start

Another run terminal global create react app

npm install -g create-react-app 
create react app <Project_Name>
cd <Project_Name>
npm start

What is a React Element?

• Elements are the smallest building block of React app
• Elements of plain objects  describing what you want to appear in terms of the DOM
• Creating a React element is cheap compared to DOM elements
• An element contains types and properties.
• A React element can also be created React.createElement method

React Compontents

A components returns  a set of React elements that should appear on the screen
Component enable you to split your UI into independent ,resusable pieces
Components also accepts inputs
Different kinds of Components can be defined in React   
  There are two type of components
Staless functional component 

            Simplest way to define React components. JavaScript function that React elements,or collectionof React elementsthat define the view. Receives  a "props" object as aparameter. Cannot have local state or access lifecycle hooks            
Javascript function
                function welcome(props){
                    return <h1>Hello,{props,name}</h1>}
Stateful Class Component 
         Extends React.Component to get class components. Can have local state. Lifecycle hools
Class extending component class
render method returning html   

          class welcome extends React,Component{

             render(){

                  return <h1>Hello,{props,name}</h1> 

                    } 

            }

  introduction JSX

JSX is a syntax extension to JavaScript it is used with React to describe what the user interface should look like


JavaScript XML(JSX) - Sysntaic extension to JavaScript
Shothand notation to represent JaveScript functions calls that evalutae to JavaScript objects
Avoid arifical separation of
 rendering logic from other UL logic
Write XML like code for elements and components.
JSX tags have a tag-name, attributes, and children
JSX make your React code simpler and elegant
JSX is not a  necessity to write React application

JSX differences
            class - className
            for    - htmlFor
            onclick- onClick
            tabindex - tabIndex

introduction state

    Each component can store its own local information in its "state"
private and fully controlled by the component 
Can be passed as props to children
    Only class component can have local state

                    onDiskSelect(disk){
                         this.setState({   
                               selectedDish:null  
                         });
                    }
                       
introduction Props
            JSX attributes are passed into a component as asingale object
Avalibale  in the component as "props"
Can pass multiple attributes
Cannot modify props within the component
React Component LifeCycle


  React  Component goes through the following lifecycle stages
Mounting
Updating
Unmounting  
Mounting Life Cycle Method
 Called when an instance of a component is being created and inserted Into DOM  
constructor()
render()
componentDidMount()     
An earlier method now deprecated called componentWillMount()  
Updating Life Cycle Method
 Called when a component is being re-render
can be  caused by changesto props and state
getDerivedStateFromState()
render()
getSnapshotBeforeUpdate()            
Two method that are  now  deprecated componentWillReceiveProps() and ComponentWillUpdate()  
React Vitual DOM
    Browser DOM is a browser Object
    Virtual DOM is a React object

 A lightweight representation of the browser DOM. In memory tree data structure of plain JS objects. Manipulation  extremely fast compared to modifying  the bowser DOM. Created completely from scratch on every  setState. 

Introducing  React Router

Collection of navigational components
 Enables navigation among views
 Router components, route matching components and navigation compone

 Uses a browser-based bookmarkable URLs as an instruction to navigate to a client-generated view in your web app
Can also pass along optional parameters

What is Single Page Application?

    Web application or web site that fits in a single page
No need to reload the entire page
UX like a desktop/native application
Most resources are retrieved with a single page load
Redraw parts of the page when needed without requiring a full server roundtrip
Introduction to Webpack

        What is Webpack?

webpack is a module bundler for modern JavaScript applicatio
It recursively builds a dependency graph that includes every module your application needs,  then packages all of those modules into a small number of bundles.
Most famous module bundler.
Support for build system as well as module bundling.
Split code into multiple files.
Supports CommonJS and AMD.
Extend using loaders (transpiling, css transformation, image optimization).
Supports production optimizations (minification, uglification).
Easy configuration with 4 steps - entry -> loaders -> plugins -> output.