Scribd
Upload
4 views

Styled React Concepts and Syntax

This document outlines essential React concepts and syntax, including components, JSX, props, state management, lifecycle methods, event handling, lists, conditional rendering, forms, context API, React Router, Redux, and common hooks. It provides code examples for both class and functional components, demonstrating how to implement these concepts effectively. The content serves as a comprehensive guide for understanding and utilizing React in web development.

Uploaded by

mowesis739
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Styled React Concepts and Syntax

This document outlines essential React concepts and syntax, including components, JSX, props, state management, lifecycle methods, event handling, lists, conditional rendering, forms, context API, React Router, Redux, and common hooks. It provides code examples for both class and functional components, demonstrating how to implement these concepts effectively. The content serves as a comprehensive guide for understanding and utilizing React in web development.

Uploaded by

mowesis739
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like