The goal of this article is to help aspiring React developers get started by highlighting the JavaScript they ought to master before really diving into React. A complete introduction to JavaScript would go beyond the scope of this article, but React builds on the use of modern JavaScript features that were mainly introduced with ES2015<\/a>.<\/p>\n\n\n\n Below, I give an overview of the common JavaScript patterns and language features that are heavily used in virtually every React application. For each concept, I provide external links. If you are interested, you can learn more about using it in React context.<\/p>\n\n\n\n These operators have been part of JavaScript for a very long time. In React, they are especially useful for conditional rendering of components.<\/p>\n\n\n\n The ternary operator<\/a> looks like this:<\/p>\n\n\n\n If the variable Of course, you can use such an Otherwise, you have to call a function where you put your code for conditional rendering<\/a>. In React, you can also use more complex condition logic (e.g., an Logical operators<\/a> In our example, the left operand ( This concept is also very useful for conditional rendering in React<\/a> because It is also possible to combine multiple conditions. In the next example, the result of Notice the If you return This is useful to prevent components from rendering<\/a>.<\/p>\n\n\n\n There are multiple ways to create objects<\/a>. Initializing objects with the literal notation looks like this:<\/p>\n\n\n\n This notation is frequently used in React projects to create objects inline without assigning them to a variable, e.g., for the initial state of With ES2015 syntax, you can also use shorthand properties and method names.<\/p>\n\n\n\n Shorthand properties especially are used all over the place in React development since they eliminate redundant code.<\/p>\n\n\n\n That said, you have to be aware of the subtle difference between an inline object literal and a variable pointing to an object (created by an object literal). In some cases, for React performance optimization purposes, you should avoid passing object literals<\/a> to React components because a new object is created every time, causing unnecessary re-renders.<\/p>\n\n\n\n The same principle applies to anonymous functions (i.e., inline functions), which should be avoided<\/a> in some React performance use cases.<\/p>\n\n\n\n Template literals<\/a>, or template strings, were introduced with ES2015 and allow for creating strings with embedded JavaScript expressions. Within backticks, you can combine \u201chardcoded\u201d strings with JavaScript expressions inside of Expressions can, of course, be more complex, like inline calculations or function calls.<\/p>\n\n\n\n The latter example also uses the multiline feature so that the output has a line break after the expression interpolation ( In medium- and large-sized React applications, you\u2019ll most likely be confronted with the The following example shows a so-called reducer function<\/a> using a The example above checks the value of It is good practice to have an optional default clause. It gets executed if the In the above example, every case (and default) clause returns a new object, representing the new React state. This brings us to an important topic of React development.<\/p>\n\n\n\n The principle of object destructuring<\/a> is pretty simple. With the elegant syntax below, we can extract properties into variables.<\/p>\n\n\n\n If you use assignment without variable declaration, you need to use parentheses.<\/p>\n\n\n\n Object destructuring offers you syntactical sugar to save extra lines of code.<\/p>\n\n\n\n In the context of React, object destructuring is frequently used with function parameters.<\/p>\n\n\n\n For cleaner code, React developers use this pattern with props<\/a>, which are the input for React components.<\/p>\n\n\n\n Assigning in combination with renaming variables might be useful to increase the readability of your code.<\/p>\n\n\n\n You can also define default values while unpacking fields from the assigned object. The following example combines multiple techniques.<\/p>\n\n\n\n Nesting is also possible, but I wouldn\u2019t recommend overdoing it; otherwise, understandability decreases.<\/p>\n\n\n\n Ronald Chen provides some more insights<\/a> on destructuring nested objects.<\/p>\n\n\n\n With the help of the destructuring assignment<\/a>, an array can be unpacked in such a way that its values are extracted into distinct variables, like this:<\/p>\n\n\n\n As you can see, variables are assigned from the left to the right of the array, so order is maintained.<\/p>\n\n\n\n You can also skip values under consideration of the order.<\/p>\n\n\n\n The following \u201cchatty code\u201d might help to understand what exactly happened.<\/p>\n\n\n\n You can also assign multiple values at once with the rest pattern.<\/p>\n\n\n\n Array destructuring allows for default values. Of course, you can combine this pattern with function calls, too.<\/p>\n\n\n\n The elegant concept of array destructuring is used frequently with React Hooks<\/a> because you can come up with a few lines of semantic code. To create a state variable along with an updater function for a React component, you can use React\u2019s The following example demonstrates that you can implement generic functions for concrete use cases. Array destructuring allows the function caller to use semantic variable names.<\/p>\n\n\n\n For this use case, in my opinion, returning an array with the That\u2019s probably why The spread operator<\/a> ( In the next use case below, we pull out elements of an array and pass each element as individual function argument.<\/p>\n\n\n\n Another use case is to copy object properties and, thus, create a new object.<\/p>\n\n\n\n With this succinct syntax, you can conveniently create a copy of an array.<\/p>\n\n\n\n Recalling the last paragraph of our subsection on the switch statement, the spread syntax is frequently used in the context of React state. With React, you should not manipulate state objects directly. Instead, you need to create a brand-new state object whenever you want to update the state. The following concept is considered good practice.<\/p>\n\n\n\n With the help of the rest operator<\/a> ( If you use the operator inside of Its purpose is to merge a list of values into an array. In the next example, various food is provided as function arguments. With the rest operators, they are put into an array called It is a common practice to use the rest operator in combination with the spread operator. This combines multiple arguments into an array to distribute the entries again in another place inside of a React component.<\/p>\n\n\n\n A function declaration<\/a> looks like this:<\/p>\n\n\n\n In contrast, this is a function expression<\/a>:<\/p>\n\n\n\n An arrow function expression<\/a> constitutes an alternative to the former two. Its advantage is in its syntactical sugar, which allows you to write functions in a more concise manner.<\/p>\n\n\n\n If you have only one parameter, you can skip the parentheses.<\/p>\n\n\n\n If your function does not accept any parameter, you need to use parentheses.<\/p>\n\n\n\n If the function body consists of a single return statement, you can replace this explicit return with an implicit return, like so:<\/p>\n\n\n\n Only with function declarations can you invoke functions before they have even been defined. This is because function declarations are hoisted, i.e., they are moved to the top of their scope before execution.<\/p>\n\n\n\n Another difference between function declarations\/expressions and arrow function expressions is the A class<\/a> represents a blueprint for new objects. Variables and functions can be attached to a class and are called properties and methods, respectively. In the context of a class, the A class can have a constructor<\/a> method, which represents a special kind of function to initialize new objects of the blueprint. You can instantiate the class with the Another crucial concept is inheritance with the class syntax<\/a>. With the With ES2017<\/a>, the syntax for using class properties and methods is a little bit more concise<\/a>. You can use arrow functions as methods, too.<\/p>\n\n\n\n Often, when you come across classes in React development<\/a>, you will find the ES2017 syntax.<\/p>\n\n\n\n Note that this section is by no means a complete explanation of JavaScript classes. In my opinion, you do not need to devote too much time to learning classes if your plan is to learn React. My recommended learning path for React beginners is to understand the basics of classes as presented here to be able to read and understand class-based React components.<\/p>\n\n\n\n I think understanding classes extensively for new React developers is not necessary because the importance of classes has decreased drastically since last year. This is related to the introduction of React Hooks.<\/p>\n\n\n\n Before then, it was only possible to have sophisticated React components with the class-based approach. Only with classes was it possible to define component state and use lifecycle methods. Hooks allow similar things with functional components, too. The whole React community is strongly pushing towards only using function components.<\/p>\n\n\n\n However, if you work on legacy projects with existing class-based components or if you come across some of the few use cases<\/a> that require you to use classes, or even if you just like to use classes (e.g., use a specific lifecycle method), then you need to understand the React-related class foundations.<\/p>\n\n\n\n Luckily, for React development, the relevant aspects of JavaScript classes are not very complicated. I like to use the ES2017 syntax for class components and arrow functions for methods because they do not require<\/a> use of the Consider the first example, which requires a With the ES2017 syntax, you can write more understandable class-based components. The reason is because arrow functions have a lexical Mastering array functions<\/a> is an important skill for React developers. The This concept is important to understand. Immutable values and objects cannot be changed afterwards, so the original remains untouched. Primitive values like strings or numbers are immutable by nature. On the other hand, objects are mutable by default. Let\u2019s take a look what this means.<\/p>\n\n\n\n A misguided mindset about mutability can lead to bugs.<\/p>\n\n\n\n Objects are mutable, but you can use The React team recommends you use immutable objects in multiple areas of your application design, e.g., with component-based<\/a> and global state<\/a>. This is because immutability typically leads to multiple architectural benefits<\/a>. And that\u2019s why most of the developer community suggests pursuing a coding mindset of immutablity.<\/p>\n\n\n\n I need to emphasize that mutation is not bad in itself. One problem with undisciplined mutation, however, is that it can lead to unexpected side effects, which are often the cause of unexpected bugs.<\/p>\n\n\n\n In React development, do not try to mutate state variables directly; rather, use the preferred method of the state management library. As an example, the following code snippet shows how you should and how you should not update the local state of a class-based React component.<\/p>\n\n\n\n If you use global state management tools like A function passed as an argument to another function is called a callback<\/a> if the function invokes the argument at a later time.<\/p>\n\n\n\n In the context of React, callback functions are often passed as props<\/a> to React components. Thereby, child components can execute passed callbacks at a later time in a way that parent components can react to it (e.g., update state and, thus, update the UI).<\/p>\n\n\n\n Callback functions are also important in the context of React Hooks<\/a>, e.g., to trigger side effects with Since React development consists mainly of writing vanilla JavaScript code, I recommend acquiring a good understanding of JavaScript fundamentals before learning React. With this learning path, you will have a much smoother start \u2014 I promise you.<\/p>\n\n\n\n Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you\u2019re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket<\/a>. <\/a><\/a><\/p>\n\n\n\nConditional logic with
if<\/code> statements, the ternary operator, and logical operators<\/h2>\n\n\n\nconst buttonLabel = playback === \"stop\" ? \"play
![\"\u25b6\ufe0f\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/25b6.svg\")
\" : \"stop ![\"\u23f9\ufe0f\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/23f9.svg\")
\";<\/pre>\n\n\n\nplayback<\/code> has the value stop<\/code>, then the operator assigns to buttonLabel<\/code> the string value play <\/code> and, in all other cases, the string value stop <\/code>. It is basically the same as the following code:<\/p>\n\n\n\nlet buttonLabel;\nif (playback === \"stop\") {\n buttonLabel = \"play \";\n}\nelse {\n buttonLabel = \"stop \"\n}<\/pre>\n\n\n\nif...else<\/code> statement, but the ternary operator is often the instrument of choice if you need to use a single line expression for conditionally rendering elements inline<\/a>.<\/p>\n\n\n\nif...else<\/code> cascade<\/a>) and store values in variables that can be used for conditional rendering<\/a> in JSX code.<\/p>\n\n\n\n&&<\/code> or ||<\/code> are very handy for building React components.<\/p>\n\n\n\nconst isLoggedIn = true;\nconst userComponent = isLoggedIn && getUserComponent();<\/pre>\n\n\n\n
isLoggedIn<\/code>) of the &&<\/code> operator evaluates to true<\/code>. Therefore, the result of the right operand (the function call getUserComponent()<\/code>) gets assigned to the userComponent<\/code> variable.<\/p>\n\n\n\ntrue && jsxComponent<\/code> returns jsxComponent<\/code>, and false && jsxComponent<\/code> returns false<\/code>. If you return false<\/code>, React ignores it and simply renders nothing.<\/p>\n\n\n\ngetOtherUsersComponent()<\/code> is returned when both conditions are met.<\/p>\n\n\n\nconst otherUsers = isLoggedIn && users?.length > 0 && getOtherUsersComponent();<\/pre>\n\n\n\n
?<\/code> in the second operand users?.length > 0<\/code>. This is optional chaining<\/a>, which is not uncommon in React projects.<\/p>\n\n\n\nnull<\/a><\/code>, React doesn\u2019t render anything. In contrast to undefined<\/code>, null<\/code> represents the intentional absence of any value.<\/p>\n\n\n\nif (shouldRenderComponent()) {\n return getComponent();\n}\nelse {\n return null;\n}<\/pre>\n\n\n\nObject literals and inline functions<\/h2>\n\n\n\n
const foo = { bar: 3, hello: \"world\" };<\/pre>\n\n\n\nuseReducer<\/code>.<\/p>\n\n\n\n\/\/ 2nd function argument uses inline object literal\nfoo(\"bar\", { hello: \"world\" })<\/pre>\n\n\n\n\/\/ instead of \nfunction foo(id) {\n return {\n name: \"dummy\",\n id: id,\n bar: function() {\n console.log(\"bar\");\n }\n }\n}\n\/\/ you can do\nfunction foo(id) {\n return {\n name: \"dummy\",\n id, \/\/ shorthand property name\n bar() { \/\/ shorthand method name\n console.log(\"bar\");\n }\n }\n}<\/pre>\n\n\n\n\/\/ inline function\nfoo(() => {console.log(\"bar\")});\n\/\/ passing variable pointing to function\nconst barFunc = () => console.log(\"bar\");\nfoo(barFunc);<\/pre>\n\n\n\nTemplate literals<\/h2>\n\n\n\n
${}<\/code>.<\/p>\n\n\n\nconst name = \"doppelmutzi\";\nconsole.log(`Hello, my name is ${name}`); \/\/ Hello, my name is doppelmutzi<\/pre>\n\n\n\nconst name = \"doppelmutzi\";\nconst getRandomIndex = max => Math.floor(Math.random() * Math.floor(max))\nconst food = [\"
![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f95e.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f9c7.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f354.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f35f.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f355.svg\")
\"];\nconst getFood = index => food[index]\nconsole.log(`Hello, my name is ${name} \nand I'm hungry for ${getFood(getRandomIndex(food.length))}`);<\/pre>\n\n\n\n${name}<\/code>).<\/p>\n\n\n\nSwitch statement<\/h2>\n\n\n\n
switch<\/a><\/code> statement for managing state across components. Tools like the useReducer<\/a><\/code> Hook or Redux<\/a> are often used for such tasks.<\/p>\n\n\n\nswitch<\/code> statement for state management. You don\u2019t necessarily have to use switch<\/code> statements with a reducer, but it is a well-established pattern.<\/p>\n\n\n\nexport default (state, action) => {\n switch (action.type) {\n case \"TOGGLE_DARK_MODE\":\n return {\n ...state,\n darkMode: action.darkMode,\n };\n case \"UPDATE_PLAYBACK\": {\n return {\n ...state,\n currentSound: action.currentSound,\n };\n } \n default:\n return state;\n }\n};<\/pre>\n\n\n\naction.type<\/code> and executes the code of a case<\/code> statement. If it evaluates to a string, TOGGLE_DARK_MODE<\/code>, then the code of the first case statement is executed.<\/p>\n\n\n\nswitch<\/code> expression matches none of the case clauses. Using the spread operator (e.g., ...state<\/code>) is a common practice.<\/p>\n\n\n\nObject destructuring<\/h2>\n\n\n\n
const creatures = {\n human: [\"![\"??\u200d?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f468-1f3ff-200d-1f4bc.svg\")
\", \"![\"??\u200d?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f469-1f3fc-200d-1f4bc.svg\")
\", \"![\"??\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f9d1-1f3fb.svg\")
\u200d![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4bc.svg\")
\", \"![\"??\u200d?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f469-1f3fe-200d-1f4bb.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f9d1.svg\")
\u200d![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4bb.svg\")
\"],\n supernatural: [\"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f47e.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f916.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f47d.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f479.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f47a.svg\")
\"]\n};\nconst { human, supernatural } = creatures;\nconsole.log(human); \/\/ [\"\", \"\", \"\u200d\", \"\", \"\u200d\"]\nconsole.log(supernatural); \/\/ [\"\", \"\", \"\", \"\", \"\"]<\/pre>\n\n\n\nconst creatures = {\n human: [\"\", \"\", \"\u200d\", \"\", \"\u200d\"],\n supernatural: [\"\", \"\", \"\", \"\", \"\"]\n};\nlet human, supernatural;\n({human, supernatural} = creatures);\nconsole.log(human); \/\/ [\"\", \"\", \"\u200d\", \"\", \"\u200d\"]\nconsole.log(supernatural); \/\/ [\"\", \"\", \"\", \"\", \"\"]<\/pre>\n\n\n\n\/\/ you can do this\nconst { human, supernatural } = creatures;\n\/\/ instead of\nconst human = creatures.human;\nconst supernatural = creatures.supernatural;<\/pre>\n\n\n\nconst infos = {name: \"doppelmutzi\", hobby: \"React\" };\nfunction printInfos({name, hobby}) {\n console.log(name, hobby);\n}\nprintInfos(infos);\nconst printName = ({name}) => console.log(name);\nprintName(infos);<\/pre>\n\n\n\nfunction MyReactComponent({name, age}) {\n \/\/ ...\n}<\/pre>\n\n\n\nconst creatures = {\n human: [\"\", \"\", \"\u200d\"]\n};\nconst { human: people } = creatures;\nconsole.log(people); \/\/ [\"\", \"\", \"\u200d\"]<\/pre>\n\n\n\nconst { human: people = [\"\"], supernatural = [\"\", \"\"] } = {\n human: [\"\", \"\", \"\u200d\"]\n};\nconsole.log(people); \/\/ [\"\", \"\", \"\u200d\"]\nconsole.log(supernatural); \/\/ [\"\", \"\"]<\/pre>\n\n\n\nconst creatures = {\n animals: {\n wildlife: [\"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f982.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f40d.svg\")
\"],\n pet: [\"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f415.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f408.svg\")
\"]\n },\n human: [\"\", \"\", \"\u200d\"]\n};\nconst { animals: { pet }} = creatures;\nconsole.log(pet); \/\/ [\"\", \"\"]<\/pre>\n\n\n\nArray destructuring<\/h2>\n\n\n\n
const array = [1, 2];\nconst [varForVal1, varForVal2] = array;\nconsole.log(varForVal1); \/\/ 1\nconsole.log(varForVal2); \/\/ 2<\/pre>\n\n\n\n
const [fruit, veggie] = [\"
![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f353.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f966.svg\")
\", \"\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f32e.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f96a.svg\")
\", \"\"];\nconsole.log(fruit); \/\/ \nconsole.log(veggie); \/\/ <\/pre>\n\n\n\nconst [fruit,,pizza,,,burger] = [\"
\", \"\", \"\", \"\", \"\", \"\"];\nconsole.log(fruit); \/\/ \nconsole.log(pizza); \/\/ \nconsole.log(burger); \/\/ <\/pre>\n\n\n\nconst [\n fruit,\n \/* skip entry 2 (
) *\/,\n pizza,\n \/* skip entry 4 () *\/,\n \/* skip entry 5 () *\/,\n burger] = [\"\", \"\", \"\", \"\", \"\", \"\"];<\/pre>\n\n\n\nconst [fruit, veggie, ...junkfood] = [\"
\", \"\", \"\", \"\", \"\", \"\"];\nconsole.log(fruit); \/\/ \nconsole.log(veggie); \/\/ \nconsole.log(junkfood); \/\/ [\"\", \"\", \"\", \"\"]<\/pre>\n\n\n\nconst getFood = () => [\"
\", \"\"];\nconst [fruit, veggie, junkfood = \"\"] = getFood();\nconsole.log(fruit); \/\/ \nconsole.log(veggie); \/\/ \nconsole.log(junkfood); \/\/ <\/pre>\n\n\n\nuseState<\/a><\/code> Hook.<\/p>\n\n\n\nconst initialValue = false;\n\/\/ instead of \nconst stateWithUpdater = useState(initialValue);\nconst darkMode = stateWithUpdater[0];\nconst darkModeUpdater = stateWithUpdater[1];\n\/\/ you can do\nconst [darkMode, setDarkMode] = useState(initialValue);<\/pre>\n\n\n\n
const getFood = type => {\n let food = [];\n let error = false;\n if (type === \"fruits\") {\n food = [\"\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f95d.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f34c.svg\")
\"];\n }\n else if (type === \"junk\") {\n food = [\"\", \"\", \"\"];\n }\n else {\n error = true;\n }\n const addFood = newFood => food.push(newFood);\n return [food, error, addFood];\n};\nconst [healthyFood, noFruitsAvailable, addFruitFunc] = getFood(\"fruits\");\nconsole.log(healthyFood); \/\/ [\"\", \"\", \"\"]\nconsole.log(noFruitsAvailable); \/\/ false\nconsole.log(addFruitFunc(\"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f352.svg\")
\")); \nconsole.log(healthyFood); \/\/ [\"\", \"\", \"\", \"\"]<\/pre>\n\n\n\ngetFood<\/code> function leads to more concise code than with object destructuring. Array destructuring allows for custom variable names. In contrast, with object destructuring, you need to rename the variables.<\/p>\n\n\n\nconst getFood = type => {\n \/\/ same function body as above, only different return statement\n return {food, error, addFood};\n};\nconst {food: healthyFood, error: noFruitsAvailable, addFood: addFruitFunc} = getFood(\"fruits\");\nconsole.log(noFruitsAvailable); \/\/ false\nconsole.log(addFruitFunc(\"\")); \nconsole.log(healthyFood); \/\/ [\"\", \"\", \"\", \"\"]<\/pre>\n\n\n\nuseState<\/code> returns an array and not an object \u2014 to be more generic.<\/p>\n\n\n\nSpread operator<\/h2>\n\n\n\n
...<\/code>) allows an iterable item (e.g., an array) to be extracted into its parts and plugged into places that expect individual elements. With this syntax, you can split up object properties or array elements.<\/p>\n\n\n\nconst numbers = [11, 5, 3, 1, 26];\n\/\/ Math.max expects to be called like Math.max(11,5,3,1,26)\nconsole.log(Math.max(...numbers)); \/\/ 26<\/pre>\n\n\n\n
const food = {\n breakfast: [\"\", \"\"],\n lunch: [\"\", \"\", \"\"]\n};\nconst foodAndDrinks = {\n ...food,\n drinks: [\"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f377.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f379.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f37a.svg\")
\", \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f943.svg\")
\"],\n};\nconsole.log(foodAndDrinks); \n\/* \n{\n breakfast: [\"\", \"\"],\n lunch: [\"\", \"\", \"\"],\n drinks: [\"\", \"\", \"\", \"\"],\n} *\/<\/pre>\n\n\n\n const food = [\"
\", \"\", \"\", \"\", \"\"];\n const copy = [...food];\n console.log(copy); \/\/ [\"\", \"\", \"\", \"\", \"\"]\n console.log(food === copy); \/\/ false<\/pre>\n\n\n\nconst restaurantState = {\n drinks: [\"\", \"\", \"\", \"\"],\n food: [\"\", \"\", \"\", \"\", \"\"],\n lastOrder: null\n}\n\/\/ the customer ordered a \nconst stateAfterOrder = {\n drinks: [...restaurantState.drinks], \/\/ copy drinks\n food: [...restaurantState.food], \/\/ copy food\n lastOrder: \"\" \/\/ override lastOrder\n}<\/pre>\n\n\n\nRest operator<\/h2>\n\n\n\n
...<\/code>), you can merge a list of function arguments into an array. While the syntax of the rest operator is the same as the spread operator, their place of use makes all the difference.<\/p>\n\n\n\n{}<\/code> or []<\/code>, you use object or array spreading, respectively. On the other hand, if you use the operator with the last argument in a function signature, that is the rest parameter.<\/p>\n\n\n\nfood<\/code>. The findIndex<\/code> method is operating on an array and tests whether broccoli is included.<\/p>\n\n\n\nconst cleanFoodIncluded = (...food) => food.findIndex(f => f === \"
\") !== -1;\nconsole.log(cleanFoodIncluded(\"\", \"\", \"\", \"\", \"\")); \/\/ true<\/pre>\n\n\n\nfunction renderProduct(\n \/\/ these are considered as component-specific\n {id, name}, \n\/* all other arguments are relevant for container component. Therefore, consolidate them into an array with rest operator *\/\n...containerProps) { \n \/\/ output 0815, choco, [{margin: \"10px\"}, {padding: \"5px\"}]\n console.log(id, name, containerProps); \n \/* unpack array again with spread operator to provide them as individual args *\/\n renderContainer(...containerProps); \n\n }\nfunction renderContainer(margin, padding) {\n \/\/ output {margin: \"10px\"}, {padding: \"5px\"}\n console.log(margin, padding); \n}\n const product = {\n id: \"0815\", name: \"choco\"\n }\n renderProduct(product, {margin: \"10px\"}, {padding: \"5px\"} );<\/pre>\n\n\n\nFunction declarations, function expressions, and arrow functions<\/h2>\n\n\n\n
function getFood(index) {\n const food = [\"\", \"\", \"\", \"\", \"\"];\n return food[index];\n}<\/pre>\n\n\n\nconst getFood = function(index) {\n const food = [\"\", \"\", \"\", \"\", \"\"];\n return food[index];\n}<\/pre>\n\n\n\nconst getFood = (index) => {\n const food = [\"\", \"\", \"\", \"\", \"\"];\n return food[index];\n}<\/pre>\n\n\n\nconst getFood = index => {\n const food = [\"\", \"\", \"\", \"\", \"\"];\n return food[index];\n}<\/pre>\n\n\n\nconst getFood = () => {\n return [\"\", \"\", \"\", \"\", \"\"];\n}<\/pre>\n\n\n\nconst getFood = index => \\[\"
\", \"\", \"\", \"\", \"\"\\][index];<\/pre>\n\n\n\nconsole.log(getFoodDeclaration()); \/\/ \"
\"\nconsole.log(getFoodExp()); \/\/ ReferenceError: Cannot access 'getFoodExp' before initialization\nconsole.log(getFoodArrow()); \/\/ ReferenceError: Cannot access 'getFoodArrow' before initialization\nfunction getFoodDeclaration() {\n return \"\";\n}\nconst getFoodExp = () => {\n return \"\";\n}\nconst getFoodArrow = () => \"\";<\/pre>\n\n\n\nthis<\/code> keyword, which I\u2019ll discuss in the context of classes.<\/p>\n\n\n\nClasses<\/h2>\n\n\n\n
this<\/a><\/code> keyword refers to the current instance. If you are coming from an object-oriented background, you most likely have some incorrect assumptions about it; this article<\/a> helps to demystify the this<\/code> keyword.<\/p>\n\n\n\nnew<\/a><\/code> keyword. With this, the constructor is invoked (or the default constructor, if you do not provide any), and a new object is created.<\/p>\n\n\n\nclass Fruit {\n \/\/ class body\n constructor() {\n \/\/ property\n this.popular = \"\"\n }\n whatsPopular() {\n \/\/ method body\n console.log(this.popular) \"\"\n }\n}\n\/\/ instantiate an object from the class\nconst fruit = new Fruit();\n\/\/ call the method on the instance\nfruit.whatsPopular();<\/pre>\n\n\n\nsuper<\/a><\/code> keyword, you can access the parent.<\/p>\n\n\n\nclass Food {\n constructor() {\n this.popular = \"\"\n }\n}\nclass Fruit extends Food {\n constructor() {\n \/\/ required to call constructor of parent class\n \/\/ needs to be first statement in child constructor\n super();\n \/\/ override\n this.popular = \"\"\n }\n whatsPopular() {\n console.log(this.popular) \/\/ \"\"\n }\n}\nconst fruit = new Fruit();\nfruit.whatsPopular();<\/pre>\n\n\n\nclass Food {\n popular = \"\";\n}\nclass Fruit extends Food {\n popular = \"\";\n \/\/ method by arrow function expression\n whatsPopular = () => {\n console.log(this.popular)\n };\n}\nconst fruit = new Fruit();\nfruit.whatsPopular();<\/pre>\n\n\n\n\/\/ class-based React components must extend React.Component (or a subclass like React.PureComponent)\nclass Food extends React.Component {\n \/\/ define default React state with ES2017 property syntax\n state = {\n popular = \"\"\n }\n render() {\n \/\/ required method by every class-based React component\n }\n}<\/pre>\n\n\n\nbind()<\/code> method. The code gets more understandable.<\/p>\n\n\n\nbind<\/a><\/code>; otherwise, the invocation of this.setState<\/code> causes an error.<\/p>\n\n\n\nclass Button extends React.Component {\n constructor(props) {\n super(props);\n this.state = { clicked: false };\n \/\/ this.onClick = this.onClick.bind(this);\n }\n onClick() {\n this.setState({ clicked: true }); \/\/ ERROR this.setState is not a function\n }\n render() {\n return (\n <div>\n <p>{this.state.clicked && \"clicked\"}<\/p>\n <button onClick={this.onClick}>click<\/button>\n <\/div>\n );\n }\n}<\/pre>\n\n\n\nthis<\/code><\/a>, and its value within the arrow function is determined by the surrounding scope (in our case, the render<\/code> method that has access to state with this<\/code>).<\/p>\n\n\n\nclass Button extends React.Component {\n state = {\n clicked: false\n } \n onClick = () => {\n this.setState({ clicked: true });\n }\n render() {\n return (\n <div>\n <p>{this.state.clicked && \"clicked\"}<\/p>\n <button onClick={this.onClick}>click<\/button>\n <\/div>\n );\n }\n}<\/pre>\n\n\n\nArray functions<\/h2>\n\n\n\n
map()<\/a><\/code> is used in basically every React application, e.g., to loop over a list of food objects and render every single entry within an li<\/code> tag.<\/p>\n\n\n\nmap()<\/code> function produces a new array with the same number of elements. However, for every entry of the original entry, an operation was applied to produce new entries. The following example creates a new array with duplicated fruits for every entry.<\/p>\n\n\n\nconst fruits = [\"\", \"\", \"\", \"\"];\nconst moreFruits = fruits.map(f => `${f}${f}`);\nconsole.log(moreFruits); \/\/ [\"\", \"\", \"\", \"\"]\n<\/code><\/pre>\n\n\n\nfilter()<\/a><\/code> is often used with state management because it returns a brand-new array containing only those elements of the original array that pass a provided condition.<\/p>\n\n\n\nconst people = [\n { name: \"Max\", sex: \"male\" }, \n { name: \"Jacky\", sex: \"female\" },\n { name: \"Stephanie\", sex: \"female\" }\n];\nconst women = people.filter(person => person.sex === \"female\");\nconsole.log(women); \/* [{ name: \"Jacky\", sex: \"female\" }, { name: \"Stephanie\", sex: \"female\"}] *\/..<\/pre>\n\n\n\nfindIndex()<\/a><\/code> returns the index of the first element that passes the test; otherwise, it returns -1<\/code>.<\/p>\n\n\n\nconst fruits = [\"
\", \"\", \"\", \"\", \"\"]; \nconsole.log(fruits.findIndex(fruit => fruit === \"\")); \/\/ 1\nconsole.log(fruits.findIndex(fruit => fruit === \"\")); \/\/ -1\nconsole.log(fruits.findIndex(fruit => fruit === \"\")); \/\/ 2 (first match)<\/pre>\n\n\n\nfind()<\/a><\/code> returns the first entry that passes the test. This is useful in the context of React state management. As an example, we have a list of users. We clicked on a particular user in a list and want to display a modal dialog showing this user\u2019s information.<\/p>\n\n\n\nconst users = [\n { id: 1, name: \"Max\", sex: \"male\" },\n { id: 2, name: \"Jacky\", sex: \"female\" },\n { id: 3, name: \"Stephanie\", sex: \"female\" }\n];\nfunction logUserInfo(id) {\n console.log(users.filter(user => user.id === id));\n}\nlogUserInfo(2); \/\/ { id: 2, name: \"Jacky\", sex: \"female\" }<\/pre>\n\n\n\nImmutable vs. mutable values<\/h2>\n\n\n\n
\/\/ immutable use case\n\/\/ Change strings won't work. Throws error in strict mode\n\"use strict\";\nconst hello = \"world\";\nhello[0] = \"W\"; \/\/ try to upper case the first char\nconsole.log(hello); \/\/ world (in none-strict mode)<\/pre>\n\n\n\n
\/\/ mutability use case\nconst meal = {\n kind: \"\",\n origin: {\n country: \"Italy\"\n }\n}\nconst fruit = {\n kind: \"![\"?\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f347.svg\")
\",\n origin: meal.origin\n};\nconsole.log(`${fruit.kind} from ${fruit.origin.country}`); \/\/ ![\"\u2705\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/2705.svg\")
\" from Italy\"\nconsole.log(`${meal.kind} from ${meal.origin.country}`); \/\/ \" from Italy\"\n\/\/ we bought new grapes from Germany\nfruit.origin.country = \"Germany\";\nconsole.log(`${fruit.kind} from ${fruit.origin.country}`); \/\/ \" from Germany\"\n\/\/ we have caused an unwanted side effect\nconsole.log(`${meal.kind} from ${meal.origin.country}`); \/\/ ![\"\u274c\"](\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/274c.svg\")
\" from Germany\"<\/pre>\n\n\n\nObject.freeze()<\/a><\/code> or third-party libraries like Immutable.js<\/a> to make them immutable.<\/p>\n\n\n\nclass Button extends React.Component {\n state = {\n clicked: false\n } \n onClick = () => {\n \/\/ don't do this\n this.state.clicked = true;\n \/\/ instead do this: pass a new object to setState\n this.setState({ clicked: true });\n }\n render() {\n return (\n <div>\n <p>{this.state.clicked && \"clicked\"}<\/p>\n <button onClick={this.onClick}>click<\/button>\n <\/div>\n );\n }\n}<\/pre>\n\n\n\nuseReducer<\/code> or Redux<\/a>, you should update state like this.<\/p>\n\n\n\nconst newState = {\n ...state, \/\/ creates a copy of the current state\n darkMode: action.darkMode, \/\/ just override to reflect the changes\n};<\/pre>\n\n\n\nCallback functions<\/h2>\n\n\n\n
setTimeout<\/a><\/code> gets a callback function as the first argument that is called after the timer has expired (second argument).<\/p>\n\n\n\nwindow.setTimeout(() => console.log(\"I'm a callback function\"), 1000); \/\/ after 1s: \"I'm a callback function\"<\/pre>\n\n\n\n
useEffect<\/a><\/code>.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n
Full visibility into production React apps<\/h2>\n\n\n\n