DEV Community: Jose Campos

React: Components & Props

Jose Campos — Wed, 05 Apr 2023 01:12:37 +0000

The Basics of React Components

The main puzzle piece of React is components, they compartmentalize our code into parts, which include the presentation and how the code executes. If the concept is a bit difficult to grasp, think of little baskets of code, keeping everything organized. Components contain all sorts of code but they still have the same objective. Which is to describe what should be rendered to the DOM (Document Object Model).
Component Example:

The function BasketofCode is declared and then JSX is returned.JSX is Javascript XML, which allows us to write HTML in React and makes it easier to write and add HTML in React (for more in-depth on the matter, see provided links below). React creates said element and it will display like so (Note: is important that all elements have to be wrapped in a

for React to work)

React will take this JavaScript code, translate the JSX syntax within the return() statement, and produce HTML that the browsers will know how to show to the user.

How to put Components to Use

It is the norm to set the topmost level component to App() and have it return other components (this is where the compartments show).

The code inside the return() is seeing what JSX can do. This does somewhat look like HTML with that but it's more intricate than that. We are also rendering two elements, and we set it to where it will render the component BasketofCode before Items. resulting to look something like this:

Naturally the App() Component is the parent to the children components BasketofCode and Items, so we can reference the App as both of them combined.

Component Names

It is crucial to name a component with a capital letter. App(), BasketofCode(), Items(),etc. It is a React rule to render our components correctly, also helps other React developers interpret what are Javascript functions and what is React Components.

The code would run as a regular 'codeeaxmple' HTML element versus an actual component.

Proper syntax and letter placement will give us the desired output.

Class Components

There are multiple ways to write out components. the regular function Component you have seen.

can also use in an arrow syntax method:

Components are the base and heart of React when structuring your front end.

Code Organization

To show multiple Javascript across multiple files we'll need to Import and Export them accordingly.
Developers like to separate their code into different parts/segments to make it more modular, hence modular code.
Stricter variable scope: Variables declared in modules are private unless explicitly exported, you don't have to worry about harming the global variable scope by using modules.
Single-responsibility principle: Each module is in charge of accomplishing a certain piece of functionality, or adding a specific feature to the application. Easier to navigate: Modules that are separated and clearly named make code more readable for other developers. Easier to debug: Bugs have less room to hide in isolated, contained code. Produce clean and DRY code: Modules can be reused and repurposed throughout applications.
Therefore it isn't uncommon to see a React Tree look like the following:

To define variables in one file and use those variables in other files throughout the code project, we'll need to import and export accordingly.

Here we imported React to use in the code, and at the very end we exported it so that we could import it into the App() to use all the JSX from that component.
Example:

Here is a more complex set of files being imported into the App() Component, so it could all be complied together and rendered to the DOM. (More in-depth on the matter is in the MDN links provided)

Props

To know what props are, we have to go back to components. Components are functions that can take props as arguments as an argument and return JSX. Props allow us to pass information from a Parent Component to a Child Component

As shown, we can see the App() component has information on a variable called "propName", this propName is passed to the child Items. In order to the prop "propName" we have to accept it in the Items Component as well. (Quick tip props are camel-cased and we wrap them in { } )For props that are strings, we don't need to place curly braces around the values; for other data types (numbers, booleans, objects, etc), we need curly braces.

Props can be accessed in the child components via an object that is passed into our component function as an argument.
The purpose of props helps share data from parent-to child components, making them incredibly versatile. Giving us the opportunity to make our components more dynamic, more reusable.

Links for more depth:

https://legacy.reactjs.org/docs/react-api.html

https://legacy.reactjs.org/docs/introducing-jsx.html

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

https://reactjs.org/docs/components-and-props.html

JavaScript Functions

Jose Campos — Mon, 23 Jan 2023 17:35:29 +0000

What is a function, how to define it?

A function is an object that contains a sequence of JavaScript statements. We can execute or call it multiple times. A function's purpose is to group bits of JavaScript code and help improve, read, and debug. This is used on non-abstract code, single tasks if you will. (Remember ' ; ' is optional)

Now we 'abstract' the code and create a collective name for it.

How to Call a function?

In JavaScript, to execute the code of a function you simply add a set '( )' after its name. Note this only works for a function we defined or nothing will be called and receive an error. The '( )' tells JavaScript to invoke a function because of this, it is an invocation operator.

