AI Generated Cheatsheets

React Cheatsheet

Unique Features

• JavaScript library for building user interfaces
• Component-based architecture
• Virtual DOM
• JSX syntax
• React Router
• Redux

Components

// Define a component
function ComponentName(props) {
    // Component body
    return (
        <div>{props.property}</div>
    );
}

// Render a component
ReactDOM.render(<ComponentName property="value" />, document.getElementById('root'));

State

// Define state in a class component
class ComponentName extends React.Component {
    constructor(props) {
        super(props);
        this.state = { property: value };
    }
    render() {
        return (
            <div>{this.state.property}</div>
        );
    }
}

// Update state
this.setState({ property: new_value });

Props

// Pass props to a component
<ChildComponent property={value} />

// Access props in a component
function ChildComponent(props) {
    return (
        <div>{props.property}</div>
    );
}

Routing

// Define routes
<Router>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
    </Switch>
</Router>

// Navigate to a route
<Link to="/about">About</Link>

Redux

// Define a store
const store = createStore(reducer);

// Define a reducer
function reducer(state = initialState, action) {
    switch (action.type) {
        case 'ACTION_TYPE':
            return { ...state, property: new_value };
        default:
            return state;
    }
}

// Dispatch an action
store.dispatch({ type: 'ACTION_TYPE', payload: data });

// Connect a component to the store
function mapStateToProps(state) {
    return { property: state.property };
}
export default connect(mapStateToProps)(ComponentName);

Resources

• React Documentation
• React tutorial
• React hooks
• React router
• React Redux

This site is open source. Improve this page.