- 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…
- React Forms
Handling forms is about how you handle the data when it changes value or gets submitted. In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can…
- React Events
Just like HTML, React can perform actions based on user events. React has the same events as HTML: click, change, mouseover etc. A good practice is to put the event handler as a method in the component class: class Profile extends React.Component { changeName() { alert(“name changed!”); } render()…