let can be re-assigned values while
const by default and only use
let when you explicitly need to reassign a variable. This helps in writing more maintainable and predictable code.
undefined - A variable declare without being assigned a value takes the value of undefined by default.
undefinedis used to represent absence of a value.
nullis assigned by the programmer to represents intentional absence of a value.
boolean - Has only two possible values,
- string - Represents a sequence of characters using quotes
- number - Can be integers or decimal numbers
symbol and bigint - I rarely use them but might be useful in some cases.
symbolsare often used to add unique property keys to an object.
bigintis used to represent large numeric values.
- objects - They store data in key and value pairs.
arrays and functions - These are not necessarily types but special objects.
Arraysare used to store list of values while
Functionsare use to write reusable pieces of code/logic.
When you start developing apps, you will find yourself mostly working with list of data. Knowing and understanding the different array methods is essential in react in order to correctly update the state. Some of the methods you might find useful are:
- .map - often use to display list of data in react by looping through them.
- .filter - when you want to remove an item/items from a list. important when updating state for a delete functionality
- .find - to get the first element of an array that satisfies a given condition
.findIndex - similar to
.findonly that this returns the index(position) of the item instead of the item.
- .reduce - used to accumulate values in an array. Good example could be getting the totals of a shopping cart items.
- .forEach - you can use this to loop over an array.
- .slice - used to get a subarray(a portion of an array)
- .push - used when you want to add an item to an array
Although there are many other array methods worth knowing, I find the above being mostly used.
Destructuring is used to extract values and assign them variables in a more readable way. In react the concept is widely used when accessing and manipulating props and state. You can also easily assign default values to props when using destructuring.
The spread operator is very common in react when adding properties to an object or array or even combining objects or arrays, and then using the new value to update the state.
You need to understand how to create and work with functions. Functions are important in creating reusable logic that can be reused in multiple modules. Understand the syntax and how to pass arguments in both regular and arrow functions. Understand the usage of the
return statement in a function. Learn the difference between them, the
this keyword, the
arguments object and how the functions are
These allow you to execute different blocks of code based on whether a specified condition evaluates to true or false. They include
the if statement,
the switch statement and
the ternary operator.
import keywords. In React modularity is widely adapted by making most components as modules.
Build and Deploy a Full-Stack E-Commerce: Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe