[Discovery] React / Next

paulahemsi commented 2 years ago

a core philosophy of React is composing applications from many specialized reusable components.

React component names must be capitalized.
false, 0, empty strings (""), NaN, null, and undefined all become false. All other values become true.

hooks may only be called from the inside of a function body that defines a React component

paulahemsi commented 2 years ago

JavaScript's for loop is the same as that in C and Java: it lets you provide the control information for your loop on a single line.

for (let i = 0; i < 5; i++) {
  // Will execute 5 times
}

JavaScript also contains two other prominent for loops: for...of

for (let value of array) {
  // do something with value
}

and for...in:

for (let property in object) {
  // do something with object property
}

paulahemsi commented 2 years ago

objects

JavaScript objects can be thought of as simple collections of name-value pairs. As such, they are similar to:

Dictionaries in Python.
Hash tables in C and C++.

The fact that this data structure is so widely used is a testament to its versatility. Since everything (bar core types) in JavaScript is an object, any JavaScript program naturally involves a great deal of hash table lookups. It's a good thing they're so fast!

The "name" part is a JavaScript string, while the value can be any JavaScript value — including more objects. This allows you to build data structures of arbitrary complexity.

paulahemsi commented 2 years ago

Destructuring

we can use it to extract and gather the values of an object's properties into separate variables:

const Hello = (props) => {
  const { name, age } = props
  const bornYear = () => new Date().getFullYear() - age

  return (
    <div>
      <p>Hello {name}, you are {age} years old</p>
      <p>So you were probably born in {bornYear()}</p>
    </div>
  )
}

//The props that are passed to the component are now directly destructured:

const Hello = ({ name, age }) => {
  const bornYear = () => new Date().getFullYear() - age

  return (
    <div>
      <p>
        Hello {name}, you are {age} years old
      </p>
      <p>So you were probably born in {bornYear()}</p>
    </div>
  )
}

paulahemsi commented 2 years ago

Event handling

Button elements support so-called mouse events, of which click is the most common event.

We set the value of the button's onClick attribute to be a reference to the handleClick function defined in the code.

paulahemsi commented 2 years ago

Passing state to child components

It's recommended to write React components that are small and reusable across the application and even across projects.

One best practice in React is to lift the state up in the component hierarchy. The documentation says:

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.

paulahemsi commented 2 years ago

A more complex state

The component's state or a piece of its state can be of any type.

It is forbidden in React to mutate state directly, since it can result in unexpected side effects. Changing state has to always be done by setting the state to a new object. If properties from the previous state object are not changed, they need to simply be copied, which is done by copying those properties into a new object, and setting that as the new state.

paulahemsi commented 2 years ago

Debugging

Keep the browser's developer console open at all times.

The Console tab in particular should always be open, unless there is a specific reason to view another tab.

Keep both your code and the web page open together at the same time, all the time.

When you use console.log for debugging, don't combine objects in a Java-like fashion by using the plus operator. Instead of writing:

console.log('props value is ' + props)

Separate the things you want to log to the console with a comma:

console.log('props value is', props)

If you use the Java-like way of concatenating a string with an object, you will end up with a rather uninformative log message:

props value is [Object object]

Whereas the items separated by a comma will all be available in the browser console for further inspection.

You can pause the execution of your application code in the Chrome developer console's debugger, by writing the command debugger anywhere in your code.

The execution will pause once it arrives at a point where the debugger command gets executed. By going to the Console tab, it is easy to inspect the current state of variables.

The debugger also enables us to execute our code line by line with the controls found on the right-hand side of the Sources tab.

You can also access the debugger without the debugger command by adding breakpoints in the Sources tab. Inspecting the values of the component's variables can be done in the Scope-section.

React developer tools extension adds a new Components tab to the developer tools. The new developer tools tab can be used to inspect the different React elements in the application, along with their state and props

paulahemsi commented 2 years ago

modules

A whole React application can be written in a single file. Although that is, of course, not very practical. Common practice is to declare each component in their own file as an ES6-module.

In smaller applications, components are usually placed in a directory called components, which is in turn placed within the src directory. The convention is to name the file after the component.

Note that when importing our own components, their location must be given in relation to the importing file. The filename extension .js can be omitted.

paulahemsi commented 2 years ago

Hooks docs

paulahemsi commented 2 years ago

paulahemsi / transcendence