This repository contains four beginner-friendly JavaScript projects built using React.js:
- Context API Example - Demonstrates global state management using React's Context API.
- Context Language Toggle - Demonstrates global state management using React's Context API.
- Tic-Tac-Toe Game - A simple interactive game built with React.
- Todo App - A CRUD-based task management application.
1๏ธโฃ Context API Example
2๏ธโฃ Context Language Toggle
3๏ธโฃ Tic-Tac-Toe Game
4๏ธโฃ Todo App (Expo)
- ๐น Context API Example Repo
- ๐น Context Language Toggle Repo
- ๐น Tic-Tac-Toe Repo
- ๐น Todo App Repo
Overview: A React app that allows users to toggle between different programming languages using the Context API.
Technologies Used:
- React.js
- Context API
- Hooks (useState, useContext)
Features:
- Supports toggling between JavaScript and Python.
- Uses Context API for global state management.
- Dynamically updates displayed language.
Run the Project:
cd context-language-toggle
npm install
npm start
Overview: A classic Tic-Tac-Toe game built using React, allowing two players to take turns making moves.
Technologies Used:
- React.js
- useState Hook
- Conditional Rendering
Features:
- Two-player gameplay.
- Win detection logic.
- Restart button to reset the game.
- 3x3 grid with interactive UI.
Run the Project:
cd tic-tac-toe
npm install
npm start
Overview: A React Native task management application that allows users to add, edit, and remove tasks.
Technologies Used:
- React Native
- useState Hook
- FlatList Component
Features:
- Add new tasks via a text input field.
- Edit existing tasks with an "Edit" button.
- Delete tasks with a "Remove" button.
- Uses FlatList for optimized task rendering.
Run the Project:
cd todo-app
npm install
npx react-native run-android # For Android
npx react-native run-ios # For iOS
- Clone this repository:
git clone https://github.com/am-i-groot/coderbyte-javascript-challenges cd coderbyte-javascript-challenges
- Navigate to any project folder and install dependencies:
cd project-folder npm install
- Start the development server:
npm start
Feel free to fork the repository, submit issues, and contribute improvements.
This project is licensed under the MIT License.