𝟯 𝗕𝗮𝘀𝗶𝗰 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 𝗳𝗼𝗿 𝗥𝗲𝗮𝗰𝘁: 𝗣𝗮𝗿𝘁 𝟭

𝟯 𝗕𝗮𝘀𝗶𝗰 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 𝗳𝗼𝗿 𝗥𝗲𝗮𝗰𝘁: 𝗣𝗮𝗿𝘁 𝟭

React is a library built on JavaScript. You need a solid grasp of JavaScript to learn React well.

Here are three concepts you must know.

1. Destructuring

Destructuring lets you unpack values from arrays or properties from objects into variables.

Array Destructuring: You can extract specific items from an array.

• const [c1, c2, c3] = ['red', 'blue', 'orange'];
• This assigns 'red' to c1.

The Rest Operator: You can collect the remaining items into a new array.

• const [first, ...rest] = ['red', 'blue', 'orange'];
• 'rest' becomes ['blue', 'orange'].

Use Case in React: React hooks use this. The useState hook returns an array. You destructure it to get the value and the setter function.

• const [value, setValue] = useState('');

Object Destructuring: You extract values using property names.

• const person = { name: 'Roy', age: 28 };
• const { name, age } = person;

You can rename properties during destructuring to avoid errors.

• const { name: userName } = person;

Use Case in React: React passes props as objects from parents to children. You destructure props to use them inside child components.

2. Spread Operator

The spread operator copies elements from one array or object into another.

Array Spread:

• const arr = ['car', 'bike'];
• const vehicle = [...arr, 'truck'];

Object Spread:

• const obj = { name: 'Roy', age: 28 };
• const obj2 = { id: 1, ...obj };

In objects, you can also update values.

• const obj2 = { id: 1, ...obj, age: 35 };

Use Case in React: React requires you to treat state as immutable. You should not change an existing object or array directly. Use the spread operator to create a new copy with updated values.

3. Template Literals

Template literals are strings written with backticks. They allow you to insert variables directly using ${}.

Standard way:

• const msg = "Hello " + name;

Template literal way:

• const msg = Hello ${name};

Use Case in React: React developers build strings dynamically from props and state. You often use them to add CSS classes conditionally.

• className={btn ${isActive ? 'active' : ''}}

Master these three topics to make your React journey easier.

Source: https://dev.to/vigneshm220/3-basic-javascript-concepts-to-start-your-react-journey-part-1-4nm7