Skip to content

Commit d6f3fae

Browse files
Ranga KaranamRanga Karanam
authored andcommitted
Improving React V6 updates documentation
1 parent cfcbb9c commit d6f3fae

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

00000-react-6-updates/react6-vs-react5-step-by-step-changes.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ Let's get started.
4949

5050
#### Change Overview
5151

52-
1. You do NOT need to use exact anymore!
53-
2. You should use element={<LoginComponent />} instead of component=LoginComponent
52+
1. You do NOT need to use `exact` anymore!
53+
2. You should use `element={<LoginComponent />}` instead of `component=LoginComponent`
5454

5555
#### Final Code for TodoApp
5656

@@ -96,7 +96,7 @@ export default withNavigation
9696

9797
##### Change 2: Use LoginComponentWithNavigation instead of LoginComponent
9898

99-
Use LoginComponentWithNavigation instead of LoginComponent
99+
Use `LoginComponentWithNavigation` instead of `LoginComponent`
100100

101101
```
102102
const LoginComponentWithNavigation = withNavigation(LoginComponent);
@@ -145,8 +145,8 @@ class TodoApp extends Component {
145145

146146
#### Change Overview
147147

148-
1. No need to use a Switch
149-
2. Use <Route path="*" element={<ErrorComponent />} />
148+
1. No need to use a `Switch`
149+
2. Use `<Route path="*" element={<ErrorComponent />} />`
150150

151151

152152
```
@@ -402,20 +402,15 @@ export default TodoApp
402402

403403
##### Change 1: Use HeaderComponentWithNavigation instead of HeaderComponent
404404

405-
render() method in TodoApp
406-
```
407-
const HeaderComponentWithNavigation = withNavigation(HeaderComponent);
408-
405+
`render()` method in `TodoApp`
409406
```
407+
const HeaderComponentWithNavigation = withNavigation(HeaderComponent);
410408
411-
render() method in TodoApp
412-
```
413409
<HeaderComponentWithNavigation/>
414410
//<HeaderComponent/>
415411
```
416412

417413

418-
419414
##### TodoApp after this step
420415

421416
```
@@ -492,7 +487,7 @@ export default AuthenticatedRoute
492487

493488
##### Change 3: Usage of AuthenticatedRoute
494489

495-
Use AuthenticatedRoute inside the element attribute
490+
Use `AuthenticatedRoute` inside the `element` attribute
496491

497492
```
498493
//<AuthenticatedRoute path="/welcome/:name" component={WelcomeComponent}/> //REACT-5
@@ -531,3 +526,8 @@ Use AuthenticatedRoute inside the element attribute
531526
} />
532527
533528
```
529+
530+
## End of this section
531+
- Code Backups
532+
- [Before Refactoring](https://github.com/in28minutes/full-stack-with-react-and-spring-boot/blob/master/00000-react-6-updates/react-6-01-single-component-for-all.md)
533+
- [After Refactoring](https://github.com/in28minutes/full-stack-with-react-and-spring-boot/blob/master/00000-react-6-updates/react-6-02-after-refactoring.md)

0 commit comments

Comments
 (0)