https://github.com/lohanidamodar/react_lessons
Learning the basics of React JS
https://github.com/lohanidamodar/react_lessons
react react-examples react16 reactjs
Last synced: 6 months ago
JSON representation
Learning the basics of React JS
- Host: GitHub
- URL: https://github.com/lohanidamodar/react_lessons
- Owner: lohanidamodar
- Created: 2019-02-18T00:42:40.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-01T03:15:17.000Z (almost 7 years ago)
- Last Synced: 2025-04-09T01:27:12.957Z (10 months ago)
- Topics: react, react-examples, react16, reactjs
- Language: JavaScript
- Homepage:
- Size: 835 KB
- Stars: 3
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 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
6. Events
7. 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](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
-