|
9 | 9 | 3. [Next js](#next-js) |
10 | 10 | 4. [Next js App Router](#next-js-app-router) |
11 | 11 | 5. [Veti](#veti) |
12 | | -6. [JSX](#jsx) |
13 | | -7. [Functional Components](#functional-components) |
14 | | -8. [Class Components](#class-components) |
15 | | -9. [Props](#props) |
16 | | -10. [State](#state) |
17 | | -11. [Lifecycle Methods](#lifecycle-methods) |
18 | | -12. [Events Handling](#events-handling) |
19 | | -13. [React Hooks](#react-hooks) |
20 | | -14. [Controlled Components](#controlled-components) |
21 | | -15. [Error Boundaries](#error-boundaries) |
22 | | -16. [Higher Order Components](#higher-order-components) |
23 | | -17. [Rendering Lists](#rendering-lists) |
24 | | -18. [Context API](#context-api) |
25 | | -19. [Keys](#keys) |
26 | | -20. [Forms](#forms) |
27 | | -21. [Styling in React](#styling-in-react) |
28 | | -22. [Render Props](#render-props) |
29 | | -23. [CSS Modules](#css-modules) |
30 | | -24. [Real World Examples](#real-world-examples) |
31 | | -25. [Best Practices](#best-practices) |
32 | | -26. [Additional Topics](#additional-topics) |
33 | | -27. [License to use](#license-to-use) |
34 | | -28. [Official Documentation](#official-documentation) |
| 12 | +6. [React Developer Tools](#react-developer-tools) |
| 13 | +7. [JSX](#jsx) |
| 14 | +8. [Functional Components](#functional-components) |
| 15 | +9. [Class Components](#class-components) |
| 16 | +10. [Props](#props) |
| 17 | +11. [State](#state) |
| 18 | +12. [Lifecycle Methods](#lifecycle-methods) |
| 19 | +13. [Events Handling](#events-handling) |
| 20 | +14. [React Hooks](#react-hooks) |
| 21 | +15. [Controlled Components](#controlled-components) |
| 22 | +16. [Error Boundaries](#error-boundaries) |
| 23 | +17. [Higher Order Components](#higher-order-components) |
| 24 | +18. [Rendering Lists](#rendering-lists) |
| 25 | +19. [Context API](#context-api) |
| 26 | +20. [Keys](#keys) |
| 27 | +21. [Forms](#forms) |
| 28 | +22. [Styling in React](#styling-in-react) |
| 29 | +23. [Render Props](#render-props) |
| 30 | +24. [CSS Modules](#css-modules) |
| 31 | +25. [Real World Examples](#real-world-examples) |
| 32 | +26. [Best Practices](#best-practices) |
| 33 | +27. [Additional Topics](#additional-topics) |
| 34 | +28. [License to use](#license-to-use) |
| 35 | +29. [Official Documentation](#official-documentation) |
35 | 36 |
|
36 | 37 | ## Introduction to React |
37 | 38 | React is a JavaScript library for creating user interfaces. |
@@ -103,6 +104,15 @@ npm run dev |
103 | 104 | After running these commands, you should see a message in your terminal indicating that your React website is running on a specific port, it’s usually a ‘random’ port number like http://localhost:5173. |
104 | 105 | Now, open your browser and visit the provided URL to see your React website in action. |
105 | 106 |
|
| 107 | +## React Developer Tools |
| 108 | +Use React Developer Tools to inspect React components, edit props and state, and identify performance problems. |
| 109 | + |
| 110 | +Browser extension |
| 111 | +The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: |
| 112 | + |
| 113 | +[Install for Chrome](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) |
| 114 | +Install for Firefox |
| 115 | +Install for Edge |
106 | 116 |
|
107 | 117 | ## JSX |
108 | 118 | JSX is a syntax extension for JavaScript that looks similar to XML or HTML. It allows developers to write HTML elements and components in a more concise and readable manner within JavaScript files. |
|
0 commit comments