Styled React Concepts and Syntax
Important React Concepts and Syntax
1. React Components
- Class Components:
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return <h1>Hello, React!</h1>;
- Functional Components:
const MyComponent = () => {
return <h1>Hello, React!</h1>;
};
2. JSX (JavaScript XML)
const element = <h1>Hello, World!</h1>;
3. Props
const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;
<Greeting name="Wahab" />;
4. State
- Class Component State:
class Counter extends React.Component {
state = { count: 0 };
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
</div>
);
- Functional Component State (Hooks):
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
5. Lifecycle Methods
- Class Components:
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component Mounted');
componentDidUpdate() {
console.log('Component Updated');
componentWillUnmount() {
console.log('Component Will Unmount');
render() {
return <h1>Hello!</h1>;
- Functional Components (using useEffect):
import { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
console.log('Component Mounted');
return () => {
console.log('Component Will Unmount');
};
}, []);
return <h1>Hello!</h1>;
};
6. Handling Events
const Button = () => {
const handleClick = () => {
alert('Button Clicked!');
};
return <button onClick={handleClick}>Click Me</button>;
};
7. Lists and Keys
const List = ({ items }) => (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
<List items={['Apple', 'Banana', 'Cherry']} />;
8. Conditional Rendering
const Greeting = ({ isLoggedIn }) => {
return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>;
};
9. Forms and Controlled Components
const Form = () => {
const [value, setValue] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert(value);
};
return (
<form onSubmit={handleSubmit}>
<input value={value} onChange={(e) => setValue(e.target.value)} />
<button type="submit">Submit</button>
</form>
);
};
10. Context API
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
const Child = () => {
const theme = useContext(ThemeContext);
return <div>Theme: {theme}</div>;
};
const App = () => (
<ThemeContext.Provider value="dark">
<Child />
</ThemeContext.Provider>
);
11. React Router
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const App = () => (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
12. Redux (State Management)
- Setting Up a Store:
import { createStore } from 'redux';
const reducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
};
const store = createStore(reducer);
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }
13. React Hooks
- Common Hooks:
1. useState
2. useEffect
3. useContext
4. useReducer
5. useRef
