10 Things Every Beginner Should Know When Learning Javascript And React

React is build on top of pure Javascript for the most part. Here you will learn about 10 Javascript concepts that will help you write better React code. Let and const variables is used for variables that need to be reassigned after creation. let is used for variables that don't need to be reassigned or changed. Const Both of these variables are limited within the scope of the curly braces that surround them. (They are block scoped) What happens when you try to reassign a const? newUser = ; newUser = ; const true false // TypeError: Assignment to constant variable. In React and are the preferred way for declaring variables, as their behavior is predictable. let const is also recommended when declaring components in combination with arrow functions, since the components remain unchanged. const Header = { username = ; const => () // Local variable declared with const const "Bob" return Welcome back, {username}!; } Header Pattern strings In Javascript Template strings are much more dynamic than the basic String type in Javascript, obtained using single or double quotes. Using them is much easier to interpolate and paste values into strings. It is enough to use the syntax ${} to insert a valid expression in Javascript. Concatenating and combining strings does not require the “+” operator, it is easier to write multi-line objects of type String, since you do not need to create new strings using the newline character (\ n) or carriage return (\ r). In addition, enclosed quotes (single and double) can be used in pattern strings without fear of errors. username = ; greeting = + username + ; username = ; greeting = ; const "Fred" // Code in which strings are concatenated using "+" is difficult to read const "Hi " ", how are you?" // Template strings (``) are much easier to write and read const "Anna" // Dynamic values are inserted using the expression $ {} const `Hi , how are you?` ${username} Template strings are used to create complex objects of the String class, as well as dynamically calculate the styles of elements depending on conditions. You can insert variable values, operators, function calls, etc. In React { isOddUser = id % !== ; } ( ) function UserCard { id, name } // check user id ... const 2 0 // Odds get a dark background return {name} div className {idOddUser dark-bg : div 1 "Bob" // displays UserCard with a dark background Arrow functions In javascript Shorthand syntax can be used with arrow functions. This makes the whole code shorter. You can replace the return keyword (the return occurs by default if there are no curly braces) and the function body (curly braces) with a large arrow (=>). It’s easier to work with objects and classes through the this keyword. You can also remove brackets around a single parameter. { word.toUpperCase(); } capitalize = { word.toUpperCase(); } capitalize = word.toUpperCase(); // Standard function ( ) function capitalize word return // Arrow function const ( ) => word return // Use all the features of the arrow function const => word In React If you can create a standard function in JavaScript, you can create a arrow function. As a rule, the second option is preferable because the syntax is simpler. Most often, arrow functions are used to create components, as well as for higher-order array methods such as .map () or .filter (). UserList = { ( {users.map( ( ))} ); } const ( ) => { users } return ( ) => user, index Array methods .map (), .filter (), .reduce (), etc. In Javascript Like the for loop, the map, filter, and reduce array methods allow you to iterate over the elements of an array: .map () - allows you to convert each element of the array; .filter () - creates a new array with all the elements that passed the test specified in the function; .reduce () - allows you to convert the entire array in accordance with our needs (even in a different data type). These methods are shorter and easier to read than the for loop. By combining these methods and arrow functions, you can further reduce code. users = [ { : , : }, { : , : }, { : , : } ]; usernames = []; ( i = ; i < users.length; i++) { usernames[i] = users[i] }

usernames; usernames = users.map( user.username);

