ReactJS Cheat Sheet – Cheat

import React from 'react';
import ReactDOM from 'react-dom';

// Simple React component
function App() {
   return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

// Use Create React App to start a new project:
    > npx create-react-app my-appName
    
    //Run this command to move to the my-react-app directory:
    > cd my-appName
    
    //Run this command to run the React application my-appName:
    > npm start

// To upgrade React:
    > npm install react@latest react-dom@latest

const App = () => {
    const [name, setName] = React.useState('React');
    return <h1>Hello, {name}!</h1>;
};

function Welcome() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <p>This is a simple component.</p>
    </div>
  );
}

ReactDOM.render(<Welcome />, document.getElementById('root'));

const element = <h1>Hello, JSX!</h1>;
ReactDOM.render(element, document.getElementById('root'));

// Functional component
function MyComponent() {
  return <div>This is a functional component</div>;
}

// Class component
class MyClassComponent extends React.Component {
  render() {
    return <div>This is a class component</div>;
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

function Welcome(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

const items = ['Item 1', 'Item 2', 'Item 3'];

function ItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

function MyForm() {
  const [value, setValue] = React.useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + value);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  // Expensive calculation here
  return <div>{data}</div>;
});

function StyledComponent() {
  const style = { color: 'blue', fontSize: '20px' };
  return <div style={style}>Styled Text</div>;
}

// styles.scss
/*
$primary-color: #333;

.container {
  color: $primary-color;
  padding: 20px;
}
*/

// In your component file
import './styles.scss';

function StyledComponent() {
  return <div className="container">Sass Styled Text</div>;
}

Hooks are functions that let you use state and other React features without writing a class.

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function Example() {
  React.useEffect(() => {
    document.title = 'React Hook Example';
  });

  return <div>Check the document title</div>;
}

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = React.useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

function FocusInput() {
  const inputRef = React.useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

function List({ items, onItemClick }) {
  const handleClick = React.useCallback((item) => {
    onItemClick(item);
  }, [onItemClick]);

  return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={() => handleClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

function ExpensiveComponent({ data }) {
  const calculatedValue = React.useMemo(() => {
    // Expensive calculation
    return data.reduce((sum, value) => sum + value, 0);
  }, [data]);

  return <div>Calculated Value: {calculatedValue}</div>;
}