Week 9 is an explostion of React

Notes and learnings for week 9

This week's learning focuses on JavaScript lessons, coding challenges, and understanding more of the syntactical differences between Python and JavaScript.

One difference is the location where both can be run from. JavaScript can be run in web browsers and runtime environments like Node.js, while Python can be run in desktop applications, web servers, Integrated Development Environment software, and web frameworks like Django.

The DOM: Document Object Model allows JavaScript code to interact with the structure and content of a web page. It gets loaded when a web page is loaded and represents all elements on the page.

JavaScript has a spread operator. An example is return Math.max(...numbers);. The "spread" operator (...) expands an array into its elements. In this case, it is being used to take the variety of numbers passed in and develop it into individual arguments for the Math.max function, which allows it to find the maximum number among the array elements.

Another method I learned and used when solving coding challenges this week was the hasOwnProperty method. This is a method belonging to the Object prototype. It allows you to check if an object has a property defined on itself (not on its prototype chain). It returns a boolean indicating whether the object has the specified property.

Python Functions and JavaScript Functions

Both Python and JavaScript have functions. You have now seen how to write them! Python defines a function using the "def" keyword, and JavaScript uses the "function" keyword.

Throughout this course, we have used analogies and explanations to describe what a function is, including:

• A little value factory
• A way to organize our code
• A way to name many lines of code
• A way to treat many lines of code as one thing

Nearly everything in Python is an object:

• A dictionary, {"name": "Noor"}, is an object, an instance of the built-in dict class.
• A list [1, 2, 3] is an object, an instance of the built-in list class.
• A string, "Hello!", is an object, an instance of the built-in str class.
• An integer, 3, is an object, an instance of the built-in int class.
• An example of a custom-defined class Blog is an object.

What can you do with objects?

• You can call methods on them.
• You can pass them to functions as arguments.
• You can return them as values from a function.

What is lexical scope, and how does it differ from a closure?

Lexical scope describes how nested (or "child") functions have access to variables defined in parent scopes.

What are anonymous functions?

This is the idea behind anonymous functions, which do not need a name because you will never directly reference them by their given name.

JavaScript is a language that lets you do multiple things at once without stopping other parts of the program. This is called asynchronous programming, and it is excellent when you are waiting for information from a server because you do not have to stop everything else you are doing. Instead, you use tools like callbacks, promises, and async/await functions to keep the program running smoothly while you wait for the information. This makes your program faster and more pleasant to use.

The fetch function returns a promise.

In JavaScript, a Promise is an object representing an asynchronous operation's eventual completion or failure. It allows you to write asynchronous code that looks more like synchronous code, avoiding the need for deep levels of nesting and callback functions.

A Promise has three states:

• Pending: The initial state; the promise is neither fulfilled nor rejected.
• Fulfilled: The operation was completed successfully, and the promise has a resulting value.
• Rejected: The operation failed, and the promise has a reason for the failure.

Async needs to be in front of await for the code to work.

The JSON method returns a promise.

Value Objects don't have an identity; you can only refer to them by their properties. If I remember correctly, we have the names and abbreviations for states.

JWTs, Cookies, XSS, CSRF

JSON Web Tokens (JWTs) are digital signatures used to represent information between two parties securely. This information can be used to identify a user or to grant them access to specific resources. JWTs are encoded in a way that is compact and safe to transfer over the internet and is signed using an industry-standard process.

Cookies are small pieces of data that websites save on a user's computer. This data stores information about a user's activities on a website, such as login sessions and user preferences. Engineers use this data to make the user experience better. Advertisers can also use cookies to track user behavior and show ads tailored to their interests.

Cross-site scripting, or XSS, is a type of security vulnerability in web applications that allows attackers to inject malicious code into web pages viewed by other users. When this code is executed, it can give the attacker access to sensitive information, such as session cookies. XSS attacks occur when an attacker sends malicious code, usually in the form of a script, to the end user's browser, which the browser then runs without knowing it should not be trusted.

Cross-Site Request Forgery (CSRF) is an attack that tricks an authenticated user into doing something they didn't intend on a web application. This could be something like transferring money from their account or deleting files, and it works by exploiting a website's trust in the user.

What is React and how does it work in a basic explanation

The React frontend framework is built on JavaScript and uses the concept of components. Components are blocks of code that allow developers to split up the application into independent and reusable pieces. The components hold all data and functions necessary to render the UI and define what should be generated. Each component is then rendered into the DOM (Document Object Model), and any changes to the component trigger a re-render in the DOM. The React framework then keeps track of any changes made and updates the DOM accordingly to ensure a seamless user experience. React supports data flow through unidirectional data binding, allowing developers to debug and test their code efficiently.

The coming week

Hack Reactor/Galvanize is on a company the comprehensive week of spring break the following week, and we will be starting week ten on April 17th. I'm looking forward to this spring break week by making more time for meditations, sleeping in an extra hour, taking advantage of more family outings, and spending time reflecting on everything I have learned up until this point in the course and also spending my time this week sharpening my skills with React.

The volcano Nevado del Ruiz still has yet to erupt and is being monitored closely and is expected to explode potentially within the next couple of weeks. This coming Saturday, my family and I have been invited to a barbecue of friends we recently met who live just north of Santa Rosa de Cabal and are from Alaska. I look forward to providing video footage of this meetup and documenting another area around the Santa Rosa de Cabal. Ciao for now!