How gcarvajalp/react-native-lab works
This is a small React and TypeScript learning app, not a production workflow platform. The current entry point mounts App, which renders the users page; that page fetches ReqRes users and displays them using typed response contracts. The repository also contains counter and authentication examples plus standalone TypeScript examples; the login and TypeScript examples are not mounted by App in the inspected source. The graph shows only relationships supported by the excerpts or source index; the external API call is explicit in UsersPage.
Main entry points: UsersPage.tsx Users page · main.tsx React entry · App.tsx App shell · reqres.interface.ts ReqRes contracts
Components 14
Application runtime
- React entry
src/main.tsx - App shell
src/App.tsx - Users page
src/components/UsersPage.tsx - ReqRes contracts
src/interfaces/reqres.interface.ts
Interactive examples
- Counter component
src/components/Counter.tsx - Hook counter
src/components/CounterWithHook.tsx - Counter hook
src/hooks/useCounter.tsx - Login page
src/components/LoginPage.tsx - Auth state
src/store/auth.store.ts
TypeScript examples
- Basic types
src/typescript/BasicTypes.tsx - Basic functions
src/typescript/BasicFunctions.tsx - Object literals
src/typescript/ObjectLiterals.tsx
Other components
- Browser
- ReqRes API
Connections 8
- Browser → React entry: opens app
src/main.tsx - React entry → App shell: renders
src/main.tsx - App shell → Users page: renders
src/App.tsx - Users page → ReqRes API: fetches users
src/components/UsersPage.tsx - Users page → ReqRes contracts: types response
- Hook counter → Counter hook: uses hook
src/components/CounterWithHook.tsx - Login page → Auth state: reads and updates
src/components/LoginPage.tsx - ReqRes contracts → ReqRes API