React Tutorials

How to update state of an object We have a user object setUser({ …user, name: “Peter” }); How to update state of list/array of objects We have a shopping cart which contains a list of menu items const [shopCart, setShopCart] = useState([{ name: “”, price: 0, uuid: “” }]); add item to shopping cart…

Install Bootstrap npm install –save bootstrap Include bootstrap.css in the index.js import ‘bootstrap/dist/css/bootstrap.css’;

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();…

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>…

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…

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 />,…

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…

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…

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()…

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting. Mounting Mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting…

React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders. State is similar to props, but it is private and fully controlled by the component. class Profile extends…

Props are like function arguments, and you send them into the component as attributes. Props are passed to components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML Passing props is how information flows in React apps, from parents to children. To…

React renders HTML using ReactDOM.render(). React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. import React from ‘react’; class App extends React.Component { render() { return ( <div> <Header/>…

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications. JSX is a syntax extension to…

React uses ES6’s features such as class, arrow functions, variables(let, var, const), for..in, for..of, and others. Classes A class can have attributes, methods, and state. You can extend a class and add functionality. Arrow functions Regular JS ES6 arrow function Default functions In ES6, a…

Install node js on your computer if you haven’t done so. Here is the link. Create your project by using this command: Go into your app using this command: Start your application using this command: Congratulations! You have just set up your react project.

Components are like functions that return HTML elements. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, Class components and Function components,…