usernames; // Purpose: convert the users array to usernames array const name "Bob" id 1 name "Jane" id 2 name "Fred" id 3 const // For loop for let 0 // ["Bob", "Jane", "Fred"] // .map() - concise + readable const => user // ["Bob", "Jane", "Fred"] In React The methods ), , can be used to convert data. They are usually used to dynamically display elements and components using .JSX, since these methods can be linked in chains for successive transformations. .map ( .filter () .reduce () { users = [ { : , : }, { : , : }, { : , : } ]; ( {user.name} ); }; ( ) function UserList const name "Bob" id 1 name "Jane" id 2 name "Fred" id 3 // Drop the user with id = 2 and then distribute the entries and display the usernames return {users .filter(user => user.id !== 2) ul .map user ) } ul Destructive Assignment In Javascript Destructive assignment allows you to unpack arrays or objects into variables. This is a convenient concept since you don’t need to refer to the whole object when we want to use it. Destructuring allows us to extract the value we need from the object, creating an independent variable for this value. We can make the code cleaner without referring to the object when we need only one of its values. user = { : , : , : , : { : } }; .log( ); { name, email } = user; .log( ); { username, : { title } } = user; .log( ); const name "Reed" username "ReedBarger" email "reed@gmail.com" details title "Programmer" // Access to the object without destructuring console ` , ` ${user.name} ${user.email} // logs: Reed, reed@gmail.com // Restructure the object to reduce repetition const console ` , ` ${name} ${email} // logs: Reed, reed@gmail.com // Restructuring an object with a nested object "details" const details console ` , ` ${username} ${title} // logs: ReedBarger, Programmer In React Most often, a destructive assignment is used to obtain the value of a single property of an object. If we pass only one property of an object to a given component, we do not need all the others. Instead of referencing properties, we can destructure them and pass one variable to the component. { ( All Users ( ) function App return div ); } { ( {user} ); } ( ) function UserList { users } return {users.map((user, index) => ( ul ))} ul Default options In javascript The default parameter is useful to handle the event passed by the function without arguments. They will also help to avoid errors and make the code more predictable. { + name; } sayHi(); { + name; } sayHi(); sayHi = + name; sayHi(); // No default parameters ( ) function sayHi name return "Hi" // "Hi undefined" // With default parameters ( ) function sayHi name = 'Bob' return "Hi" // "Hi Bob" // With default parameters and arrow function const ( ) => name = 'Jane' "Hi" // "Hi Jane" In React Default settings are often used when defining properties. In the example below, we use destructive assignment to get the 'username' parameter from the properties of the object. And although the property is not passed, the default value is set to 'guest' and the component still works. Header = { ; }

const ( ) => { username = } "guest" return Welcome, {username}! header header // prints: Welcome, guest! Spread syntax (three dots - ...) In Javascript The spread syntax allows you to expand objects (their key-value pairs) and arrays to get new objects. This syntax only works when creating a new object or array. The spread syntax is good for combining the properties of an old object in a new one. When an object or array expands to create a new object or array, a temporary copy appears. user = { : , : , : , }; newUser = { : , : , }; mergedUser = { ...user, ...newUser }; mergedUser; // Combine empty default data with user data from the subscription form // using the operator operator const name "" email "" phoneNumber "" const name "ReedBarger" email "reed@gmail.com" //The last object, when expanding, replaces the value of the same properties of the previous object with its own // const // { name: "ReedBarger", email: "reed@gmail.com", phoneNumber: "" }; In React The spread syntax is great for dynamically creating new objects and arrays; it is often used in React libraries (like Redux) for more predictable data changes. In addition, in React, such a technique can be used to transfer object data as a set of properties without accessing them in turn: for this, we can expand the object into a component, since we will get an object of a set of properties. { name = { : , : }; ( */} ); }

