react-basics

Overview

Welcome to react-basics! This repository is a comprehensive collection of various React.js functionalities and state management solutions. It's designed to demonstrate the use of Redux, Context API, Zustand, Recoil, along with various testing methods and optimization techniques in a React.js environment. Check out each feature branch based on your need if you would like to see detailed implementation of each functionality

Features

• Redux Implementation: State management using Redux, showcasing actions, reducers, and store configurations.
• Context API Usage: Utilizing Context API for state management and theme toggling examples.
• Zustand State Management: Simple, fast and scalable state management using Zustand.
• Recoil for State Management: Implementing Recoil to manage atom and selector based states.
• Testing: Includes test cases for components and state management implementations.
• Optimization Techniques: Demonstrations of React performance optimization techniques.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js (version 12 or above)
• Yarn or npm installed
• Basic understanding of React.js concepts

Installation and Setup

1. clone the repository

git clone https://github.com/jasonkang14/react-basics.git
cd react-basics

2. Install dependencies:

yarn install
# or
npm install

Running the Project with Vite

To run the project using Vite, follow these steps:

1. Start the development server:

# the original command is `dev` but I have changed it to `start` in package.json to integrate some tools easier
yarn start
# or
npm run start

2. This will start the Vite development server.

Open your browser: Navigate to http://localhost:5173 to view the app.

Building for Production

To build the project for production, run:

yarn build
# or
npm run build

This command will generate a dist folder which contains the production build of your app.

Contributing

Contributions to enhance this project are welcome. Feel free to fork this repository and submit pull requests.

Contact

If you have any questions or suggestions, please feel free to contact me at [email protected].