https://github.com/yashksaini-coder/react-fundamentals
Simple REACT fundamentals
https://github.com/yashksaini-coder/react-fundamentals
Last synced: 2 months ago
JSON representation
Simple REACT fundamentals
- Host: GitHub
- URL: https://github.com/yashksaini-coder/react-fundamentals
- Owner: yashksaini-coder
- Created: 2024-10-06T15:18:26.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-02T15:14:25.000Z (about 1 year ago)
- Last Synced: 2025-04-11T14:59:47.718Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 339 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Here's a sample README for React fundamentals:
---
# React Fundamentals
This repository covers the fundamentals of React, a popular JavaScript library for building user interfaces. It is designed to provide a solid foundation for beginners and serve as a reference for developers familiarizing themselves with core React concepts.
## Table of Contents
- [Introduction](#introduction)
- [Installation](#installation)
- [Core Concepts](#core-concepts)
- [JSX](#jsx)
- [Components](#components)
- [Props](#props)
- [State](#state)
- [Lifecycle Methods](#lifecycle-methods)
- [Hooks](#hooks)
- [Routing](#routing)
- [State Management](#state-management)
- [Styling in React](#styling-in-react)
- [Conclusion](#conclusion)
## Introduction
React is a powerful JavaScript library developed by Facebook that makes it easy to build reusable UI components. It allows developers to build fast, scalable, and dynamic web applications with a component-based architecture. React focuses on the "View" in MVC (Model-View-Controller) and can be used in single-page applications (SPAs).
## Installation
To get started with React, ensure that you have [Node.js](https://nodejs.org/) installed on your system.
### Create a React App
The easiest way to start a React project is by using **Create React App**, a command-line tool that sets up everything you need to start building with React.
```bash
npx create-react-app my-app
cd my-app
npm start
```
This will launch the development server and you can view the app in your browser at `http://localhost:3000`.
State
State is an object that represents the dynamic data of a component. Unlike props, state can be modified within the component, and it allows for interactive and dynamic UIs.
Example:
jsx
Copy code
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
{this.state.count}
this.setState({ count: this.state.count + 1 })}>
Increment
);
}
}
Lifecycle Methods
React components have lifecycle methods that allow you to run code at different stages of a component's existence, such as when it's mounted or updated. Common lifecycle methods include:
componentDidMount()
componentDidUpdate()
componentWillUnmount()
These methods are primarily used in class components.
Hooks
Hooks are a relatively new addition to React (introduced in version 16.8) that allow you to use state and other React features in functional components. Common hooks include:
useState for managing state
useEffect for handling side effects
Example:
jsx
Copy code
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
setCount(count + 1)}>
Click me
);
}
Routing
React Router is a standard library for routing in React applications. It enables the navigation between different pages and keeps the UI in sync with the URL.
Install React Router:
bash
Copy code
npm install react-router-dom
Example:
jsx
Copy code
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
);
}