- React Keys
React keys are useful when working with dynamically created components or when your lists are altered by the users. Setting the key value will keep your components uniquely identified after the change. import React from ‘react’; class App extends React.Component { constructor() { super();…
- React Route
Install router npm install –save react-router-dom yarn add react-router-dom In the index.js import { BrowserRouter as Router, Route } from “react-router-dom”; ReactDOM.render( <Providerstore={createStore(allReducers, applyMiddleware(thunk))}> <React.StrictMode> <Router>…
- React Redux
Install redux npm install react-redux Add redux to index.js file React Redux provides <Provider/>, which makes the Redux store available to the rest of your app import React from ‘react’ import ReactDOM from ‘react-dom’ import thunk from ‘redux-thunk’ import {createStore, applyMiddleware} from…
- React Sass
Install sass npm install node-sass $myRed: red; h1 { color: $myRed; } import React from ‘react’; import ReactDOM from ‘react-dom’; import ‘./mysass.scss’; class Profile extends React.Component { render() { return ( <div> <h1>Hello World!</h1> </div> ); } } ReactDOM.render(<Profile />,…
- React CSS
Inline Styling To style an element with the inline style attribute, the value must be a JavaScript object class Profile extends React.Component { render() { return ( <div> <h1 style={{color: “red”}}>Hello World!</h1> </div> ); } } In JSX, JavaScript expressions are written inside curly braces, and…