From bfb630edaa93504240f0998e41f34aee2bcfcfb4 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 29 Sep 2025 08:03:15 +0530 Subject: [PATCH] getting started with docs --- docs/index.mdx | 5 ++- docs/react/_category_.json | 8 ++++ docs/react/create-react-app.mdx | 72 +++++++++++++++++++++++++++++++++ docs/react/react-intro.mdx | 60 +++++++++++++++++++++++++++ docusaurus.config.js | 1 - src/theme/DocItem/DocsRating.js | 4 +- 6 files changed, 146 insertions(+), 4 deletions(-) create mode 100644 docs/react/_category_.json create mode 100644 docs/react/create-react-app.mdx create mode 100644 docs/react/react-intro.mdx diff --git a/docs/index.mdx b/docs/index.mdx index ca57e99..ea1c3ac 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,5 +1,5 @@ --- -title: Welcome to CodeHarborHub Tutorials +title: Welcome to CodeHarborHub sidebar_label: Welcome to CodeHarborHub sidebar_position: 1 slug: / @@ -9,6 +9,8 @@ Hello, and welcome to CodeHarborHub! Our mission is to provide accessible and co +
+ With a team of experienced instructors and industry experts, we offer a diverse range of courses and learning paths tailored to meet your specific goals and interests. Join our community today and embark on your journey towards success in the tech industry! ## What is CodeHarborHub? @@ -40,6 +42,7 @@ There are many reasons to choose CodeHarborHub for your tech education needs. He - **Feedback and Support**: Our instructors and support team are here to help you every step of the way. If you have questions or need assistance, don't hesitate to reach out – we're here to ensure that you have a positive learning experience on CodeHarborHub. +
## Get Started Today! diff --git a/docs/react/_category_.json b/docs/react/_category_.json new file mode 100644 index 0000000..6f7bf74 --- /dev/null +++ b/docs/react/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "React", + "position": 22, + "link": { + "type": "generated-index", + "description": "React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies." + } + } \ No newline at end of file diff --git a/docs/react/create-react-app.mdx b/docs/react/create-react-app.mdx new file mode 100644 index 0000000..5aed4ca --- /dev/null +++ b/docs/react/create-react-app.mdx @@ -0,0 +1,72 @@ +--- +id: create-react-app +title: Getting Started with React +sidebar_label: Create React App +sidebar_position: 1 +description: Development and implementation the API of interaction of two sites +--- + +Welcome to the React tutorial series! In this comprehensive guide, we will take you through the fundamentals of React, a popular JavaScript library for building user interfaces. Whether you're a beginner or have some experience with web development, this tutorial will provide you with a solid foundation to start building dynamic and interactive web applications using React. + + + +
+ +### Content Agenda: + +1. Introduction to React + - What is React? + - Why use React? + - React's key features +2. Setting Up the Development Environment + - Installing Node.js and npm + - Creating a new React project + - Familiarizing with the project structure +3. Components and JSX + - Understanding React components + - Writing JSX code + - Rendering components +4. State and Props + - Managing component state + - Passing data using props + - Updating state and re-rendering +5. Handling Events + - React event handling + - Binding event handlers + - Handling form submissions +6. Working with Lists and Conditional Rendering + - Rendering dynamic lists of data + - Conditional rendering based on state +7. React Router + - Introduction to React Router + - Setting up routes + - Navigating between pages +8. Introduction to React Hooks + - Understanding Hooks + - useState and useEffect + - Custom Hooks +9. Working with APIs + - Fetching data from APIs + - Async/await and Promises + - Error handling and loading states +10. Deploying React Apps + - Preparing your app for deployment + - Deploying to platforms like Vercel or Netlify + - Optimizing your app for production + +Throughout this tutorial, we will provide practical examples, code snippets, and exercises to help reinforce your understanding of React. By the end of the series, you'll have the skills and knowledge to build your own React applications from scratch. + + + +
+ +## Feedback + +We value your feedback! If you have any suggestions, questions, or issues related to Create React App or this documentation, please don't hesitate to reach out to us. Your input helps us improve the documentation and provide a better experience for all users. + +To provide feedback, you can: +- Send us an email at ajaydhangar49@gmail.com +- Open an issue on our GitHub repository: [issue](https://github.com/codeharborhub/tutorial/issues) +- Join our community forum and engage in discussions: [Discussions](https://github.com/orgs/codeharborhub/discussions) + +We appreciate your contribution in making Create React App even better! \ No newline at end of file diff --git a/docs/react/react-intro.mdx b/docs/react/react-intro.mdx new file mode 100644 index 0000000..089ba20 --- /dev/null +++ b/docs/react/react-intro.mdx @@ -0,0 +1,60 @@ +--- +id: react-intro +title: Welcome to React +sidebar_label: Welcome +sidebar_position: 2 +description: Development and implementation the API of interaction of two sites +tags: [React, JavaScript library, User interfaces, Virtual DOM, Declarative syntax, UI components, Web development, Front-end, Single-page applications, Performance optimization, State management, Component-based architecture, JavaScript framework] +--- + +React is a JavaScript library for building user interfaces. It allows you to create reusable UI components and efficiently update and render them as the data changes. With its virtual DOM and declarative syntax, React makes it easier to build interactive and performant web applications. + + + +
+ +## Getting Started with React + +To get started with React, you can follow these steps: + +**1. Install Node.js:** React requires Node.js, so make sure you have it installed on your machine. You can download and install Node.js from the official website: [https://nodejs.org](https://nodejs.org) + +**2. Create a New React Project:** Open your terminal or command prompt and run the following command to create a new React project using Create React App: + + ```sh + npx create-react-app my-app + ``` + + This will create a new directory called `my-app` with a basic React project structure and configuration. + +**3. Run the Development Server:** Navigate to the project directory (`my-app`) and start the development server by running the following command: + + ```sh + cd my-app + npm start + ``` + + This will start the development server and open your React app in a web browser. You can make changes to the code in the project and see the live updates in the browser. + +**4. Learn React Fundamentals:** Once your project is set up, you can start learning the fundamentals of React. The official React documentation is an excellent resource to begin with: [https://reactjs.org/docs/getting-started.html](https://reactjs.org/docs/getting-started.html) + +**5. Build Your React App:** With the knowledge of React fundamentals, you can start building your own React applications. Use React components to structure your UI, manage state and props, and handle user interactions. Combine React with other libraries and tools to create powerful and interactive web applications. + + + +
+ +## Resources for Learning React + +Here are some additional resources to help you learn React: + +- **Official React Documentation:** [https://reactjs.org/docs](https://reactjs.org/docs/getting-started.html) +- **React Tutorial:** [https://reactjs.org/tutorial/tutorial.html](https://reactjs.org/tutorial/tutorial.html) +- **React Hooks Documentation:** [https://reactjs.org/docs/hooks-intro.html](https://reactjs.org/docs/hooks-intro.html) +- **React Router Documentation:** [https://reactrouter.com](https://reactrouter.com) +- **React Context API Documentation:** [https://reactjs.org/docs/context.html](https://reactjs.org/docs/context.html) +- **Awesome React:** [https://github.com/enaqx/awesome-react](https://github.com/enaqx/awesome-react) + +Remember, practice is key to mastering React. Explore and build various projects to gain hands-on experience and improve your React skills. + +Start your journey with React today and enjoy building awesome web applications with ease! If you have any questions or need assistance, feel free to reach out to us. We're here to help you succeed with React. \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index 460c174..5273f4d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -135,7 +135,6 @@ const config = { { type: "html", value: `
- Tutorials
HTML CSS diff --git a/src/theme/DocItem/DocsRating.js b/src/theme/DocItem/DocsRating.js index 9925068..09a3a60 100644 --- a/src/theme/DocItem/DocsRating.js +++ b/src/theme/DocItem/DocsRating.js @@ -12,9 +12,9 @@ const DocsRating = ({ label }) => { // const { colorMode } = useColorMode(); const DiscordInviteURL = "https://discord.gg/8p9Z6jkVru"; const openDocIssueURL = - `https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-error-report.md&title=Issue with codeharborhub.github.io${location.pathname}`; + `https://github.com/codeharborhub/tutorial/issues/new?assignees=&labels=&template=---doc-error-report.md&title=Issue with codeharborhub.github.io${location.pathname}`; const docEnhancementURL = - `https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-site-enhancement-request.md&title=Doc enhancement request for codeharborhub.github.io${location.pathname}`; + `https://github.com/codeharborhub/tutorial/issues/new?assignees=&labels=&template=---doc-site-enhancement-request.md&title=Doc enhancement request for codeharborhub.github.io${location.pathname}`; const [haveVoted, setHaveVoted] = useState(false); const [liked, setLiked] = useState(false);