ReactJS

 

Getting Started

• Install React:

  npx create-react-app my-app
  cd my-app
  npm start
  

• Basic Component:

  import React from 'react';
  
  const MyComponent = () => {
    return <h1>Hello, World!</h1>;
  };
  
  export default MyComponent;
  

---

JSX (JavaScript XML)

• Embed expressions in curly braces:

  const name = "React";
  <h1>Hello, {name}!</h1>
  

• Conditional rendering:

  jsx
  const isLoggedIn = true;
  <div>{isLoggedIn ? 'Welcome!' : 'Please log in.'}</div>;
  

• Apply CSS:

  jsx
  <div style={{ color: 'blue', fontSize: '20px' }}>Styled Text</div>
  

---

Props

• Passing data to child components:

  const Welcome = ({ name }) => <h1>Hello, {name}!</h1>;
  <Welcome name="John" />;
  

• Default props:

  jsx
  Welcome.defaultProps = {
    name: 'Guest',
  };
  

---

State (useState Hook)

• Manage component state:

  import React, { useState } from 'react';
  
  const Counter = () => {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };
  

---

Effect (useEffect Hook)

• Handle side effects (e.g., fetching data):

  import React, { useEffect, useState } from 'react';
  
  const FetchData = () => {
    const [data, setData] = useState([]);
  
    useEffect(() => {
      fetch('https://api.example.com/data')
        .then((response) => response.json())
        .then((data) => setData(data));
    }, []); // Empty array: runs only on mount
  
    return <div>{JSON.stringify(data)}</div>;
  };
  

---

Events

• Handling events:

  const handleClick = () => alert('Button clicked!');
  <button onClick={handleClick}>Click Me</button>;
  

• Passing parameters:

  jsx
  <button onClick={() => handleClick('React')}>Click Me</button>;
  

---

Forms and Inputs

• Controlled inputs:

  const [value, setValue] = useState('');
  
  const handleChange = (event) => setValue(event.target.value);
  
  return <input type="text" value={value} onChange={handleChange} />;
  

---

Lists

• Rendering lists:

  const items = ['React', 'Angular', 'Vue'];
  
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
  

---

Routing (React Router)

• Install React Router:

  npm install react-router-dom
  

• Basic example:

  import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
  
  const App = () => (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route path="/" exact component={() => <h1>Home</h1>} />
        <Route path="/about" component={() => <h1>About</h1>} />
      </Switch>
    </Router>
  );
  

---

Lifecycle Methods

• Using Hooks for lifecycle:
• Mounting: useEffect(() => {}, []);
• Updating: useEffect(() => {}, [dependencies]);
• Unmounting:

  
  useEffect(() => {
    return () => {
      // Cleanup code here
    };
  }, []);
  

• Mounting:
• constructor()
• getDerivedStateFromProps()
• render()
• ComponentDidMount()
• Updating
• getDerivedStateFromProps()
• ShouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• ComponentDidUpdate()
• Ummounting
• ComponentWillUnmount()

---

Context API

• Context for global state:

  import React, { createContext, useContext } from 'react';
  
  const ThemeContext = createContext('light');
  
  const App = () => (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
  
  const Toolbar = () => {
    const theme = useContext(ThemeContext);
    return <div>Theme: {theme}</div>;
  };
  

---

Custom Hooks

• Create reusable logic:

  const useCounter = (initialValue = 0) => {
    const [count, setCount] = useState(initialValue);
    const increment = () => setCount(count + 1);
    return [count, increment];
  };
  
  const Counter = () => {
    const [count, increment] = useCounter();
    return <button onClick={increment}>Count: {count}</button>;
  };
  

---

Optimizations

• React.memo: Prevent unnecessary renders.

  const MemoizedComponent = React.memo(MyComponent);

• useCallback: Memoize functions.

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);
  

• useMemo: Memoize values.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

Full Expansions

imr - Import React

import * as React from "react";

imrc - Import React, Component

import * as React from "react";

import { Component } from "react";

imrd - Import ReactDOM

import ReactDOM from "react-dom";

imrs - Import React, useState

import * as React from "react";

import { useState } from "react";

imrse - Import React, useState, useEffect

import * as React from "react";

import { useState, useEffect } from "react";

impt - Import PropTypes

import PropTypes from "prop-types";

impc - Import PureComponent

import * as React from "react";

import { PureComponent } from "react";

cc - Class Component

class | extends React.Component {

  render() {

    return <div>|</div>

  }

}

export default |;

ccc - Class Component With Constructor

class | extends Component {

  constructor(props) {

    super(props);

    this.state = { | };

  }

  render() {

    return ( | );

  }

}

export default |;

cpc - Class Pure Component

class | extends PureComponent {

  state = { | },

  render() {

    return ( | );

  }

}

export default |;

ffc - Function Component

function (|) {

    return ( | );

}

export default |;

sfc - Stateless Function Component (Arrow function)

const | = props => {

  return ( | );

};

export default |;

cdm - componentDidMount

componentDidMount() {

  |

}

uef - useEffect Hook

useEffect(() => {

  |

}, []);

ucb - useCallback Hook

useCallback((val) => {

  |

}, []);

cwm - componentWillMount

//WARNING! To be deprecated in React v17. Use componentDidMount instead.

componentWillMount() {

  |

}

cwrp - componentWillReceiveProps

//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.

componentWillReceiveProps(nextProps) {

  |

}

gds - getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {

  |

}

scu - shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {

  |

}

cwu - componentWillUpdate

//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.

componentWillUpdate(nextProps, nextState) {

  |

}

cdu - componentDidUpdate

componentDidUpdate(prevProps, prevState) {

  |

}

cwun - componentWillUnmount

componentWillUnmount() {

  |

}

cdc - componentDidCatch

componentDidCatch(error, info) {

  |

}

gsbu - getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {

  |

}

ss - setState

this.setState({ | : | });

ssf - Functional setState

this.setState(prevState => {

  return { | : prevState.| }

});

usf - Declare a new state variable using State Hook

const [|, set|] = useState();

Hit Tab to apply CamelCase to function. e.g. [count, setCount]

ren - render

render() {

  return (

    |

  );

}

rprop - Render Prop

class | extends Component {

  state = { | },

  render() {

    return this.props.render({

      |: this.state.|

    });

  }

}

export default |;

hoc - Higher Order Component

function | (|) {

  return class extends Component {

    constructor(props) {

      super(props);

    }

    render() {

      return < | {...this.props} />;

    }

  };

}

cpf - Class Property Function

  | = (e) => {

    |

  }