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

2. Second, Install dependencies using npm install.

3. Third, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

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

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

7. Seventh,

8. 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:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

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.