reading notes for code fellows
All of these will be important for our upcoming week of diving back into JavaScript and React
ECMAScript 2015, or ES6, introduced the let keyword, which creates variables that cannot be hoisted or redeclared, as well as the const keyword, which can’t be redeclared or reassigned, but is not immutable. ES6 also brought in the existance of template literals, which allow you to embed expressions in strings or span strings across multiple lines. If you want to assign a property to a key with the same name, you just have to omit the property half instead of writing the whole thing out. If you’re assigning methods within an object, you can omit the function keyword. You can also use curly bracers to assign properties of an object to their own variables. ES6 introduced a more concise syntax for looping through iterable objects. It also brought in the existence of default parameters, which will be used if an argument is not invoked. The spread syntax was introduced to allow you to expand an array. ES6 is also where classes came into being over the prototype based constructor function and the extends keyword now can create a subclass. You could also now create modules that can export and import code from different files.
JSX is a syntax extension for JavaScript that is used with React to describe what the UI should look like. Any valid JavaScript expression can be placed in JSX and it is used by wrapping it in curly bracers. JSX tags may also contain children. It is also safer to use, as it prevents against injection attacks.
An element describes what you want to see on the screen and are plain objects. These elements are immutable, but the UI itself can be updated by creating a new element and passing it to root.render(). By default, react will only update what’s necessary.
Components allow you to split the UI into independant reusable pieces, they act like JavaScript functions. When React sees an element that represents a user-defined component is passes JSX attributes and children through as an object called props. Components can also refer to other components, and you shouldn’t be afraid to split them apart as much as you need to. A component should never modify props. If you have a function that always has the same output for the same input and doesn’t modify anything that comes in, it is considered ‘pure’.
State is similar to props, but is controlled by the component itself. When you add things to the DOM it is called ‘mounting’. Removing things is called ‘unmounting’. You can declare special methods within a class that will run code when a component mounts or unmounts, these are known as lifecycle methods. You can’t modify state directly, but you can change things within state using setState. Components have a unidrectional data flow, meaning they can only affect things below them.
With tailwind, you style elements by applying pre-existing classes directly in your HTML, which allows us to implement a custom component design without having to write any custom CSS. It is similar to inline styling, but is designed with constraints, and allows things like hover and focus, which you can’t usually achieve with inline styling.