A cheat sheet for React developers, providing a quick reference guide for common React concepts, syntax, and APIs.
- Components
- Props
- State
- Lifecycle Methods
- Hooks
- Event Handling
- Conditional Rendering
- List Rendering
- Forms
- Styling
- Routing
- Context API
- Error Boundaries
- Testing
| Syntax | Description |
|---|---|
| class MyComponent extends React.Component { } | Class component declaration |
| function MyComponent() { } | Functional component declaration |
| render() { } | Component's render method |
| this.props | Accessing props inside a component |
| Syntax | Description |
|---|---|
| props | Data passed to a component from its parent |
| this.props.propName | Accessing a specific prop value |
| defaultProps | Setting default props for a component |
| Syntax | Description |
|---|---|
| state = { } | Initializing component state |
| this.state | Accessing the current state |
| this.setState({ }) | Updating the component's state |
| useState(initialValue) | Using the state hook in functional components |
| Method | Description |
|---|---|
| componentDidMount() | Executed after the component is mounted |
| componentDidUpdate(prevProps, prevState) | Executed after a component is updated |
| componentWillUnmount() | Executed before the component is unmounted |
| Hook | Description |
|---|---|
| useState(initialValue) | Managing state in functional components |
| useEffect(callback, dependencies) | Executing side effects in functional components |
| useContext(context) | Accessing the value of a context |
| Syntax | Description |
|---|---|
| onClick={handler} | Handling click events |
| onChange={handler} | Handling input change events |
| onSubmit={handler} | Handling form submission |
| Syntax | Description |
|---|---|
| if (condition) { } | Conditional rendering with if statements |
| { condition && } | Conditional rendering with logical && operator |
| { condition ? : null } | Conditional rendering with ternary operator |
| Syntax | Description |
|---|---|
| array.map(item => { }) | Rendering a list of items |
| key={item.id} | Providing a unique key for list items |
| Syntax | Description |
|---|---|
| onChange={handler} | Handling form input change |
| onSubmit={handler} | Handling form submission |
| event.preventDefault() | Preventing the default form submission behavior |
| Syntax | Description |
|---|---|
| Inline Styles | Adding inline styles to a component |
| CSS Modules | Using CSS modules for component styling |
| Styled Components | Creating styled components with CSS-in-JS |
| Library/Framework | Description |
|---|---|
| react-router-dom | Declarative routing for React applications |
| Syntax | Description |
|---|---|
| React.createContext() | Creating a new context |
| Context.Provider | Providing a value to the context |
| Context.Consumer | Accessing the value from the context |
| Syntax | Description |
|---|---|
| componentDidCatch(error, info) | Handling errors within a component |
| static getDerivedStateFromError(error) | Updating state based on error |
| Library/Framework | Description |
|---|---|
| react-testing-library | Testing React components |
| jest``markdown | |
| Syntax | Description |
| ------------------------------------ | ------------------------------------------------ |
| jest.mock('moduleName') | Mocking a module for testing |
| render() | Rendering a component for testing |
| fireEvent.event(element, data) | Triggering an event on a component |
| expect(element).toHaveTextContent(text) | Asserting text content of an element |