DEV Community: dannohh

A Very Basic JavaScript Intro by Dannohh and chatGPT!

dannohh — Fri, 09 Dec 2022 20:10:10 +0000

Welcome to Dannohh and chatGPT's JavaScript basics tutorial. We'll be your guide through the world of JavaScript.

Before we get started, let's go over what you'll need to follow along with this tutorial. First, you'll need a computer with a text editor installed. We'll be using the browser developer tools in this tutorial, but you're free to use any text editor you're comfortable with. You'll also need a web browser to run our JavaScript code. Any modern browser will do, so feel free to use your favorite.

Now that you have everything you need, let's jump in and start learning about JavaScript.

JavaScript is a programming language that is commonly used to add interactivity to websites. It allows you to create dynamic content that can update in real-time, making your web pages more engaging and user-friendly.

One of the key features of JavaScript is its ability to manipulate the Document Object Model, or the DOM. The DOM is a representation of the structure of a web page, and JavaScript allows you to access and modify its elements. This allows you to create highly interactive web pages that can respond to user input and change in real-time.

Let's try out some basic JavaScript to see how it works. Open up your text editor and create a new file. Save the file as "index.html". This file will be our web page that we'll be working with.

Next, let's add some basic HTML code to our page. Type the following into your index.html file:

<html>
<head>
  <title>JavaScript Basics</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

This code creates a simple web page with a heading that says "Hello, World!". Save the file and open it in your web browser. You should see the page with the "Hello, World!" heading.

Now, let's add some JavaScript to our page. In your index.html file, add the following code just before the closing

React Hooks and state

dannohh — Mon, 10 Aug 2020 14:56:17 +0000

With React Hooks, we can give our functional components some state to keep track of and render() with said component or even children components. To do this we can use the useState() hook to set our initial state and the setState() method for updating. When we want to do something AFTER our component renders for the first time, (Mounts) we can use the useEffect() method. So, we set the initial state of our component with the useState() method and update the state with the setState() method.

Being able to manipulate and set the state of our functional components allows more freedom and flexibility while building or Apps with React. For example, when we want a small component to be able to keep track of, and update its own state without rendering it through a parent component, we could use a hook instead of the traditional Class component with a constructor, saving time, space and making our code easier to read for humans! Sweet!

React MD

dannohh — Wed, 05 Aug 2020 16:44:18 +0000

JSX

JSX produces React Elements. It isn't HTML even though it looks similar. It comes with the full power of JS. Instead of separating concerns by file type, React separates concerns by Component. You can put any JS expression in a JSX element by using curly braces 👉 {x + 5*}* 👈

If a JSX element is empty (<div></div>), you can close it immediately like this <div />

Rendering React Elements

Elements are the smallest building blocks of React. React Components are made up of Elements. Elements are immutable and represent the UI at a certain point in time.

Components and Props

Components can feel like JS functions. They take an argument called "Props" and describe what an application element should look like. Users of React can define their own components. They will look like HTML but with custom names defined by the user.

render() {
    return (
        <MyCustomReactElement />
    )
}
//The custom component can have custom "attributes", also defined by the user

Always start component names with a capital letter.

All React components must act like pure functions with respect to their props.

State and Lifecycle

State is similar to props (short for properties of a React Element) except that it is PRIVATE and fully controlled by the component.

State is an object declared inside the component with key: value pairs.

Whenever a component is rendered for the first time, the term is "mounted"

                                                                                                                                             👆

                                                                           **👉ComponentDidMount(), or later...useEffect()**

Special methods we can declare inside the component to run some code after the component mounts are called Lifecycle methods.

Handling Events

Pass camelCased functions inside curly brackets as React element event handlers. Like this...

<Button onClick={doSomething} /> //Notice no parenthases

Keep in mind that preventDefault() must be explicitly called if you want to prevent default behavior of a component.

Lifting State Up

If two or more components need to reflect shared data, "lift their state" up to their next common ancestor → parent possibly

I think this can be explained best with an example...Lets try...

<CustomComponentOne /> //I hold some state to display
<CustomComponentTwo /> //I also show the same state as CustomComponentOne

<CustomComponentHolder /> // I render the above two components, so I could hold their states

# Tools of the Trade

dannohh — Mon, 27 Jul 2020 16:37:16 +0000

A 'closure' is a function that has access to it's outer function's variables and methods. It can also access variables and methods within it's own scope and of course, the global ones as well! This means that JS callbacks are also closures.

When using callbacks, I like to imagine that when the callback function is complete, it allows the higher-order function to close out. Much like when we're done using a saw to cut an angle in some wood, we close out the task of cutting when the wood is no longer whole and the saw has stopped moving, then we move on to the next promise of screwing it to another piece of wood 🛠️! ...or maybe painting is the next task 🎨. Either way, we've closed and are ready for the next!

filter() and map() vs. forEach()

dannohh — Mon, 20 Jul 2020 16:35:44 +0000

What are some of the advantages of using map() and filter() vs. using forEach() methods?

Firstly, the forEach() array method always returns a value of undefined. This might be good for some scenarios, but not all. It also mutates our original array, discarding the return values.

To Be Clear~

forEach() MUTATES the current array!

VS. map() and filter()

map() and filter() methods both return new arrays that we can work with, without affecting the original array! Sweet! New Toys 👍 🎅

Reading, Writing, and Arithmetic Operators :)

dannohh — Mon, 13 Jul 2020 15:31:57 +0000

Reading Code~

I think everyone would agree that the ability to read code is imperative to being able to write good code. It has been just recently that I personally have realized how "breaking down" code in my own words has helped me become a better aspiring developer and student.

How I read code~

In the beginning, I had heard that before you begin to write code, you should at least know how to read it. I thought that maybe the syntax or keywords may be the most important part of that process. It turns out I was wrong 👎

Don't get me wrong! Syntax and keywords are super important! However, the LOGIC behind syntax is what I really wanted to know...

As a soldier, it was imperative that complex concepts be "broken down" into smaller, easy to digest concepts so that every other soldier could understand, regardless of their education level. So when I read code to myself or out loud to anyone else, it looks like this.. ⬇️

A simple example

// a little JS

document.querySelector('div').addEventListener('click', myFunction);

In this short example code snippet, I try to take the entire idea into account and find myself asking the question

What does the dev want this code to do???

Look at the elements Dannohhh! Looks like we're working with some HTML elemnts! Sweet! I know a div element is about to be manipulated in some way. because we're "grabbing" it with a querySelector() method. Perfect, now lets do something with the div! Maybe we want to addEventListener?? YUP! moving on, what are we going to listen for? A CLICK event. And finally, what's going to happen after that 'click'? Well, it turns out that myFunction is going to happen!

So in my 🧠~

This says to me: Dannohhh, pay attention! This code is going to grab the 'div' element from the DOM, and listen for a click, when the div is clicked, myFunction will be executed! Likely causing AWESOMENESS to happen!

Thank you so much for reading and hopefully this helps someone!