Skip to content

lohanidamodar/react_lessons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Lessons

What you need to know

  • HTML
  • Javascript
  • Unfraid of using command line

Outline

  1. Introduction

    • React is a javascript framework for creating user interfaces
      • Full single page applications
      • Only a part of a webpage (search form)
      • Component based
      • Very fast (due to virtual DOM)
  2. Installing/Setup

    • Install NodeJs
    • Install Create React App
    • VS Code
  3. Understanding Components

    • JSX (Javascript and XML) let's us write HTML in javascript.
  4. Understanding Props and State

    • State of the component describes the current state of the component (data or ui-state)
    • State can be updated over time
  5. Events

  6. Routing

Lessons

  1. Lesson 1 (Basic Component in React.)

    In this lesson you will

    • Learn to setup react development with all dependencies loaded from CDN in your browser.
    • Create your first react component (Class based component)
    • Render you component to the DOM
    • Learn to write JSX
    • Learn to write dynamic javascript expression inside JSX
  2. Lesson 2 (Component State)

    In this lesson you will learn to

    • Use state
    • Update state based on user interaction
    • Display or remove ui element from dom based on state property
    • Display values from state in the UI
  3. Lesson 3 (Forms)

    In this lesson you will learn to

    • Handle form inputs
    • Use form inputs in real time
    • Handle form submit events
  4. Lesson 4 (Props)

    In this lesson you will

    • Understand what props is
    • Learn to use props
    • Display props in the UI
    • Pass props while loading component
  5. Lesson 5 (Cycling through data)

    In this lesson you will learn to

    • Cycle through data in an array
    • Transform data in array using map
    • Transform and render data in array using map
  6. Lesson 6 (create-react-app)

    In this lesson you will learn to

    • Install npm package globally (npm install -g create-react-app)
    • Use create-react-app to create new react project (create-react-app first_react_app)
    • Run your react app created using create-react-app (npm start)
    • Understand the basic structure of react app created using create-react-app
  7. Lesson 7 (Conditional rendering)

    In this lesson you will learn to

    • render or hide an item based on conditions
    • use two kinds of ternary operator to conditionally render items in components
  8. Lesson 8 (Forms and Functions as Props)

    In this lesson you will learn to

    • Create form and save form data to local state
    • Handle form submit action to log form data
    • Pass function as props
    • Call a function in parent component from child component
    • Update parent state from child component
  9. Lesson 9 (Lifecycle methods)

    In this lesson you will learn to use lifecycle methods of class based components

    Review this diagram

About

Learning the basics of React JS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published