Welcome to My React Journey – a personal log of everything I'm learning as I dive into React.js. This repo includes practice projects, challenges, and code snippets that reflect my progress through the fundamentals of React.
- Setting up static pages with React
- Writing first React code
- Working with Vite for local development
- Understanding libraries vs frameworks
- Using
React.createElement - Learning JSX syntax and why React is powerful
- Creating simple components and handling markup
- Using Fragments
- Building custom components (including parent/child structure)
- Styling with classes in React
- Organizing components effectively
- Structuring projects mentally before starting
- Creating a navbar and main content section for a ReactFacts project
- Adding background images and styling bullet points
A basic React static site built using Vite, showcasing:
- JSX structure
- Component-based layout
- Basic CSS styling
🔗 Live Demo: akbar-simple-react-project-1.netlify.app
📂 Folder: React-project1
- Creating a reusable Entry component
- Understanding and using props
- Writing JavaScript inside JSX
- Passing data into components
- Receiving and destructuring props
- Using non-string props
- Importing static assets
- Looping with .map() in JSX
- Rendering arrays of components
- The importance of the key prop
- Passing entire objects as props
- Using the spread operator for cleaner prop-passing
A more advanced React project focused on:
- Reusable components
- Dynamic content rendering using props
- .map() for rendering lists
- Managing data structures
- Passing and destructuring props
- Importing static assets
- Best practices for clean, scalable component architecture
🔗 Live Demo: akbar-react-project-2.netlify.app 📂 Folder: React-Project-2
- Section 3 focuses on state, forms, and conditional rendering in React. Here's a summary of the concepts being explored:
- Props vs. State in React
- Using the useState hook
- Updating state (primitives, arrays, and objects)
- State change with callbacks
- Toggling state with ternary and &&
- React forms: input, textarea, radio, checkbox, select
- Handling form submissions
- Conditional rendering (&&, ternary operators)
- Passing state between components
- Shared vs. local state
- Dynamically applying styles
- Real-world app simulation with interactive challenges
- Fetching data from APIs and handling responses
- Props vs. State in React
- Using the useState hook
- Updating state (primitives, arrays, and objects)
- State change with callbacks
- Toggling state with ternary and && operators
- React forms: input, textarea, radio, checkbox, select
- Handling form submissions
- Conditional rendering (&&, ternary operators)
- Passing state between components
- Shared vs. local state
- Dynamically applying styles
- Real-world app simulation with interactive challenges
- Fetching data from APIs and handling responses
- An interactive recipe app that fetches recipes based on ingredients entered. Concepts included:
- Managing complex state with arrays and objects
- Forms and controlled inputs
- API integration with Hugging Face for recipe generation
- Conditional rendering for loading and results
- Markdown rendering for recipes
🔗 Live Demo: akbar-react-project-2.netlify.app 📂 Folder: React-project-3
🚧 Section 4: Coming Up
- In this section, I'm diving deeper into advanced React concepts with a fun Meme Generator App project. Here's what’s on the roadmap:
- Meme Generator Starting Point
- Managing state for meme data
- Controlled Components (Parts 1 & 2)
- Planning and performing data fetches
- Functional programming in React
- Fetching meme data from an API
- Introduction to useEffect
- useEffect syntax and default behavior
- Understanding the dependencies array
- useEffect with empty dependency array
- useEffect quizzes and practical exercises
- Using useEffect to fetch memes
- Combined state and effect practices
- Cleanup functions in useEffect
- Generating a random meme
- Sneak peek into Refs in React
- Practical use: scrollIntoView() with useRef
- Fixing iframe scroll bug
- Wrapping up with a Section 4 summary
- Stay tuned as I implement, break, fix, and learn from building an interactive meme generator powered by external APIs and React hooks!
- Meme Generator Starting Point
- Managing state for meme data
- Controlled Components (Part 1 & 2)
- Planning and performing data fetches
- Functional programming in React
- Fetching meme data from an API
- Introduction to
useEffect useEffectsyntax and default behavior- Understanding the dependencies array
useEffectwith empty dependency arrayuseEffectquizzes and practical exercises- Using
useEffectto fetch memes - Combined state and effect practices
- Cleanup functions in
useEffect - Generating a random meme
- Introduction to
useRef - Practical use:
scrollIntoView()withuseRef - Fixing iframe scroll bug
A fun and interactive project to generate memes with random images and custom text. Focus areas:
- Working with form inputs
- Fetching and managing meme data from an API
- Generating and displaying random images
- Leveraging
useEffectanduseRef
🔗 Live Demo: (akbar-react-project-4.netlify.app)[https://react-meme-generator-akbar.netlify.app/]
📂 Folder: React-project-4
🎉 I've officially completed the entire React course!
From static pages to full interactivity with forms, APIs, and hooks — this journey has been transformative.
I'm now planning to:
- Start building full-stack projects using React + external APIs
- Explore advanced patterns like context, reducers, and custom hooks
- Learn TypeScript for safer React development
- Dive into backend technologies (Node.js, Express, MongoDB)
- Deploy professional-level React apps
cd project-folder-name
npm install
npm run dev