ReactJS-From_Basic

React Learning Project - 30 Days Web Development Journey

This is a React learning project created as part of a 30-day web development journey. The project demonstrates various React concepts and hooks through practical examples.

Project Overview

This project was bootstrapped with Create React App and contains multiple React components showcasing different concepts:

Components Built

1. UseEffect Component (useEffect.js) - Currently Active

   • Demonstrates the useEffect hook with state dependencies
   • Features three interactive buttons that update state
   • Shows how useEffect responds to state changes
   • Displays clicked values dynamically

2. Incrementor Component (Incrementor.js)

   • Simple counter application using useState hook
   • Increment and decrement functionality
   • Demonstrates basic state management

3. Form Component (From.js)

   • Basic form with input fields (name, email, password)
   • Event handling with form inputs
   • Shows form interaction patterns

4. Data Component (Data.js)

   • Works with JSON data (datas.json)
   • Demonstrates data mapping and rendering
   • Uses useState to manage data state

Key React Concepts Covered

• ✅ React Hooks (useState, useEffect)
• ✅ Component State Management
• ✅ Event Handling
• ✅ Conditional Rendering
• ✅ Data Mapping and JSON Integration
• ✅ Component Import/Export

Project Structure

src/
├── App.js          # Main App component
├── index.js        # Entry point
├── useEffect.js    # UseEffect demo (currently active)
├── Incrementor.js  # Counter component
├── From.js         # Form component
├── Data.js         # Data rendering component
└── datas.json      # Sample JSON data

Current Status

The project is currently showcasing the UseEffect Component which demonstrates:

• Interactive buttons that update component state
• useEffect hook monitoring state changes
• Console logging of state updates
• Dynamic content rendering based on user interaction

Getting Started & Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Learning Progress

This project is part of a structured learning approach to React development. Each component demonstrates specific React patterns and best practices:

• Day 1-3: Basic component creation and JSX
• Day 4-7: State management with useState
• Day 8-10: Side effects and lifecycle with useEffect
• Day 11-14: Form handling and user input
• Day 15-20: Data fetching and JSON integration

Next Steps

Future enhancements planned:

• Add more complex state management
• Implement API data fetching
• Add routing between components
• Style components with CSS/styled-components
• Add form validation
• Implement local storage

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify