💾 Archived View for gem.sdf.org › s.kaplan › cheatsheets › libraries-and-frameworks › react.md captured on 2024-03-21 at 15:44:38.

View Raw

More Information

⬅️ Previous capture (2023-09-08)

-=-=-=-=-=-=-

# 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](https://reactjs.org/docs/getting-started.html)
- [React tutorial](https://reactjs.org/tutorial/tutorial.html)
- [React hooks](https://reactjs.org/docs/hooks-intro.html)
- [React router](https://reactrouter.com/web/guides/quick-start)
- [React Redux](https://redux.js.org/introduction/getting-started)