One of the most important things to understand about React is to learn fundamental concepts of JavaScript.
(1) Javascript Basics :- React is a javascript framework so the knowledge of JS basics is essential to work comfortably in react. Basics includes variable, data types, operators, conditionals, arrays, functions, objects, events, and so on.
(2) Ternary Operator :- Ternary operator is a short, one-line conditional operator to replace if/else. it's really useful when it comes to quickly checking a condition to render a component, updating state, or displaying some text.
condition ? 'True' : 'False'
(3) Destructuring :- Destructuring means to break down a complex structure into simpler parts. It is important in javascript because it allows you to extract data from arrays and objects and store them in separate variables in a simple and smooth way.
#With Destructuring
const objects = ['table', 'iphone', 'apple']
const [forniture, mobile, fruit] = objects
#Without Destructuring
const forniture = objects[0]
const mobile = objects[1]
const fruit = objects[2]
(4) Spread Operator :- Spread Operator Was Introduced to javascript in ES6. It takes an iterable and expands it into individual elements. spread operator is commonly used to copy the values of an object into another object during a state update to merge the properties of both object in react
// spread operator example
let arr = [1,2,3];
let arr2 = [4,5];
arr = [...arr,...arr2];
console.log(arr); // [ 1, 2, 3, 4, 5 ]
(5) Array Method :- Array methods are very common when building a medium to large scale application in React. You will always be using some sort of array method in almost every react app you build. methods like Map, Filter, Reduce, Sort, Includes, Find, Foreach, Splice, Concat, Push And Pop, Shift And Unshift etc are extremely useful.
(6) Arrow Function :- Arrow function allow us to create function in a simple manner with shorter syntax.
#Before Arrow
hello = function() {
return "Hello World!";
}
#After Arrow
hello = () => {
return "Hello World!";
}
(7) Promise :- promises are used to handle asynchronous operation in modern javascript. These are 3 state of a promise :-
- Pending - When the final result of the promise is yet to be determined.
- Resolved - When the promise is successfully resolved.
- Rejected - When the promise is rejected.
(8) Fetch Api :- Fetch Api allows us to make async requests to web servers from the browser. The fetch() method starts the process of fetching a resource from a server. A basic fetch() takes one argument, the URL of the resource you want to fetch.
(9) Async/Await :- Async/Await is a better and cleaner way to deal with promises. Js is synchronous in nature and async/await helps us write promise-based functions in such a way as if they were synchronus by stopping the execution of further code until the promise is resolved or rejected.
(10) Modules & Import Export :- Modules were introduced in ES6. Each file is a module of its own. you can carry out objects, variables, arrays, function from one file and use them in another. This is referred to as importing and exporting modules. In React, we use the ES6 modules to create separate files for components.
Thankyou, Drop a like you loved it😀