Generalize a function

In coding, we want to make everything easier and generalizing functions is the way to accomplish that. Let's say we had some code about a vet clinic giving employee-specific instructions to care for each different cat and breed. Rather than hard-coding each cat/ breed in multiple objects, refer to them as variables in the function using string interpolation in one single function. That would be simpler and easier, only the variables would need to define.

what we learned so far

how to grab a list of operations and gather them into abstract code to create a function, then generalize that function to simplify code and its execution.

Function Return Values

When we call a function, it is sometimes helpful to return something. Some may call them a description/summary of what is going on in the code. We would like the function to 'make a purchase' to return 'product(purchased)'. Javascript functions can return things as well.
Example:

The return statement tells Javascript to return whatever value to the right of it, the value can be an expression/string/ or a number. In the code when the return is reached, the return will be executed despite any code afterward. The code following after will not be executed(returned). From the example code if hoursOfOperation === 'Closed' returns true. Hence the only code returned was ${catName} the ${catBreed} cat didn't get anything done today. These return values can also be used as inputs in other functions or saved as variables. The basic syntax of the Function is like so:

Function Expression

We gathered how to declare a function or function declaration but there are more ways to write out the function. There's another expression called arrow functions.
Example of a function declaration:

Can also be written so

The function expression is everything to the right of the assignment operator (=) of the function() {..}.
If it is not making any sense yet, a good analogy can help understand.

The expression would be that 9 - 2 returning 7 and assign a variable to expressionDiff, the same would go for 2 + 5 returning 7.The variable would also be assigned to expressionSum.

Back to our expression function() { return 'burgers, fries, pizza, wings' } assigning a variable to food by returning a thing that can be called.
The function expression (everything after the =) is known as an anonymous function. Unlike a function expression, an anonymous function doesn't have a name. You can however assign it to a variable that refers to a callable thing. Invoking food() will call this anonymous function. Food() is now the name for that anonymous function. Function declarations and function expressions have some differences but give the same output. It is up to the user to use either or, in JavaScript the user will learn over time when to use which method.

Arrow Functions

Arrow Functions allow function declarations to use the arrow syntax of the function expression, ultimately not utilizing the keyword function. It is best to get used to using this method, not only does it clean up the code for the user but also makes it simpler to follow along for other users. Debugging code would especially be easier to complete.
Example:

Back to saying Arrow functions make code look a lot better, they do not need any curly braces '{ }', making them implicit returns. Only returning the result of the last expression, Can also see the body of the function is in a single expression. No return keyword is required since it's not an explicit return, only instance in JavaScript where this occurs.

The parameters are to the left of the =>, like a function declaration listed parameters are separated by commas inside a set of '( )'.

Arrow functions do not necessarily always use 2 parameters, they can use one. If that is the case the set of '( )' is not mandatory. Most coders won't use it.
Example:

With multiple lines of code in arrow functions, a return keyword is needed along with a set of { } after the =>
Example:

Know when to utilize Arrow Functions

It's best to utilize Arrow Functions when you have to deal with a group of data one at a time, AKA JavaScript iterator methods.
For example, you had a set of projects submitted but the Teacher has to grade them separately.

Many methods utilize Arrow Functions, .map()/.filter().forEach(). For now, let's see an example of .map():

In each iteration through the sqaureNums array, map passes the value of the element to the arrow function, which is the argument being passed and assigned to parameter x. A new array is stored
of squared values. That new array is then returned when map iterated through all the elements. (link for .map at the bottom)

Conclusion

The above material should give you a better grasp on functions, functions expressions, function declarations, and arrow functions.
To know what they are, what they are used for, and when is the best time to utilize them in JavaScript. Did I already mention functions?

Study Links on Content

I just changed my life for the better?

Jose Campos — Sun, 06 Nov 2022 19:05:45 +0000

I just began my journey into Flatiron School for software engineering. I chose to pursue a different career path due to the flexibility and honestly the interest coding will bring me. I have been in my current job around 6 years and though it is a government job with great benefits I don't find happiness in it nor see myself here for 10+ years.
Day 1 was a little overwhelming but struck luck joining a discord with other flatiron students in the same situation as I. Me being very social, I had no issue making friends quickly. :) We all hype and push each other to press on.
1 week down, 39 to go!