diff --git a/src/react/README.md b/src/react/README.md new file mode 100644 index 00000000..3b12b5b2 --- /dev/null +++ b/src/react/README.md @@ -0,0 +1,141 @@ +# React Components for Angular2-HN Migration + +This directory contains React components migrated from the Angular 9 Hacker News application as part of Phase 1 and Phase 2 of the migration plan. + +## Prerequisites + +To use these components, you'll need to install the following dependencies: + +```bash +npm install react react-dom react-router-dom +npm install -D @types/react @types/react-dom +``` + +## Directory Structure + +``` +src/react/ +├── contexts/ +│ └── SettingsContext.tsx # React Context for settings state management +├── components/ +│ ├── shared/ +│ │ ├── Loader/ # Loading indicator component +│ │ └── ErrorMessage/ # Error message display component +│ ├── feeds/ +│ │ └── Item/ # Story card component +│ └── core/ +│ ├── Footer/ # Footer component +│ ├── Header/ # Navigation header component +│ └── Settings/ # Settings panel component +├── types/ +│ └── index.ts # TypeScript interfaces +├── utils/ +│ └── formatComment.ts # Comment formatting utility +├── index.ts # Main exports +├── tsconfig.json # TypeScript configuration for React +└── README.md # This file +``` + +## Components + +### Phase 1: Shared/Utility Components + +#### Loader +A pure presentational component that displays a loading animation. + +```tsx +import { Loader } from './react'; + + +``` + +#### ErrorMessage +A presentational component that displays error messages with a skull icon. + +```tsx +import { ErrorMessage } from './react'; + + +``` + +#### Item +A story card component that displays individual Hacker News items. + +```tsx +import { Item } from './react'; +import { Story } from './react/types'; + +const story: Story = { /* ... */ }; + +``` + +### Phase 2: Core Layout Components + +#### Footer +A static footer component with a GitHub link. + +```tsx +import { Footer } from './react'; + +