https://github.com/kartikk-26/react-cra-practise
This repository contains my React course practice projects, built using Create React App (CRA). It is for practicing React and building websites through hands-on exercises and projects.
https://github.com/kartikk-26/react-cra-practise
nodejs reactjs redux redux-toolkit
Last synced: 6 months ago
JSON representation
This repository contains my React course practice projects, built using Create React App (CRA). It is for practicing React and building websites through hands-on exercises and projects.
- Host: GitHub
- URL: https://github.com/kartikk-26/react-cra-practise
- Owner: Kartikk-26
- Created: 2024-10-18T15:29:19.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-11-01T09:06:26.000Z (11 months ago)
- Last Synced: 2025-02-14T09:43:57.990Z (8 months ago)
- Topics: nodejs, reactjs, redux, redux-toolkit
- Language: JavaScript
- Homepage:
- Size: 191 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# ⚛️ React-Course-Practice
This repository tracks my **React Course Practice** using **Create React App (CRA)**. It showcases the projects and exercises I’ve completed as part of my training, covering both basic and advanced React concepts.
This space serves as a record of my learning progress and hands-on application of React techniques.
## 📑 Table of Contents
- [Overview](#-overview)
- [Create React App](#-create-react-app)
- [Prerequisites](#-prerequisites)
- [Getting Started](#-getting-started)
- [Course Topics Covered](#-course-topics-covered)
- [Contributing](#-contributing)
- [Connect with Me](#-connect-with-me)
## 📝 Overview
This repository is dedicated to documenting my journey in learning **React** through a structured course, focusing on real-world projects and daily practice.
It emphasizes mastering key concepts like props, hooks, state management, and more advanced topics like Redux and Context API, all while building modern web applications with **Create React App**.
## ⚡ Create React App
**Create React App (CRA)** is the foundation of the projects in this repository. CRA provides a streamlined environment for React development, offering everything needed to build and deploy React applications with minimal configuration.
To learn more about CRA, visit [the official CRA documentation](https://create-react-app.dev/docs/getting-started).
## ⚙️ Prerequisites
Before getting started, ensure you have the following installed:
- **Node.js and npm** : You can download them from [nodejs.org](https://nodejs.org/).
- **React Developer Tools** : A must-have browser extension for React developers, enabling easier debugging and component inspection.
To verify your Node.js installation, run:
```bash
node --version
```
## 💬 Getting Started
To get started with this repository, follow these steps:
### 1️⃣ Clone the repository
```bash
git clone https://github.com/Kartikk-26/React-CRA-Practise.git
```
### 2️⃣ Navigate to the project directory
```bash
cd React-CRA-Practise
```
### 3️⃣ Install dependencies
```bash
npm install
```
### 4️⃣ Start the development server
```bash
npm start
```
You can now view the application in your browser at `http://localhost:3000`.
## 📚 Course Topics Covered
### Basic Topics:
1. **Props and Prop Drilling** : Passing data between components efficiently.
2. **Hooks**: Including `useState`, `useEffect`, and `useRef` for state and lifecycle management.
3. **Forms in React** : Building controlled and uncontrolled forms.
4. **Mapping Components** : Rendering lists of items using the `map()` function.
5. **Conditional Rendering** : Displaying elements conditionally based on state.
6. **Node Package Manager (NPM)** : Managing project dependencies.
### Advanced Topics:
1. **React Router DOM** : Enabling client-side routing in React applications.
2. **Code Optimization Tips** : Best practices for improving performance.
3. **Redux** : Implementing global state management.
4. **Redux Toolkit** : Simplifying Redux development with concise syntax.
5. **Redux Persist** : Persisting state across sessions.
6. **Context API** : Sharing state without prop drilling.
7. **Best Folder Structure** : Organizing React projects for maintainability.
## 👨💻 Continuous Learning and Development
This repository is regularly updated as I continue my React course, applying both basic and advanced concepts.
New projects and examples are added as I progress through the curriculum.
## 🤝 Contributing
Contributions are welcome! If you want to contribute, here’s how:
1. **Fork the repository**: Click the "Fork" button at the top right of the page.
2. **Create a new branch**: `git checkout -b feature/your-feature`.
3. **Commit your changes**: `git commit -m 'Add new feature'`.
4. **Push your branch**: `git push origin feature/your-feature`.
5. **Open a pull request**: In your GitHub repo, go to "Pull Requests," click "New Pull Request," and choose your branch.
## 💡 Connect with Me
Feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/-kartikjain/) to discuss this project or collaborate on future work. I’m always eager to connect with fellow developers and enthusiasts to exchange knowledge and ideas.
Stay tuned for more updates as I progress through this React course!