There are some important concepts you need to understand before starting out to learning react. They are arrow functions, template literals, object destructuring, fetch, async functions, promise, callbacks, array functions and many more.
The intention of this article is to highlight the JavaScript fundamentals that aspiring React developers should master before actually getting into React. Modern JavaScript features, which were mostly introduced with ES2015, are built upon in React.
React is a library for creating UI components that may be the foundation of both web and mobile applications, as you probably already know. React stands out from some of its rivals since all of its code is written in JavaScript. Even the HTML-like templates are created in JS using JSX, a JS language extension for UI component organization.
Let's move on from the definitions and discuss the JavaScript fundamentals you must master before studying React.
Variables
You must understand how to declare a variable in JavaScript before beginning to use React. There are three ways to declare variables in JavaScript. using const, let, or var. They each have benefits and drawbacks.
Functions
The primary tenet of React is to split large projects into smaller parts or components. And either functions or classes make up those components. Therefore, it is crucial to understand how to declare a function in JavaScript. Similar to variables, a function can be declared in more than two different methods. However, these two are regular function syntax and arrow functions.
Modern codebases almost always use the arrow function, a new ES6 feature that makes the code more clear and succinct. We can use this capability to write functions with a more concise syntax.
Template Literals.
When creating a web application, working with strings is typical. In prior JavaScript (ES5) versions, you had to use the + operator to concatenate (append) a string to a variable. Additionally, it has a poor aesthetic and is challenging to understand. However, using an ES6 template literal, you may now concatenate strings with variables.
Destructuring Assignment
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: Array [30,40,50]
Array Methods
Array methods in JavaScript are methods for working with arrays. Future usage of these tactics will benefit from understanding how they work. Since you'll find yourself utilizing them regularly once you begin using React to build projects.
Fetch
The fetch() method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
fetch('url') //api for the get request
.then(response => response.json())
.then(data => console.log(data));
I advise gaining a solid understanding of JavaScript principles before learning React because writing vanilla JavaScript code makes up the majority of React development. You will get off to a much better start with this study approach, I guarantee you.
Top comments (0)