{"version":"1.0","type":"rich","title":"React 101","description":"This React 101 example demonstrates a hands-on teaching environment for the React library, showcasing functional components and props through a simple todo list. The header component (`Header.js`) dynamically changes its greeting and text color based on the current hour of the day, while the main list renders three todo items from a static `todosData` array. The app uses `ReactDOM.render()` to mount the root `App` component, which combines `Header`, `TodoItem`, and `Footer` components, with each `TodoItem` receiving its data via React props. Styling is applied through a linked CSS file, and the example leverages React 16.13.1 from unpkg.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e30be85f98c44286bb669dc9c22474ce?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}