React Learning¶
+React Documentation / Tutorial¶
+ +Typescript¶
+ +Style guide¶
+ +Markdown¶
+ +VS Code Extension¶
+-
+
- Typescript React code snippets +
- Path Intellisense +
- npm Intellisense +
- Prettier - Code formatter +
- Template String Converter +
Markdown to Word¶
+pandoc -o output.docx -f markdown -t docx filename.md
+Libs¶
+-
+
- npmjs +
Creating Typescript React Project¶
+cd C:\ProgrammeBLS\projects
+npx create-react-app quickstart --template typescript
+JSX, TSX Converter¶
+-
+
- html-to-jsx +
Recap¶
+importing-and-exporting-components¶
+ +conditional-rendering¶
+-
+
- In React, you control branching logic with JavaScript. +
- You can return a JSX expression conditionally with an if statement. +
- You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces. +
- In JSX, {cond ? : } means “if cond, render , otherwise ”. +
- In JSX, {cond && } means “if cond, render , otherwise nothing”. +
passing-props-to-a-component¶
+-
+
- To pass props, add them to the JSX, just like you would with HTML attributes. +
- To read props, use the function Avatar({ person, size }) destructuring syntax. +
- You can specify a default value like size = 100, which is used for missing and undefined props. +
- You can forward all props with
JSX spread syntax, but don’t overuse it!
+ - Nested JSX like
- Props are read-only snapshots in time: every render receives a new version of props. +
- You can’t change props. When you need interactivity, you’ll need to set state. +
React Function components¶
+ +More Infos
+ +Samples¶
+-
+
- react-typescript-todomvc-2022 +
- bulletproof-react +
- cypress-realworld-app +
- Frontend Clean Architecture +
- Awesome Codebases +