Scribd Logo
Upload

Welcome to Scribd!

  • 14 views

    Unit5

    Uploaded by

    Vishnupriya Sivakumar

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    Unit5

    Uploaded by

    Vishnupriya Sivakumar
    14 views55 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    14 views55 pages

    Unit5

    Uploaded by

    Vishnupriya Sivakumar

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    You are on page 1of 55

    React Framework

    Dr. Sandhya P
    Professor
    SCOPE
    VIT - Chennai
    React Introduction
    • Open source JavaScript library for building user interfaces
    • Not a framework
    • Focus on UI
    • React is based on component based architecture (Reusable code)
    • React is declarative (React with React DOM library will build the actual
    UI)
    • React native can be used for developing mobile applications
    React – Hello World application
    • Install node.js
    • Install VS Code
    • To create a React project run the following in CLI:
    npx create-react-app my-app
    cd my-app
    npm start
    • Then open the browser on port 3000 to get the default app
    React – Hello World application
    React – Hello World application
    • Open App.js and edit the <p> to Hello Kevin!!!
    React – Hello World application
    File Structure of React Project
    package.json (Contains dependencies and scripts)
    package-lock.json (Contains dependencies)
    public folder (contains index.html which has <div> root, when you run
    npm start, it is this file that gets rendered in the browser)
    src folder contains index.js (This contains the view of the
    AppComponent which is rendered in the DOM app node-in the
    index.html)
    App.js - AppComponent
    Component Types
    • Stateless functional components
    • Stateful class components
    Stateless function components
    Stateless function components
    • Create a components folder in src
    • Create a function in ES6 standard (arrow function)
    Stateless function components
    • Greet.js
    Stateless function components
    • App.js
    Stateless function components
    Stateful class component
    Stateful class component
    • The state is a private state where it is used to provide some
    information to describe the user-interface.
    Stateful class component
    Stateful class component
    Stateful class component
    Class components
    • Class components has lifecycle hooks
    • They return JSX
    • They have state
    Hooks
    • Using state, lifecycle methods and this binding is cumbersome. Hence
    hooks are introduced.
    JSX
    • JavaScript XML (JSX) – Extension to JavaScript Language Syntax
    • Write XML like codes for elements and components
    • JSX tags have tag name, attributes and children
    • JSX is not necessary to write React applications
    • JSX makes code easier
    • JSX code gets transpiled to JavaScript and then runs on browser
    JSX
    • class – className
    • for – htmlFor
    • onclick – onClick
    • tabindex - tabIndex
    Code without JSX
    Code without JSX
    Code without JSX
    Code with JSX
    Code with JSX
    Code with JSX
    Props (Dynamic page)

    <h1>Hello {props.name}</h1>(JSX expression)


    Props (Dynamic page)
    Props (Dynamic page)
    Example 2 on props
    Example 2 on props
    Example 2 on props
    Example 3 – props on class
    • Props when used in class must be invoked with this
    Example 3 – props on class
    Example 3 – props on class
    Props
    • props are immutable, it is read-only
    Component state (props Vs state)
    Component state – Example 1
    Component state – Example 1
    Component state – Example 1
    Component state – Example 1
    setState – Example 1
    setState – Example 1
    setState – Example 1
    setState – Example 1
    Event Handling (Stateless
    Component)
    Event Handling (Stateless
    Component)
    Event Handling (Stateless
    Component)
    React Forms

    You might also like