React

Question

Course notes with examples.

Answer 1

1. Getting Started
1.1 Adding React

2. Intro to React
2.1 JSX
2.1.1 What is JSX?
2.1.2 Intro to JSX
ReactDOM.render(
<h1>Text</h1>,
document.getElementById('root')
)
2.1.3 Expressions in JSX
const name = "David";
const el = <p>Hello, {name}</p>;

ReactDOM.render(
el,
document.getElementById('root')
);
2.1.4 Attributes in JSX
<div id="name"></div>
<div className={user.class}></div>

2.2 Virtual DOM
2.2.1 How Does JSX Work?
2.2.2 Virtual DOM

2.3 Components
2.3.1 Functional Components
https://code.sololearn.com/WHB64e0Hqx0Q/?ref=app
2.3.2 Rendering Components
https://code.sololearn.com/Wi5AOQQph94Y/?ref=app
2.3.3 Class Components
https://code.sololearn.com/W0p432shK046/?ref=app

Answer 2

2.4 Props
2.4.1 Props
2.4.2 Components using Components
https://code.sololearn.com/Wi5AOQQph94Y/?ref=app
2.4.3 Props in Class Components
2.4.4 An Example
https://code.sololearn.com/WrtN5vwd71xi/?ref=app

2.5 State
2.5.1 State
https://code.sololearn.com/W0p432shK046/?ref=app
2.5.2 Changing State
2.5.3 Counter App
https://code.sololearn.com/Wtwz1FtlVJ47/?ref=app
2.5.4 Props vs State

2.6 Hooks
2.6.1 Hooks
https://code.sololearn.com/WZw3jFSVuh32/?ref=app
2.6.2 Counter App using Hooks
https://code.sololearn.com/WghS8dnlE28U/?ref=app

2.7 Lifecycle Methods
2.7.1 Lifecycle Methods
componentDidMount
https://code.sololearn.com/Wtwz1FtlVJ47/?ref=app
2.7.2 componentDidUpdate
https://code.sololearn.com/Wtwz1FtlVJ47/?ref=app
2.7.3 The useEffect Hook
https://code.sololearn.com/W6RFdlO1GNib/?ref=app

Answer 3

Hi 🇮🇳 AYUSH.ks 🇮🇳

Although I am at level 16, I still continue to study.

I’m trying to find a new way to streamline the learning process.

Answer 4

What is this ? . Why are you doing this 🤔. you are at level 16 . and you know better about this forum

Answer 5

Hay Vasiliy what you want to say speck clearly

Answer 6

2.8 Handling Events
2.8.1 Event Handling
2.8.2 Handling User Input
2.8.3 Forms

2.9 Rendering A List
2.9.1 Lists
2.9.2 Keys
https://code.sololearn.com/WghS8dnlE28U/?ref=app

2.10 Contact Manager
2.10.1 Contact Manager
2.10.2 Sharing State
2.10.3 Adding a Contact
2.10.4 Summary
https://code.sololearn.com/WEX2q3LLcFVc/?ref=app

Answer 7

3. Intro to Redux
3.1 State Management
3.1.1 State Management
3.1.2 Introducing Redux
3.2 Core Concepts
3.2.1 Store
3.2.2 Actions & Reducers
3.2.3 Core Concepts
3.3 Actions
3.3.1 Actions
3.3.2 Action creators
3.4 Reducers
3.4.1 Reducers Function
3.4.2 Multiple Reducers
3.5 Redux with React
3.5.1 Redux with React
npm install redux
npm install react-redux
3.5.2 Creating the Store
3.5.3
https://code.sololearn.com/W9DE12En1l7n/?ref=app