This repository documents everything I'm learning about ReactJS β from foundational concepts to hands-on examples. The goal is to help others learn React along the way, using structured markdown files, example code, and explanations.
Go to:
src/learning-docs/
Inside this folder, youβll find detailed documentation:
intro.mdβ ReactJS basics, project setup, JSX, components, props, rendering logiccomponents.mdβ Hooks (useState,useEffect), lifting state up, conditional rendering, event handlingstate_management.mdβ Code snippets and use cases for creating components, rendering lists, and managing user interaction
Covers:
- What is ReactJS and the Virtual DOM
- UI workflow between browser, UI server, API, and DB
- Structure of a React project (
public/,src/,App.js,index.js) - JSX basics: how it differs from plain JS, why we use it
- Creating and using components
- Props and passing data
- Iterating with
.map()in JSX - Conditional rendering using ternary, if-else, &&, switch
- Using fragments and styling in JSX
- Creating reusable functional components
- Component nesting
- Styling with
classNameand inlinestyleobjects (camelCase!) - Using curly braces to embed JS expressions in JSX
- Rendering lists with
.map()and uniquekeyprops - Conditional rendering patterns (
if, ternary) - Handling user events with
onClickand event handlers
Includes:
- Introduction to
useStatehook and its syntax - Storing and updating state in a component
- How each component maintains its own state
- Sharing state by lifting it to a parent component
- Passing state and update functions as
props - Synchronizing UI updates across multiple components
To create your first project:
npx create-react-app my-app
cd my-app
npm startYou'll be able to start coding in App.js under the src/ folder.
This repo is meant to serve as:
- A personal guide to React
- A resource for beginners
- A place to practice and demonstrate clean documentation habits and GitHub workflows (commits, PRs, branches)
If youβre also learning React or want to improve this documentation, feel free to fork this repo, make a change, and open a pull request!