[{"id":"09e48fec-e25b-49c8-a2ad-b30d8c616451","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What is React.js?","styles":{}}],"children":[]},{"id":"40636e3a-c4a5-4433-88d4-f98c80fc0c6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React.js","styles":{"bold":true}},{"type":"text","text":" is a JavaScript library for building user interfaces.","styles":{}}],"children":[]},{"id":"c93756a5-a9b6-4f37-b56a-a7bd94fa9983","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"2892dfb3-e708-4a03-963c-df7ad4ff925c","type":"procode","props":{"code":"React.js = JavaScript library for building UI with components\n","language":"txt","filename":"","files":"[{\"id\":\"dxc7b20c1\",\"name\":\"code\",\"code\":\"React.js = JavaScript library for building UI with components\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c252a788-71fe-4df9-ab44-a5cac78a5d7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React helps you build parts of a website such as:","styles":{}}],"children":[]},{"id":"c28f5477-605e-48b3-9bef-e7dd140d1944","type":"procode","props":{"code":"Navbar\nButton\nCard\nForm\nModal\nSidebar\nDashboard\nBlog post\nProduct list\n","language":"txt","filename":"","files":"[{\"id\":\"gpo89y1xd\",\"name\":\"code\",\"code\":\"Navbar\\nButton\\nCard\\nForm\\nModal\\nSidebar\\nDashboard\\nBlog post\\nProduct list\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2288e05d-fcf6-43be-8356-e2533036fbd6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The official React site describes React as a library for web and native user interfaces, and React lets you build user interfaces from individual pieces called components.","styles":{}}],"children":[]},{"id":"8f9395dd-09b2-43d5-a2ed-9f32dd465a01","type":"divider","props":{},"children":[]},{"id":"c7f635a2-084c-45d4-82b4-1729a6c0a0c2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"fad9d980-f3dc-44a4-97a7-835213fcce48","type":"procode","props":{"code":"React.js\n├── JavaScript library\n├── Used for building user interfaces\n├── Uses components\n├── Uses JSX\n├── Handles state\n├── Handles events\n├── Updates the UI automatically\n├── Good for interactive websites\n└── Often used with tools like Vite or Next.js\n","language":"txt","filename":"","files":"[{\"id\":\"fx1wknvsb\",\"name\":\"code\",\"code\":\"React.js\\n├── JavaScript library\\n├── Used for building user interfaces\\n├── Uses components\\n├── Uses JSX\\n├── Handles state\\n├── Handles events\\n├── Updates the UI automatically\\n├── Good for interactive websites\\n└── Often used with tools like Vite or Next.js\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5a1733d-9c40-4c07-ab0f-d5811243683d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e369ba82-c83b-45a4-aa66-48588a0e350e","type":"procode","props":{"code":"React helps you build UI as reusable blocks.\n","language":"txt","filename":"","files":"[{\"id\":\"0ar6pb10g\",\"name\":\"code\",\"code\":\"React helps you build UI as reusable blocks.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"acd4e2d8-fe8d-456c-bd0c-0ebdc385b74a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"1bc077a2-b005-4663-9a58-a2ba8bf9a7b8","type":"procode","props":{"code":"Website\n├── Navbar component\n├── Hero component\n├── ProductCard component\n├── Footer component\n└── Modal component\n","language":"txt","filename":"","files":"[{\"id\":\"t3zhioh9t\",\"name\":\"code\",\"code\":\"Website\\n├── Navbar component\\n├── Hero component\\n├── ProductCard component\\n├── Footer component\\n└── Modal component\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8e836071-6d13-4933-a84e-05e45e875cd5","type":"divider","props":{},"children":[]},{"id":"b6bf48d2-d834-4297-8dd7-a9ef261a02f8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React is a Library","styles":{}}],"children":[]},{"id":"698ef00c-27f9-49d1-a42a-b96831383881","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React is not a full framework by itself.","styles":{}}],"children":[]},{"id":"a8385f89-3886-4bc8-b0eb-87893fe7a60d","type":"procode","props":{"code":"React.js\n├── Focuses on UI\n├── Does not include built-in routing by default\n├── Does not include backend by default\n├── Does not include database by default\n└── Can be combined with other libraries\n","language":"txt","filename":"","files":"[{\"id\":\"cgilto2ck\",\"name\":\"code\",\"code\":\"React.js\\n├── Focuses on UI\\n├── Does not include built-in routing by default\\n├── Does not include backend by default\\n├── Does not include database by default\\n└── Can be combined with other libraries\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"09785cd6-8694-4bc4-9acb-f44b99933367","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"8320c4a3-ae61-4afe-9f14-38e08a9d8446","type":"procode","props":{"code":"React mainly handles the view layer.\n","language":"txt","filename":"","files":"[{\"id\":\"aavvzettg\",\"name\":\"code\",\"code\":\"React mainly handles the view layer.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b7cdef8-121d-4eb2-9533-185a7b2976a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For a complete app, React is often combined with:","styles":{}}],"children":[]},{"id":"e0079747-4c3b-4f49-9bc7-a3c61c60b1bf","type":"procode","props":{"code":"Vite → project setup and build tool\nReact Router → routing\nTanStack Query → server state / data fetching\nZustand → global state\nReact Hook Form → forms\nZod → validation\nAxios / Fetch → API requests\nTailwind CSS → styling\n","language":"txt","filename":"","files":"[{\"id\":\"8a9b0uz8z\",\"name\":\"code\",\"code\":\"Vite → project setup and build tool\\nReact Router → routing\\nTanStack Query → server state / data fetching\\nZustand → global state\\nReact Hook Form → forms\\nZod → validation\\nAxios / Fetch → API requests\\nTailwind CSS → styling\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7560bb8e-de4b-4f24-8f20-801c342835a7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React itself lets you put components together, but the React docs explain that it does not prescribe routing and data fetching for an entire app; for full-stack apps, the docs recommend using a framework such as Next.js or React Router.","styles":{}}],"children":[]},{"id":"08d33df5-0c85-48d3-8e6b-6f4877644e0d","type":"divider","props":{},"children":[]},{"id":"12f84827-1591-4cf7-b468-99454a648b24","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Component-based UI","styles":{}}],"children":[]},{"id":"c91d8c5c-ce67-4662-b548-d11ab3a7b904","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React apps are built from ","styles":{}},{"type":"text","text":"components","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b690c555-306e-42f6-ba36-8bbbf37ae2c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A component is a reusable piece of UI.","styles":{}}],"children":[]},{"id":"1380240a-2210-47da-9df5-f65b3cb27c74","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"36168fca-cdb0-424a-89c0-7b02ed4db51a","type":"procode","props":{"code":"function Button() {\n return \n}\n","language":"tsx","filename":"","files":"[{\"id\":\"1ymrkexhw\",\"name\":\"code\",\"code\":\"function Button() {\\n return \\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"136deb74-2eb0-48e8-abd4-685175e8f8ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use it:","styles":{}}],"children":[]},{"id":"723136a6-0d81-46b0-a267-56150cf1c047","type":"procode","props":{"code":"export default function App() {\n return (\n

Hello React

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ruqpkkl4v\",\"name\":\"code\",\"code\":\"export default function App() {\\n return (\\n

\\n

Hello React

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"400c00f8-6a45-4ab1-98b0-c2d0c2f607e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"65c6dd35-fafe-4f2c-8384-99f60f6f99c4","type":"procode","props":{"code":"Component = reusable UI block\n","language":"txt","filename":"","files":"[{\"id\":\"1yjis3rp7\",\"name\":\"code\",\"code\":\"Component = reusable UI block\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a8574b2-b716-4f23-abc1-9fff443b71e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React apps are made out of components, and a component can be as small as a button or as large as an entire page. React components are JavaScript functions that return markup.","styles":{}}],"children":[]},{"id":"84e9501f-a931-4359-bdbe-6e7fe824e71a","type":"divider","props":{},"children":[]},{"id":"01f1be85-4526-4b8c-a981-ffa62bbead83","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React Uses JSX","styles":{}}],"children":[]},{"id":"69ae89de-045d-4f2f-9eab-f4eed38079dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React commonly uses ","styles":{}},{"type":"text","text":"JSX","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1a7d9aee-d4f4-4e7d-8a45-91729ab4e7d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JSX looks like HTML, but it is written inside JavaScript.","styles":{}}],"children":[]},{"id":"6f5c0cde-068c-4cd9-8eff-a0bf45dd2ce3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"f81ebc92-d3ac-420b-8c68-85145296df74","type":"procode","props":{"code":"export default function App() {\n return (\n

Learn React.js

React makes UI easier to build.

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"g5aphjegx\",\"name\":\"code\",\"code\":\"export default function App() {\\n return (\\n

\\n

Learn React.js

\\n

React makes UI easier to build.

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc866f10-8922-400f-8e01-3c3eac9d006b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1dd39f4e-1521-4aec-afa7-03180eb24824","type":"procode","props":{"code":"JSX = HTML-like syntax inside JavaScript\n","language":"txt","filename":"","files":"[{\"id\":\"15e3mp95a\",\"name\":\"code\",\"code\":\"JSX = HTML-like syntax inside JavaScript\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19869752-d826-489c-8c5f-fb98532ab8b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React does not require JSX, but most React projects use it because it is convenient. The React docs describe JSX as a markup syntax commonly used in React projects.","styles":{}}],"children":[]},{"id":"3edc1291-2a93-412b-9e17-2c6c49e27465","type":"divider","props":{},"children":[]},{"id":"db213173-0389-41c7-8fbe-52da4f9759cd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React Updates the UI","styles":{}}],"children":[]},{"id":"269de96d-8db6-4331-8559-0f8117751dbc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React can update the screen when data changes.","styles":{}}],"children":[]},{"id":"8eff1268-7dee-4189-8f15-2f1d39fe16d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"bd48a530-b74c-4348-8023-f6c26961bd07","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function Counter() {\n const [count, setCount] = useState(0)\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"y4kkkavbm\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function Counter() {\\n const [count, setCount] = useState(0)\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"400730bd-aaec-4505-8372-df5f58829eeb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the button is clicked:","styles":{}}],"children":[]},{"id":"76dc793d-9c27-4884-a030-3bf301a8dd3d","type":"procode","props":{"code":"count changes\n└── React updates the UI\n","language":"txt","filename":"","files":"[{\"id\":\"5qlbbz7ge\",\"name\":\"code\",\"code\":\"count changes\\n└── React updates the UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"131ec662-f34c-4c93-bb3e-4e3e8d3583b3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"8460c39f-4961-4a9e-a7a9-9d5defc11273","type":"procode","props":{"code":"State changes → UI updates\n","language":"txt","filename":"","files":"[{\"id\":\"oxgvr27wg\",\"name\":\"code\",\"code\":\"State changes → UI updates\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"67558ab3-16ef-46b2-b856-6fd5b0893895","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React components can receive data and return what should appear on the screen. When data changes because of interaction, React updates the screen to match the new data.","styles":{}}],"children":[]},{"id":"ca5c5722-3472-42e0-a21d-15cbba3e6484","type":"divider","props":{},"children":[]},{"id":"51d172fd-1919-43dd-af54-7709cb16e010","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React Handles Interactivity","styles":{}}],"children":[]},{"id":"a458effc-89da-417a-a215-755ddefee06f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React is useful for interactive UI.","styles":{}}],"children":[]},{"id":"57f759f5-e6c0-401f-91aa-343dbede42b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Examples:","styles":{}}],"children":[]},{"id":"4b8c9d87-f79a-4751-ab99-1ae448f66010","type":"procode","props":{"code":"Click button\nOpen modal\nSubmit form\nSearch data\nFilter table\nAdd todo\nRemove item\nToggle dark mode\nShow dropdown\nUpdate dashboard\n","language":"txt","filename":"","files":"[{\"id\":\"w8mffrupc\",\"name\":\"code\",\"code\":\"Click button\\nOpen modal\\nSubmit form\\nSearch data\\nFilter table\\nAdd todo\\nRemove item\\nToggle dark mode\\nShow dropdown\\nUpdate dashboard\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0e03e788-c9ff-465a-ac4e-c98e450234ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9476bce5-9f7a-41f2-aa7e-952bb5a35999","type":"procode","props":{"code":"React is good when the UI changes based on user action.\n","language":"txt","filename":"","files":"[{\"id\":\"4phi5is2p\",\"name\":\"code\",\"code\":\"React is good when the UI changes based on user action.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"32e965b0-4a85-4e4a-ad0e-e381377226e6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"1a3f87cf-1b7f-4ec0-a585-38bcede0c6af","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function ToggleText() {\n const [show, setShow] = useState(false)\n\n return (\n

\n \n\n {show &&

Hello, this text is visible.

}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"tijnw9pyk\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function ToggleText() {\\n const [show, setShow] = useState(false)\\n\\n return (\\n

\\n \\n\\n {show &&

Hello, this text is visible.

}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f5e9d8c-8668-4ec2-9383-3d6f0ceb7c5f","type":"divider","props":{},"children":[]},{"id":"b4233cc3-d315-4edf-8b85-72fb953335df","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React.js vs Normal HTML","styles":{}}],"children":[]},{"id":"75360a95-dd99-4d98-9781-00fc852f6c7c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Normal HTML:","styles":{}}],"children":[]},{"id":"3b643a0e-7568-496f-82b7-92e616d72663","type":"procode","props":{"code":"\n","language":"html","filename":"","files":"[{\"id\":\"iwieznj2w\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da01a0fe-5623-4f48-99df-d2d9853a2a45","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React component:","styles":{}}],"children":[]},{"id":"63e220d5-bb71-4980-8902-3b6550d5f4b7","type":"procode","props":{"code":"function Button() {\n return \n}\n","language":"tsx","filename":"","files":"[{\"id\":\"wa52i4tvx\",\"name\":\"code\",\"code\":\"function Button() {\\n return \\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"267fd961-dbac-4397-aef5-ed1f0e6cadb4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Difference:","styles":{}}],"children":[]},{"id":"f18c114a-32a4-473d-ba2f-bfe3debca616","type":"procode","props":{"code":"Normal HTML\n├── Static structure\n├── Harder to reuse logic\n└── Manual DOM updates\n\nReact\n├── Reusable components\n├── Dynamic data\n├── State-based UI\n└── Easier interactive UI\n","language":"txt","filename":"","files":"[{\"id\":\"rkl0dd2rm\",\"name\":\"code\",\"code\":\"Normal HTML\\n├── Static structure\\n├── Harder to reuse logic\\n└── Manual DOM updates\\n\\nReact\\n├── Reusable components\\n├── Dynamic data\\n├── State-based UI\\n└── Easier interactive UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7d942e28-30a9-408a-99f5-cb2d9c02e098","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4031322e-0a30-41ed-be6f-0449dc07d247","type":"procode","props":{"code":"HTML creates structure.\nReact creates interactive reusable UI.\n","language":"txt","filename":"","files":"[{\"id\":\"n4dlv9c7j\",\"name\":\"code\",\"code\":\"HTML creates structure.\\nReact creates interactive reusable UI.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c34520d9-58a3-415a-ab39-f41dd48a37dc","type":"divider","props":{},"children":[]},{"id":"a9ea4bec-b97e-4e35-87e6-26ab12fd7e1a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React.js Example Structure","styles":{}}],"children":[]},{"id":"47e3dec9-a8c7-4595-b775-05b68458c9ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A basic React app can look like this:","styles":{}}],"children":[]},{"id":"10dddb3a-c8b1-4c98-bd8d-c1967f09e3fd","type":"procode","props":{"code":"src/\n├── App.tsx\n├── main.tsx\n├── components/\n│ ├── Navbar.tsx\n│ ├── Button.tsx\n│ └── Card.tsx\n└── styles/\n └── globals.css\n","language":"txt","filename":"","files":"[{\"id\":\"qdohchdko\",\"name\":\"code\",\"code\":\"src/\\n├── App.tsx\\n├── main.tsx\\n├── components/\\n│ ├── Navbar.tsx\\n│ ├── Button.tsx\\n│ └── Card.tsx\\n└── styles/\\n └── globals.css\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dcaceea4-b631-4b1e-81d8-4237794c2fe8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"b999daa8-2988-4afb-9085-359e56c494b6","type":"procode","props":{"code":"main.tsx → starts React app\nApp.tsx → main app component\ncomponents → reusable UI parts\nstyles → CSS files\n","language":"txt","filename":"","files":"[{\"id\":\"f9nbv5npi\",\"name\":\"code\",\"code\":\"main.tsx → starts React app\\nApp.tsx → main app component\\ncomponents → reusable UI parts\\nstyles → CSS files\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e352a10-de0f-42fe-9fb7-958fc80a6b6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a9d5655d-fe0a-4875-b68d-8df06172ba63","type":"procode","props":{"code":"React project = main entry + app component + reusable components\n","language":"txt","filename":"","files":"[{\"id\":\"0pu0tctzw\",\"name\":\"code\",\"code\":\"React project = main entry + app component + reusable components\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e710014f-0a7e-4a30-9f31-0f1cc39068a4","type":"divider","props":{},"children":[]},{"id":"d186a532-bf85-4b6e-abf4-d4256b5fea80","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic React Rendering Flow","styles":{}}],"children":[]},{"id":"fae7a558-9e77-4293-abfb-f540be2de56f","type":"procode","props":{"code":"main.tsx\n└── renders App.tsx\n └── App renders components\n ├── Navbar\n ├── Hero\n ├── Card\n └── Footer\n","language":"txt","filename":"","files":"[{\"id\":\"zttooaa6l\",\"name\":\"code\",\"code\":\"main.tsx\\n└── renders App.tsx\\n └── App renders components\\n ├── Navbar\\n ├── Hero\\n ├── Card\\n └── Footer\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9fd63f97-eb3f-43e1-a454-478cd2093c71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"b76abead-c2ea-4511-9078-4738d7a50805","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"main.tsx","styles":{"code":true}}],"children":[]},{"id":"0ec8f679-a08d-4cf7-a02a-409b058d2a60","type":"procode","props":{"code":"import { StrictMode } from \"react\"\nimport { createRoot } from \"react-dom/client\"\nimport App from \"./App\"\n\ncreateRoot(document.getElementById(\"root\")!).render(\n \n \n \n)\n","language":"tsx","filename":"","files":"[{\"id\":\"tmzeo6zjv\",\"name\":\"code\",\"code\":\"import { StrictMode } from \\\"react\\\"\\nimport { createRoot } from \\\"react-dom/client\\\"\\nimport App from \\\"./App\\\"\\n\\ncreateRoot(document.getElementById(\\\"root\\\")!).render(\\n \\n \\n \\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"430d95d9-fb9b-41c9-878d-959ed6e6b023","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"App.tsx","styles":{"code":true}}],"children":[]},{"id":"a66ee709-bc3e-4346-9ac1-c91b41f3384c","type":"procode","props":{"code":"export default function App() {\n return (\n

Hello React

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ci86t2lmr\",\"name\":\"code\",\"code\":\"export default function App() {\\n return (\\n

\\n

Hello React

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"738b10bd-2ba2-4f49-842d-36245aeff971","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a3e7a8aa-a3c8-4a0a-bb9c-19362b3f62be","type":"procode","props":{"code":"React renders components into the browser page.\n","language":"txt","filename":"","files":"[{\"id\":\"hklbh22uw\",\"name\":\"code\",\"code\":\"React renders components into the browser page.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d77218f7-3a8f-46fd-bc3d-970e94f00250","type":"divider","props":{},"children":[]},{"id":"67407815-f051-41d2-9eac-021cb6e4c3b1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What React.js is Used For","styles":{}}],"children":[]},{"id":"9dfb3f7f-8ad9-434e-b083-b588cb089d46","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React is commonly used for:","styles":{}}],"children":[]},{"id":"33699998-20cf-4dc6-857c-f37f54deb152","type":"procode","props":{"code":"Single Page Applications\nDashboards\nAdmin panels\nPortfolio websites\nE-commerce frontends\nBlog interfaces\nSaaS dashboards\nForm-heavy apps\nInteractive landing pages\nChat interfaces\nData tables\nMobile apps with React Native\n","language":"txt","filename":"","files":"[{\"id\":\"rekq6tbfk\",\"name\":\"code\",\"code\":\"Single Page Applications\\nDashboards\\nAdmin panels\\nPortfolio websites\\nE-commerce frontends\\nBlog interfaces\\nSaaS dashboards\\nForm-heavy apps\\nInteractive landing pages\\nChat interfaces\\nData tables\\nMobile apps with React Native\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"559b4367-cec9-4401-811a-41c563d379b5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c96a11b6-8983-4e56-b101-4be0391a5fe3","type":"procode","props":{"code":"React is useful when your UI needs reusable components and interactivity.\n","language":"txt","filename":"","files":"[{\"id\":\"6dxotlekr\",\"name\":\"code\",\"code\":\"React is useful when your UI needs reusable components and interactivity.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84da1015-5f18-4f7d-8471-9d45f4fe3777","type":"divider","props":{},"children":[]},{"id":"fce41951-4fb9-4fc3-bf4e-f3d3ee46613c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React.js is Not a Backend","styles":{}}],"children":[]},{"id":"496eee62-0fa9-4ce1-b8c6-2fb908074861","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React does not directly replace backend tools.","styles":{}}],"children":[]},{"id":"39bed24f-d0a6-41c8-8fed-d70fde0d448f","type":"procode","props":{"code":"React is not:\n├── Database\n├── Server\n├── API backend\n├── Authentication server\n├── File storage\n└── Hosting platform\n","language":"txt","filename":"","files":"[{\"id\":\"vmvq86csp\",\"name\":\"code\",\"code\":\"React is not:\\n├── Database\\n├── Server\\n├── API backend\\n├── Authentication server\\n├── File storage\\n└── Hosting platform\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8ea1307b-efcf-4c98-b5c7-214e0b0ca4e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For backend, use tools such as:","styles":{}}],"children":[]},{"id":"a6eb1cf0-9c1e-4c06-a0ef-b824222d25ee","type":"procode","props":{"code":"Express.js\nLaravel\nSupabase\nFirebase\nNext.js Route Handlers\nNode.js API\nREST API\nGraphQL API\n","language":"txt","filename":"","files":"[{\"id\":\"vyw5b00jq\",\"name\":\"code\",\"code\":\"Express.js\\nLaravel\\nSupabase\\nFirebase\\nNext.js Route Handlers\\nNode.js API\\nREST API\\nGraphQL API\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a523cd3-01dc-4fef-be0a-348e42260171","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f08120d4-b7a6-4803-8068-18ed86755bfd","type":"procode","props":{"code":"React = frontend UI\nBackend = data and server logic\n","language":"txt","filename":"","files":"[{\"id\":\"jy33ygaat\",\"name\":\"code\",\"code\":\"React = frontend UI\\nBackend = data and server logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"186efb21-58e0-4d9e-ad44-27432ef0e4ea","type":"divider","props":{},"children":[]},{"id":"68c89c87-961e-4a48-a931-c4834640fae5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"React.js Mental Model","styles":{}}],"children":[]},{"id":"9db10033-e03f-43c6-a331-8a2a649c7611","type":"procode","props":{"code":"Data\n└── Component\n └── UI\n","language":"txt","filename":"","files":"[{\"id\":\"e2yz43dm8\",\"name\":\"code\",\"code\":\"Data\\n└── Component\\n └── UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63c7cd69-92d8-4230-9ff3-40083c575f29","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another way:","styles":{}}],"children":[]},{"id":"4c69d2e4-6ea1-46b6-9ca4-fc89a6b9ebee","type":"procode","props":{"code":"State changes\n└── React re-renders component\n └── Browser shows updated UI\n","language":"txt","filename":"","files":"[{\"id\":\"m6ya3fkik\",\"name\":\"code\",\"code\":\"State changes\\n└── React re-renders component\\n └── Browser shows updated UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84b6c6f6-084a-4f26-8f81-a7779be04a87","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"39c089c2-752b-4c2b-b34e-391356006c85","type":"procode","props":{"code":"User clicks button\n├── state changes\n├── component re-renders\n└── text on screen updates\n","language":"txt","filename":"","files":"[{\"id\":\"p3233ds2c\",\"name\":\"code\",\"code\":\"User clicks button\\n├── state changes\\n├── component re-renders\\n└── text on screen updates\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7bcd35b3-e529-42e9-b190-abac276bc2fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2a002c65-5a00-48ab-b8d8-7544361e8926","type":"procode","props":{"code":"React makes UI follow data.\n","language":"txt","filename":"","files":"[{\"id\":\"z6l3ksu8m\",\"name\":\"code\",\"code\":\"React makes UI follow data.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"12a772d2-8cd8-488e-8e95-d1c0b7973e62","type":"divider","props":{},"children":[]},{"id":"35c7c633-59f7-46a6-ab01-8754c3c53442","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Misunderstandings","styles":{}}],"children":[]},{"id":"7c5336bf-2734-466a-a28a-d8da6edc3605","type":"procode","props":{"code":"Misunderstanding 1: React is a full backend framework\nMisunderstanding 2: React and Next.js are the same\nMisunderstanding 3: React Native is the same as React.js\nMisunderstanding 4: React always needs Redux\nMisunderstanding 5: React always needs useEffect\nMisunderstanding 6: React is only for big apps\nMisunderstanding 7: React replaces HTML, CSS, and JavaScript completely\n","language":"txt","filename":"","files":"[{\"id\":\"hxd7w8123\",\"name\":\"code\",\"code\":\"Misunderstanding 1: React is a full backend framework\\nMisunderstanding 2: React and Next.js are the same\\nMisunderstanding 3: React Native is the same as React.js\\nMisunderstanding 4: React always needs Redux\\nMisunderstanding 5: React always needs useEffect\\nMisunderstanding 6: React is only for big apps\\nMisunderstanding 7: React replaces HTML, CSS, and JavaScript completely\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a4da883-43d7-4a77-a85a-5e86d0c4e102","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better understanding:","styles":{}}],"children":[]},{"id":"fbf14de4-5273-4a5a-bc2a-394ca99eb941","type":"procode","props":{"code":"React uses JavaScript.\nReact uses JSX for UI.\nReact uses CSS for styling.\nReact uses components for structure.\nReact uses state for interactivity.\n","language":"txt","filename":"","files":"[{\"id\":\"38chjwiqj\",\"name\":\"code\",\"code\":\"React uses JavaScript.\\nReact uses JSX for UI.\\nReact uses CSS for styling.\\nReact uses components for structure.\\nReact uses state for interactivity.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ffb57edc-f4e1-43ce-8b2b-85e23a060b2e","type":"divider","props":{},"children":[]},{"id":"49a1cdee-3796-4ca0-8085-c2ac84d023d3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Should You Use React.js?","styles":{}}],"children":[]},{"id":"145b3d47-e40d-48ab-91c1-713ac95db137","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use React when:","styles":{}}],"children":[]},{"id":"79309bf1-932d-4fa4-a17e-7f953d0f23ab","type":"procode","props":{"code":"You need interactive UI\nYou need reusable components\nYou build dashboards\nYou build admin panels\nYou build SaaS frontends\nYou build e-commerce frontend\nYou build form-heavy apps\nYou build dynamic user interfaces\nYou want component-based architecture\n","language":"txt","filename":"","files":"[{\"id\":\"qan0ney1p\",\"name\":\"code\",\"code\":\"You need interactive UI\\nYou need reusable components\\nYou build dashboards\\nYou build admin panels\\nYou build SaaS frontends\\nYou build e-commerce frontend\\nYou build form-heavy apps\\nYou build dynamic user interfaces\\nYou want component-based architecture\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e032818-6816-4e74-a912-3ec3c86a1190","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"8990b983-10bc-4a05-b51d-0ec41023b5fb","type":"procode","props":{"code":"Static simple page → HTML/CSS may be enough\nInteractive app → React is useful\n","language":"txt","filename":"","files":"[{\"id\":\"0jiud2jwo\",\"name\":\"code\",\"code\":\"Static simple page → HTML/CSS may be enough\\nInteractive app → React is useful\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59a7f7fc-5fd7-40ac-9b33-e4dc8eca075c","type":"divider","props":{},"children":[]},{"id":"3c3bb22c-47a6-4f39-b554-6355508640a7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When React.js May Be Too Much","styles":{}}],"children":[]},{"id":"fbd2bb86-c4e9-46b9-b4ae-00bc09ef2b94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React may be unnecessary when:","styles":{}}],"children":[]},{"id":"28728b39-1cff-427e-bfd4-7152ea67440e","type":"procode","props":{"code":"The page is very simple\nThe page is mostly static\nThere is almost no interaction\nYou only need one landing page\nYou do not need reusable components\nYou do not need state changes\n","language":"txt","filename":"","files":"[{\"id\":\"vteyd74bz\",\"name\":\"code\",\"code\":\"The page is very simple\\nThe page is mostly static\\nThere is almost no interaction\\nYou only need one landing page\\nYou do not need reusable components\\nYou do not need state changes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"24628cac-801a-4316-ad2e-cdaa90ad9f06","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"63f354f5-2ea0-4973-9e26-3a5d15fe0803","type":"procode","props":{"code":"Do not use React just because it is popular.\nUse React when it solves a UI problem.\n","language":"txt","filename":"","files":"[{\"id\":\"zxcijkixf\",\"name\":\"code\",\"code\":\"Do not use React just because it is popular.\\nUse React when it solves a UI problem.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a83b67a-2692-467a-a825-749121d1612b","type":"divider","props":{},"children":[]},{"id":"5c6c274f-1fbc-41ae-b6a4-d9e84d9d2f5f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"f02bcbc4-9875-470a-93c2-d3366fc30f2e","type":"procode","props":{"code":"Professional React.js Understanding\n├── React is a UI library\n├── React builds UI with components\n├── Components are reusable blocks\n├── JSX describes what UI should look like\n├── Props pass data into components\n├── State stores changing data\n├── Events handle user interaction\n├── React updates UI when state changes\n├── React can be used with Vite\n├── React can be used inside Next.js\n├── React can be used for native apps through React Native\n└── React should be combined with other tools for full apps\n","language":"txt","filename":"","files":"[{\"id\":\"a2a6br9x0\",\"name\":\"code\",\"code\":\"Professional React.js Understanding\\n├── React is a UI library\\n├── React builds UI with components\\n├── Components are reusable blocks\\n├── JSX describes what UI should look like\\n├── Props pass data into components\\n├── State stores changing data\\n├── Events handle user interaction\\n├── React updates UI when state changes\\n├── React can be used with Vite\\n├── React can be used inside Next.js\\n├── React can be used for native apps through React Native\\n└── React should be combined with other tools for full apps\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"94f6f2a3-c57b-419f-a4a1-968ac831d63e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example mental structure:","styles":{}}],"children":[]},{"id":"61287a45-ae0f-4565-9c1a-6951a92c8526","type":"procode","props":{"code":"React App\n├── Components\n├── Props\n├── State\n├── Events\n├── Hooks\n├── Forms\n├── Routing\n├── Data fetching\n└── Styling\n","language":"txt","filename":"","files":"[{\"id\":\"sf2kr1jsr\",\"name\":\"code\",\"code\":\"React App\\n├── Components\\n├── Props\\n├── State\\n├── Events\\n├── Hooks\\n├── Forms\\n├── Routing\\n├── Data fetching\\n└── Styling\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87403962-8537-4ede-a3f6-813bdf019313","type":"divider","props":{},"children":[]},{"id":"cec01257-168e-4cb4-babb-8de7dcd958bd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"04545d8b-77d1-408d-9860-e63953a69c22","type":"procode","props":{"code":"React.js = components + state + UI updates\n","language":"txt","filename":"","files":"[{\"id\":\"dwplj1epq\",\"name\":\"code\",\"code\":\"React.js = components + state + UI updates\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a034d04-6e97-4416-9f3d-0e4265919064","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"59f497c3-3504-4875-88bb-0435175ca6ac","type":"procode","props":{"code":"Component\n├── receives data\n├── displays UI\n├── handles interaction\n└── updates when data changes\n","language":"txt","filename":"","files":"[{\"id\":\"qfusz68s2\",\"name\":\"code\",\"code\":\"Component\\n├── receives data\\n├── displays UI\\n├── handles interaction\\n└── updates when data changes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a69d8a1-b7ff-4bd7-be9b-8b60d08adc2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"1551105b-080e-47a2-9ae7-3e0c1ada2596","type":"procode","props":{"code":"Counter Component\n├── state: count\n├── UI: button\n├── event: click\n└── update: count increases\n","language":"txt","filename":"","files":"[{\"id\":\"adp7uzd8p\",\"name\":\"code\",\"code\":\"Counter Component\\n├── state: count\\n├── UI: button\\n├── event: click\\n└── update: count increases\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aaa616df-c2a8-4efb-a5dc-affddefc3d51","type":"divider","props":{},"children":[]},{"id":"70eaecb5-818a-4554-b401-7b27be093849","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"bf6889e5-2bc5-4169-b96c-6b90b189c0c6","type":"procode","props":{"code":"React.js\n├── Is a JavaScript library\n├── Is used for building user interfaces\n├── Builds UI using components\n├── Commonly uses JSX\n├── Handles interactivity with state and events\n├── Updates the UI when data changes\n├── Is good for dashboards, forms, and dynamic apps\n├── Is not a backend framework\n├── Does not include routing by default\n├── Can be used with React Router for routing\n├── Can be used with Vite for frontend projects\n├── Can be used with Next.js for full-stack apps\n└── Can be used with React Native for mobile apps\n","language":"txt","filename":"","files":"[{\"id\":\"cdokvygns\",\"name\":\"code\",\"code\":\"React.js\\n├── Is a JavaScript library\\n├── Is used for building user interfaces\\n├── Builds UI using components\\n├── Commonly uses JSX\\n├── Handles interactivity with state and events\\n├── Updates the UI when data changes\\n├── Is good for dashboards, forms, and dynamic apps\\n├── Is not a backend framework\\n├── Does not include routing by default\\n├── Can be used with React Router for routing\\n├── Can be used with Vite for frontend projects\\n├── Can be used with Next.js for full-stack apps\\n└── Can be used with React Native for mobile apps\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae6f6cd8-14ce-4732-93d3-1ff149e3619b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React.js is important because it helps you build modern, interactive, and reusable user interfaces. Instead of manually updating the page, you describe the UI with components, and React updates the screen when the data changes.","styles":{}}],"children":[]},{"id":"230dc7bf-736e-47b9-890b-78bc4ac0bc8d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]