Skip to content

Latest commit

 

History

History
118 lines (67 loc) · 5.53 KB

README.md

File metadata and controls

118 lines (67 loc) · 5.53 KB
Raw

REACTJS DEMOS

REACTJS DEMOS and Nextjs (for build and TS support) Demos

CONTENT

  1. First File - Hello World Component
    • Simple Hello World Component
  2. First Component - Simple Multiple Components
    • Multiple Components
    • Passing Props
    • Accessing Props in class and function react components
  3. Second Component - Simple HTML List
  4. Second Component - HTML Event using Button
  5. Second Component - Component Counter using button
  6. Second Component - Component className and importing styles
  7. Second Component - Component Styles - html inner styles
  8. Second Component - Component Styles - html inner styles with variables
  9. Second Component - Component Styles - html inner styles with styles and variables
  10. Second Component - Component Styles - html inner styles with variables object
  11. Third Component - Forms Button Event
  12. Third Component - Forms Text Field
  13. Third Component - Forms Check Box
  14. Third Component - Forms Multiple Form Items
  15. Third Component - Forms Submit Form
  16. Third Component - Forms Submit Form Styled
  17. Fourth Component
  18. Fourth Component
  19. Fourth Component
  20. Fourth Component

INSTALLATION AND USAGE

This is a Next.js project bootstrapped with create-next-app. The nextjs app structure is used to support Typescript, and Building of ES/ TS files.

GETTING STARTED

  1. First, Clone the repository using the following commands:
git clone https://github.com/lang-codes/codes-react-demos.git

  1. Second, Install dependencies using npm install.

  2. Third, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

  1. Fourth, Open http://localhost:3000 with your browser to see the result.

  2. Fifth, You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

  3. Sixth, This project uses next/font to automatically optimize and load Inter, a custom Google Font.

  4. Seventh,

  5. Eighth, http://localhost:3000/api/hello is an endpoint that uses Route Handlers. This endpoint can be edited in app/api/hello/route.ts.

LEARN MORE

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

DEPLOY ON VERCEL

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.