function User({ first, last }) { return ( Hi, {first} {last}

); } ( ) function App const first "Reed" last "Barger" return {/* div Short conditional statements In Javascript JavaScript has an abbreviated form for writing conditional if-else statements - ternary operation. Unlike if-else, ternary operations are expressions. This gives you great flexibility, allowing you to use them just like any other expression (such as $ {} in the case of pattern strings). Ternary operations are not always better than the if-else statement. For example, when processing multiple conditions, the former will be unreadable. age = ; greeting; (age > ) { greeting = ; } { greeting = ; } greeting = age > ? : ; greeting; let 26 let // Without the if-else operator in such cases, you can do. Here we just // assign the value to the variable depending on the condition if 18 "Hello, fellow adult" else "Hey kiddo" // Ternary operations do the same thing, but much shorter const 18 "Hello, fellow adult" "Hey kiddo" // 'Hello, fellow adult'; In React You can output through JSX one result if the condition is true, and another if it is false, while writing the code is much shorter than through if-else. If the result needs to be output only if the condition is true, the && operator can be used. Navbar = { isAuth = ; ( ); } const => () const true return // For authorized users, shows a list of links, for others - an authorization screen {isAuth ? div : } // Show profile to authorized users only {isAuth && } div ES Modules In Javascript Using ES modules, it is convenient to distribute code among application files. We export what we want to transfer to other files of our application (mainly variables and functions), and then import them where necessary. You can perform multiple export / import using curly brackets (and keywords export / import) or single without brackets (with keywords export default and import). This approach allows you to make the code modular. We can write code where it is needed without collecting everything into one large file. The example below shows how to call the getLocalTime function from a separate file in app.js. getLocalTime = ().toLocaleTimeString(); getLocalTime; getLocalTime App = { ( The time is {getLocalTime()} ); } // utils/getLocalTime.js const => () new Date export default // app.js import from './utils/getLocalTime.js' const => () return div ... div In React You can export and import almost anything, not just JS, but also CSS, image files, etc. In React, you often do not need to add a file extension when importing JavaScript. Extensions are needed only when importing other file types into JS. App = hello world! html, body { : ; padding: ; } h1 { : cornflowerblue; } React ; ReactDOM ; App ; rootElement = .getElementById( ); ReactDOM.render( // App.js const => () // styles.css margin 0 0 color // index.js import from 'react' import './styles.css' import from "react-dom" import from "./App" const document "root" , rootElement); App Promises + async / await In Javascript You can delay indefinitely the execution of certain sections of code in JavaScript (for example, setTimeout (), the listener event, or the network request with the fetch API). Promises are a way to make asynchronous JS code predictable. They help resolve code created with async. Successfully executed code is processed using the .then () callback functions, errors are processed using the .catch () function; async / await is an improved syntax for working with promises that makes asynchronous code look synchronous. navigator.geolocation.getCurrentPosition( { .log(position); }, error => { .error(error); }); .log( ); promise = ( { navigator.geolocation.getCurrentPosition(resolve, reject); });

promise .then( .log(position)) .catch( .error(error)) .finally( .log( )); { result = ( { navigator.geolocation.getCurrentPosition(resolve, reject); }); position = result; .log(position); .log( ); }

getPosition(); // Asynchronous code; 'done' is logged after position data, although 'done' is assumed // execute in code later => position console console console "done" // Asynchronous code processed after the promise; we get the desired result - position data // logged, then logged 'done' const new Promise ( ) => resolve, reject => position console => error console => () console 'done' // Asynchronous code with async / await looks like a synchronous, most readable way // work with promises async ( ) function getPosition // async / await only works in functions (for now) const await new Promise ( ) => resolve, reject const await console console 'done' In React Promises and async / await are used to create network requests such as API calls. Libraries like the fetch API or axios apply promises to requests that can take indefinitely to complete. Promises and async / await in similar libraries are also used to form network requests: .fetch( ) .then( response.json()) .then( .log(data)); { response = .fetch( ) data = response.json(); .log(data); } getPostData(); // Get data through the API using the basic syntax of the promise (pay attention to arrow functions) window 'http://jsonplaceholder.typicode.com/posts' => response => data console // Get the same data through the API using async / await async ( ) function getPostData const await window 'http://jsonplaceholder.typicode.com/posts' // We need to allow two promises using await to get the resulting data const await console Practice makes perfect. After a long time of practicing, our work will become natural, skillfull, swift, and steady. My main intention with this article is to help you write better and more efficient code. If you have any questions please contact me, I will be glad to answer all of your questions. All the best -Dannison Arias

10 Things Every Beginner Should Know When Learning Javascript And React

Too Long; Didn't Read

People Mentioned

Company Mentioned

@dannison-arias

RELATED STORIES