React.js Commands Cheat Sheet

Setup

Install Node.js and npm

• Download and install Node.js from the official website.

Create a New React Application

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

Install Dependencies

• npm install [package-name]

Uninstall Dependencies

• npm uninstall [package-name]

Running the Application

Start Development Server

• npm start

Build for Production

• npm run build

Run Tests

• npm test

Eject Configuration (only if necessary)

• npm run eject

Working with JSX

Basic JSX

• Define JSX elements.

Embedding Expressions

• Embed JavaScript expressions in JSX.

Attributes in JSX

• Use standard HTML attributes in JSX.

Conditional Rendering

• Render elements condition

Working with JSX

Basic JSX

• Define JSX elements.

Embedding Expressions

• Embed JavaScript expressions in JSX.

Attributes in JSX

• Use standard HTML attributes in JSX.

Conditional Rendering

• Render elements conditionally.

Components

Functional Components

• Define functional components using functions.

Class Components

• Define class components using ES6 classes.

State in Class Components

• Manage state in class components.

Hooks in Functional Components

• Use useState for state.
• Use useEffect for side effects.

Events

Handling Events

• Attach event handlers to elements.

Lists and Keys

Rendering Lists

• Use map() to render lists of elements.
• Use key prop for list elements.

Forms

Controlled Components

• Manage form inputs with state.

Component Lifecycle (Class Components)

Lifecycle Methods

• componentDidMount()
• componentDidUpdate(prevProps, prevState)
• componentWillUnmount()

PropTypes

Validating Props with PropTypes

• Use prop-types package to validate component props.

Context API

Creating and Using Context

• Create context with React.createContext().
• Provide context value using Context.Provider.
• Consume context value using Context.Consumer or useContext hook.

Custom Hooks

Creating a Custom Hook

• Define custom hooks using functions and built-in hooks.

React Router

Basic Setup

• Install React Router with npm install react-router-dom.
• Use BrowserRouter, Route, and Link components.

Route Parameters

• Define and access route parameters.

Redux (Optional)

Basic Setup

• Install Redux with npm install redux react-redux.
• Create a Redux store with createStore.

Connect React and Redux

• Use Provider to pass the store.
• Use connect to connect components to the Redux store.

Common Tools

React Developer Tools

• Install the React DevTools browser extension.

ESLint for React

• Install ESLint and React plugin with npm install eslint eslint-plugin-react --save-dev.

Prettier for Code Formatting

• Install Prettier and related ESLint configurations with npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev.

---

This format organizes the commands and steps into clear sections, making it easy to copy and reference as needed.