Learning React

dcjacoby1 — Fri, 19 Apr 2024 00:49:36 +0000

These past few weeks have been both challenging and rewarding. Learning React framework/library (I am not going to pick a side in that argument) has taught me how to maximize the potential of Javascript. In the last phase, I spent numerous hours setting up the HTML and javascript, just to build a single webpage with a few functions. Using React has made that experience much less tedious.  Although, I am glad we learned the manual way first to better understand what goes on behind the scenes, and how the DOM plays a role.      React has helped me view WebDevelopment from a different lens. One of the things I found useful with React is the ability to use components. Components make it much easier to reuse code, and get around manually setting up the HTML.  It also feels convenient separating each piece of UI into a separate page, using a tree of hierarchy - using the parent child relationship.  The difficulty I had with components was understanding the relationship between components - where to place information in the parent-child relationship (to be discussed soon).

The next topic we covered was passing props. Props are a way of sending info down from  a parent to child component. The format I find most useful was {destructuring}. Conceptually, I see a child component as a function within a parent component - let me explain. The prop passed down is essentially a parameter for the child component , where the child component uses the data passed down. That is no different than a function, other than the fact that the child component has its own UI elements. Also, similar to a function, we have the ability to pass down callback functions, that is very useful when we talk about state.

  Just as mentioned, hooks are one of the most useFul tools in React - the two main we dealt with are useState and useEffect. UseState allows us to store data and track the changes over the lifetime of the application. Another convenient aspect is that each change in react initiates a re-render to that component and any child component that is affected by state. The most important thing to think about state is how high up in the tree to store it. You must think which components will use that specific state and whether it needs to be stored in a parent component to be accessible by multiple child components.  

We also use State for controlled forms. Controlled forms are forms that use State. There’s 2 things to remember with a controlled form - we need onChange to track all changes made in the form input, and a value = the input, so that the input is always in sync with the current form state. This means that whatever the current value (inputted by the user) we will be storing, should match what displays in the text field of the input box. This may sound confusing, but remember to have both. And it is most convenient to have a handleChange function (eventHandler for onChange) or an anonymous  function, because if an immediately invoked function is present, it will trigger a re-render before the form is submitted.

The last topic I will be covering is useEffect. Effects are side effects, or an action that occurs without direct intervention from the user. The most common example is fetching, a useEffect is needed for the initial rendering of data, using an API, when the page loads. Use effects can also use dependancies. One dependency would be an empty array [ ] , which means only run on the initial load of a page. No dependency, just leaving the field blank will not set a limit on the amount of times the useEffect will run. The last thing discussed is variable dependency. This means any time there is a change to the data stored in a variable, the page will re-render.

New to Web Development

dcjacoby1 — Thu, 28 Mar 2024 01:19:22 +0000

Over the past couple of months I have been building a great foundation for Web Development using Javascript, HTML, and CSS. The topics we covered ranged from the fundamentals all the way to communicating with the server. Let me walk you through the journey.

Javascript Fundamentals - Just like any programming language, Javascript uses variables. Remember, let can be reassigned but not redeclared, var cannot be reassigned or redeclared, and don't use var(you can but not recommended)!

The only other thing I will tell you about fundamentals is that there are 7 javascript data types: numbers, strings, booleans, symbols, objects, null, and undefined. Moving on.

Javascript Functions - Functions are the epicenter of Javascript - they only fly First Class.
There are many ways to create and define functions in Javascript. I find myself using arrow functions the most => but they can't be hoisted :(
Anonymous functions are great for callback functions.
Standard functions are great, but don't have the built in return function that arrow functions have (make sure you know when to use and when not to use).

Scoping - Scoping tells us which functions and variables can be accessed, and where they can be accessed. Global variables can be accessed by any function, while local variables are only accessible to functions and variables within its scope. It all connects via scope chain. It sounds confusing, but is easier to understand visually. Moving on.

Data Structures - The 2 main data structures to focus on in Javascript are Arrays and Objects.[ Arrays contain elements and can be accessed via index]. {Objects contain key:value relationships and are accessed via the key or value}. There are many ways to loop through each element of an object or array: forEach and for...of run through each element of an array, while for...in iterates through each key:value in an object. Don't forget about for loops!

Array Iteration - Make sure to know how to use .map and .filter: .map creates a new array that takes an original array and applies a callback function to it to change the elements. .filter creates a new array that only includes the elements that meet a certain criteria.

Three Pillars Of Javascript

The DOM - The DOM is the visual representation of our code. I find it easy to select elements to use in my Javascript file by creating a live server in google chrome, then clicking (command option i). From there I can see each element and use the console to test out my code.

Javascript Events - JS events are where the page comes to life. Any action you use when searching the web was built using a javascript event: a click, search, keypress, hover elements, the list goes on...
Without them, our website is just plain boring.

Communicating With The Server - This is the final layer between Frontend and Backend. We use fetch to connect our remote Database to our frontend. All the data storage is kept in a JSON file, where we can access it via a GET request.

And thats all folks. Stay tuned for more.

DEV Community: dcjacoby1

Learning React

New to Web Development