- HTML
- Javascript
- Unfraid of using command line
-
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)
- React is a javascript framework for creating user interfaces
-
Installing/Setup
- Install NodeJs
- Install Create React App
- VS Code
-
Understanding Components
- JSX (Javascript and XML) let's us write HTML in javascript.
-
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
-
Events
-
Routing
-
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
-
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
-
Lesson 3 (Forms)
In this lesson you will learn to
- Handle form inputs
- Use form inputs in real time
- Handle form submit events
-
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
-
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
-
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
- Install npm package globally (
-
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
-
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
-
Lesson 9 (Lifecycle methods)
In this lesson you will learn to use lifecycle methods of class based components