How to Work with the Latest JS features in React
Working with the latest javascript features in React
React is mainly written with modern JavaScript (ES6, ES7, and ES8). If you want to take advantage of React, there are some modern JS features that you should master to get the best results for your React applications.
In this article, you’ll learn the essential JS features so that you are ready to start working on your first React application.
How to do it
In this section, you’ll see how to use the most important JS features in React:
- let and const: The new way to declare variables in JavaScript is using let or const. You can use let to declare variables that can change their value but in a block scope. The difference between let and var is that let is a block scoped variable that cannot be global, and with var, you can declare a global variable, for example:
|
1 2 3 4 5 6 7 8 9 |
var name = 'Carlos Santana'; let age = 30; console.log(window.name); // Carlos Santana console.log(window.age); // undefined |
- The best way to understand block scope is by declaring a forloop with var and let. First, use var and see its behavior:
|
1 2 3 4 5 6 7 8 9 |
for (var i = 1 ; i <= 10; i++) { console.log(i); // 1, 2, 3, 4... 10 } console.log(i); // Will print the last value of i: 10 |
- If you write the same code with let, this will be the result:
|
1 2 3 4 5 6 7 8 9 |
for (let i = 1 ; i <= 10; i++) { console.log(i); // 1, 2, 3, 4... 10 } console.log(i); // Uncaught ReferenceError: i is not defined |
- With const, you can declare constants, which means that the value can’t be changed (except for arrays and objects):
|
1 2 3 |
const pi = 3.1416; pi = 5; // Uncaught TypeError: Assignment to constant variable. |
- If you declare an array with const, you can manipulate the array elements (add, remove, or modify elements):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
constcryptoCurrencies = ['BTC', 'ETH', 'XRP']; // Adding ERT: ['BTC', 'ETH', 'XRP', 'ERT']; cryptoCurrencies.push('ERT'); // Will remove the first element: ['ETH', 'XRP', 'ERT']; cryptoCurrencies.shift(); // Modifying an element cryptoCurrencies[1] = 'LTC'; // ['ETH', 'LTC', 'ERT']; |
- Also, using objects, you can add, remove, or modify the nodes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const person = { name: 'Carlos Santana', age: 30, email: 'carlos@milkzoft.com' }; // Adding a new node... person.website = 'https://www.codejobs.com'; // Removing a node... deleteperson.email; // Updating a node... person.age = 29; |
- Spread operator:The spread operator (…) splits an iterable object into individual values. In React, it can be used to push values into another array, for example when you want to add a new item to a to-do list utilizing setState:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
this.setState({ items: [ ...this.state.items, // Here we are spreading the current items { task: 'My new task', // This will be a new task in our Todo list. } ] }); |
- Also, the Spread operator can be used in React to spread attributes (props) in JSX:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
render() { const props = {}; props.name = 'Carlos Santana'; props.age = 30; props.email = 'carlos@milkzoft.com'; return<Person{...props}/>; } |
- Rest parameter:The rest parameter is also represented by …. The last parameter in a function prefixed with … is called the rest parameter. The rest parameter is an array that will contain the rest of the parameters of a function when the number of arguments exceeds the number of named parameters:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
functionsetNumbers(param1, param2, ...args) { // param1 = 1 // param2 = 2 // args = [3, 4, 5, 6]; console.log(param1, param2, ...args); // Log: 1, 2, 3, 4, 5, 6 } setNumbers(1, 2, 3, 4, 5, 6); |
- Destructuring: The destructuring assignment javascript feature is the most used feature in React. It is an expression that allows you to assign the values or properties of an iterable object to variables. Generally, with this, you can convert your component props into variables (or constants):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// Imagine we are on our <Person> component and we are // receiving the props (in this.props): name, age and email. render() { // Our props are: // { name: 'Carlos Santana', age: 30, email: 'carlos@milkzoft.com' } console.log(this.props); const{ name, age, email } = this.props; // Now we can use the nodes as constants... console.log(name, age, email); return ( <ul> <li>Name: {name}</li> <li>Age: {age}</li> <li>Email: {email}</li> </ul> ); } // Also the destructuring can be used on function parameters const Person = ({ name, age, email }) => ( <ul> <li>Name: {name}</li> <li>Age: {age}</li> <li>Email: {email}</li> </ul> ); |
- Arrow functions: In Javascript ES6 provides a new way to create functions using the => These functions are called arrow functions. This new method has a shorter syntax, and the arrow functions are anonymous functions. In React, arrow functions are used as a way to bind the this object in your methods instead of binding it in the constructor:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class Person extends Component { showProps = () => { console.log(this.props); // { name, age, email... } } render() { return ( // Consoling props: {this.showProps()} ); } } |
- Template literals: The template literal is a new way to create a string using backticks (
|
1 2 3 4 5 6 7 8 9 |
render() { const { theme } = this.props; return ( <div>Some content here...</div> ); } |
- Map: The map()method returns a new array with the results of calling a provided function on each element in the calling array. Map use is widespread in React and mainly used to render multiple elements inside a React component.For example, it can be used to render a list of tasks:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
render() { const tasks = [ { task: 'Task 1' }, { task: 'Task 2' }, { task: 'Task 3' } ]; return ( <ul> {tasks.map((item, key) =><likey={key}>{item.task}</li>} </ul> ); } |
- assign(): The Object.assign()method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object. This method is used mainly with Redux to create immutable objects and return a new state to the reducers:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
export default functioncoinsReducer(state = initialState, action) { switch (action.type) { caseFETCH_COINS_SUCCESS: { const { payload: coins } = action; returnObject.assign({}, state, { coins }); } default: return state; } }; |
- Classes: JavaScript classes, introduced in ES6, are mainly a new syntax for the existing prototype-based inheritance. Classes are functions and are not hoisted. React uses classes to create class Components:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React, { Component } from 'react'; class Home extends Component { render() { return<h1>I'm Home Component</h1>; } } export default Home; |
- Static methods: Static methods are not called on instances of the class. Instead, they’re called on the class itself. These are often utility functions, such as functions to create or clone objects. In React, they can be used to define the PropTypes in a component:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import logo from '../../images/logo.svg'; class Header extends Component { staticpropTypes = { title: PropTypes.string.isRequired, url: PropTypes.string }; render() { const { title = 'Welcome to React', url = 'http://localhost:3000' } = this.props; return ( <header className="App-header"> <a href={url}> <imgsrc={logo}className="App-logo"alt="logo"/> </a> <h1 className="App-title">{title}</h1> </header> ); } } export default Header; |
- Promises:The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Use promises in React to handle requests using axios or fetch; also, you can use Promises to implement server-side rendering.
- async/await: The async function declaration defines an asynchronous function, which returns an AsyncFunction This can also be used to perform a server request, for example, using axios:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Index.getInitialProps = async () => { consturl = 'https://api.coinmarketcap.com/v1/ticker/'; const res = awaitaxios.get(url); return { coins: res.data }; }; |
If you found this article interesting, you can explore React Cookbook, which covers UI development, animations, component architecture, routing, databases, testing, and debugging with React. React Cookbook will save you from a lot of trial and error and developmental headaches, and you’ll be on the road to becoming a React expert.