React Lifecycle Studio

React Lifecycle Studio is a React learning app that explores component lifecycle flow through a studio page, lifecycle playground, timeline, and phase meter. It is designed to make lifecycle transitions visible while keeping the implementation approachable.

Tech Stack

• React
• React DOM
• Create React App / react-scripts
• React Testing Library
• Jest DOM

Folder Structure

react-lifecycle-studio/
|-- public/
|   `-- index.html
|-- src/
|   |-- App.js
|   |-- index.css
|   |-- index.js
|   |-- setupTests.js
|   |-- components/
|   |   |-- LifecyclePlayground.jsx
|   |   |-- LifecycleTimeline.jsx
|   |   `-- PhaseMeter.jsx
|   |-- pages/
|   |   `-- LifecycleStudioPage.jsx
|   `-- tests/
|-- package.json
`-- README.md

Setup

1. Install Node.js 18 or later.
2. Open a terminal in this project folder.
3. Install dependencies:

npm install

Run Locally

Start the development server:

npm start

Create a production build:

npm run build

Run tests:

npm test