Learning Center - react
https://codingchoice.com/learn/
2026-05-03T10:41:15+00:00Learning Center
https://codingchoice.com/learn/
https://codingchoice.com/learn/_media/logo.pngtext/html2025-02-11T01:37:20+00:00Anonymous (anonymous@undisclosed.example.com)components
https://codingchoice.com/learn/react/components?rev=1739237840&do=diff
Components in React
React applications are built using components, which can be functional or class-based.
Functional Components
function Greeting() {
return <h1>Hello, World!</h1>;
}
export default Greeting;
Class Components
import React, { Component } from 'react';
class Greeting extends Component {
render() {
return <h1>Hello, World!</h1>;
}
}
export default Greeting;text/html2025-02-11T01:51:19+00:00Anonymous (anonymous@undisclosed.example.com)fetching_data
https://codingchoice.com/learn/react/fetching_data?rev=1739238679&do=diff
Fetching Data in React
Fetching data from an API using fetch or Axios.
import { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<ul>
{data.map(item => <li key={item.id}>{item.title}</li>)}
</ul>
);
}
export default DataFetcher;text/html2025-02-11T01:46:55+00:00Anonymous (anonymous@undisclosed.example.com)forms_in_react
https://codingchoice.com/learn/react/forms_in_react?rev=1739238415&do=diff
Forms in React
Handling forms in React uses state for controlled components:
import { useState } from 'react';
function Form() {
const [name, setName] = useState('');
return (
<form>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
<button type="submit">Submit</button>
</form>
);
}text/html2025-02-11T01:34:45+00:00Anonymous (anonymous@undisclosed.example.com)getting_started
https://codingchoice.com/learn/react/getting_started?rev=1739237685&do=diff
Setting Up React
Installing React
To set up a React project, use the following command:
npx create-react-app my-app
cd my-app
npm start
Alternatively, for a Vite-powered React app:
npx create-react-app my-app
cd my-app
npm starttext/html2025-02-11T01:45:49+00:00Anonymous (anonymous@undisclosed.example.com)handling_events
https://codingchoice.com/learn/react/handling_events?rev=1739238349&do=diff
Handling Events
Event handling in React follows camelCase convention:
function Button() {
const handleClick = () => alert('Button Clicked!');
return <button onClick={handleClick}>Click Me</button>;
}text/html2025-02-11T02:15:09+00:00Anonymous (anonymous@undisclosed.example.com)hooks
https://codingchoice.com/learn/react/hooks?rev=1739240109&do=diff
React Hooks
React Hooks revolutionized the way developers build React applications by allowing functional components to manage state and side effects. This guide explores advanced hooks and their practical applications.
Understanding Hooks
Hooks enable function components to use React features without writing a class. Advanced hooks help in optimizing performance, managing complex state logic, and handling side effects efficiently.text/html2025-02-11T02:01:58+00:00Anonymous (anonymous@undisclosed.example.com)introduction
https://codingchoice.com/learn/react/introduction?rev=1739239318&do=diff
Introduction to React
React is a powerful JavaScript library for building user interfaces, particularly single-page applications where efficient, interactive, and reusable UI components are required. It was developed by Facebook and is widely used in modern web development.text/html2025-02-11T01:35:58+00:00Anonymous (anonymous@undisclosed.example.com)jsx
https://codingchoice.com/learn/react/jsx?rev=1739237758&do=diff
JSX: JavaScript XML
JSX is a syntax extension for JavaScript that allows writing HTML within JavaScript.
const element = <h1>Hello, React!</h1>;text/html2025-02-11T01:44:49+00:00Anonymous (anonymous@undisclosed.example.com)lifecycle_methods
https://codingchoice.com/learn/react/lifecycle_methods?rev=1739238289&do=diff
Class components have lifecycle methods such as:
* componentDidMount() – Runs after the component is rendered.
* componentDidUpdate() – Runs when component updates.
* componentWillUnmount() – Runs before component is removed.
Functional components use hooks liketext/html2025-02-11T01:39:08+00:00Anonymous (anonymous@undisclosed.example.com)props_and_state
https://codingchoice.com/learn/react/props_and_state?rev=1739237948&do=diff
Props and State
Props
Props (short for properties) are read-only attributes passed from parent to child components.
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
State
State is used for dynamic and interactive components.text/html2025-02-11T01:48:48+00:00Anonymous (anonymous@undisclosed.example.com)react_router
https://codingchoice.com/learn/react/react_router?rev=1739238528&do=diff
React Router
React Router is used for navigation in single-page applications.
npm install react-router-dom
Example of routing:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;text/html2025-02-11T02:16:37+00:00Anonymous (anonymous@undisclosed.example.com)sidebar
https://codingchoice.com/learn/react/sidebar?rev=1739240197&do=diff
* Introduction
* Setting Up React
* JSX: JavaScript XML
* Components in React
* Props and State
* Lifecycle Methods
* Handling Events
* Forms in React
* React Router
* State Management
* Fetching Data
* React Hookstext/html2025-02-11T01:50:22+00:00Anonymous (anonymous@undisclosed.example.com)state_management
https://codingchoice.com/learn/react/state_management?rev=1739238622&do=diff
State Management with Redux
Redux helps manage state in larger applications.
npm install redux react-redux @reduxjs/toolkit
Example Redux setup:
import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
},
});
const store = configureStore({ reducer: { counter: counterSli…