Props 4

Chapter 02: Check Detail with Official Document - JSX, Props, State, Life Cycle, Event, Rendering, List and Form

Why Do We Need To Read Official Document? React is Library. And we can understand deeply when we read the inventor's intention when we read official document. Create React App First of all, we need Node to use 'React Create App' So check whethere we have Node on our computer or not. Node provides the environment for React app to work in local environment. Node installed -> npm(node package manag..

React - From A To Z 2022.11.18

Section 08: Time to Practice - Time to apply what we learned thus far

The goals 💪🏻Let's Practice What We've Learned! event.preventDefault() The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form Clicking on a link, prevent the link from following the URL Note: Not all events are..

Section 06: Styling Components - Make Your Apps Look Good

The goals 💪🏻Conditional & Dynamic Styles ✌🏻Styled Components 👍🏻CSS Modules Inline Styles React components are composed of JSX elements. But just because you’re not writing regular HTML elements doesn’t mean you can’t use the old inline style method. The only difference with JSX is that inline styles must be written as an object instead of a string. Here is a simple example: import React from "re..

Section 05: Rendering Lists & Conditional Content - Working With Really Dynamic Content

The goals 💪🏻Outputting Dynamic Lists Of Content ✌🏻Rendering Content Under Certain Conditions Array.prototype.map() The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, ..