ReactJS components

sitoleslie — Mon, 31 Aug 2020 01:35:12 +0000

Hey,guys! Welcome to another week of my blogs! In this blog, I will be introducing you to React. What is React? React is the most popular front-end Javascript library for building user interfaces.If you want to bring more value to the table when applying for jobs having react on your resume is very important. But, first let's get you all set up then we can talk about components.

Getting started. Create React App is a way to create a single-page application. First, we must set up our environment by running these commands below in your terminal:

npx create-react-app new-app(name of your app)
cd new-app
npm start

This will take a while to complete so be patient..

How it looks successfully:

Last set up step:

Now, that we have gotten you all set up. Let's move on to the next point... Component is a section or part of the user interface. When creating with React we are using independent and isolated components to create complex user interfaces. User interface is what the user sees and interacts with. First, you will start with a root component. The root acts as a container for the whole application and has child components.

In Javascript, the component is a class that will have a state and render method. The state will contain the displayed data when it is rendered. The render method will describe what the user interface will look like. Render has an output method that is a react element that reacts to a DOM element known as a plain object that holds the DOM element in memory. React is straight forward because we do not have to hard code in query by manipulating the DOM or attach event handlers to the DOM elements. This is done by changing the state component allowing React to update the DOM. In other words, React will react to state changes.

Let's build our first component. First, under your src folder create another folder named components. All of your components will be located here. Then create a new file under the same folder and name it followed by .jsx. The jsx extension is better for code completion. Now, let's import the component class from the react module on the second line. Then create a class that will extend from the Component that we imported on the top from the React module. The component class will contained various amounts of methods that we are going to inherit for this class we created.

In this example, we will only have the render method. Inside we will return an jsx expression which will get compiled to calls to React.createElement. Therefore, the react object on line 2 has to be imported regardless if the code will be used or not. Once the class is defined, it will be exported separately on line 10.

Now, in your index.js you must import your First component. Now, we are going to render our First component by extending the html vocabulary so wherever we have the First component we are also getting the output of that component that is determined by what is being returned in the render method. Therefore, in your browser you will see what is being render.

Congrats, you just created your first component. (:

The 'this' keyword

sitoleslie — Mon, 24 Aug 2020 00:35:16 +0000

In this post, we will take a dive into the keyword "this". It can be very confusing at first, but once we take a closer look you will see how simple it is. What is "this"? It will always reference the object that it is executing the current function. Okay? So exactly what object ? Well, it will be determined when the function gets invoked. There are five different invocations: Global reference, Free function, .call/.apply, construction mode, and method. Also, in Javascript functions are objects which is the reasoning for using dot notation. You will see that I avoided using arrow functions. When you do be careful, because arrow function inherit the "this" value for the containing function,

Here..we go..are you ready? First, Global Reference is the global object that is in the window inside the browser and global in node. So, "this" by itself, variables using the keyword var, and regular function will reference to the global object. In the snippet below google chrome developer is used.

You got "this", because next up is...Free function invocation. The binding target is the global object (window in the browser but global in node, duh). I mean.. it's not really useful but it was picked as a binding for 'this'. Since, the function is being called freely, it is a Free function invocation.

A very simple rule is if the function is part of an object, it is known as method invocation. The "this" will reference that object itself. The binding target is the object on the left of the call time dot. In the example below, an object was declared and assigned to city with two properties: a string variable and method. When the food method in the city object is being called, it will reference the object itself. In conclusion, always remember "this" will reference to the object on the left of the calling dot.

Now, we are getting to the fun part. What if we need "this" to reference another object instead of the one it is in? Good question! Well the answer to all your problems is .call or .apply innovation. The .call method calls a method on an object, replaces with another object for the current one. While .apply method calls the function, replaces the object for the "this" value of the function. The binding target is the first argument to .call or .apply. These invocation will invoke a function immediately and change the "this" original object reference to the desired one. They both get the same job done, however .apply handles an array as an argument.

Did I lose you, yet? Geez..I hope not because this is the last one, Constructor function. The constructor function can be called by using the new operator. The binding target is the new object created. A constructor function will be declared by using Pascal Case for the name of the class.

This is my last "you got this"... I swear.

Thanks for reading my very first blog! I am an immersion junior student at Operation Sparks. I hope that you found this read very helpful and educating. Because, at first I was very confused about the key word "this". I would guess where the "this" object was referencing too. Bad practice, right? Worry no more, because this blog got you!

Forem: sitoleslie

ReactJS components

The 'this' keyword