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