React part 2

6 min readApr 19, 2021

Today, we talk about components, templates, and dynamic values in templates.

Components and templates: components are a self-containing section of content in your website. for example, the navbar, an Article, a sidebar, and a footer could all be a single component.

These components will each have a template and logic of their own section. What that all means is that each component will have its own HTML and javascript.(imagine a cookie jar is the app.js, then every other component are just cookies added to the jar.)

Ok, let us get started.

Hop into your index.js, for a brief description, and in there you will see this:

You will see that we only have one single component being rendered called “App.” line 9. Right below that, we see the document.getelementbyid(“root”) that right there, is where we are injecting all our react, into a single div. Then the “StrictMode” is just to help you with errors with your code.

Let’s jump over to our App.js now, and it should look like this:

We talked about what all this is in the last blog post for react. Which You can find here.

This App.js is the root component, and basically, that means is that it is “home base” for everything to connect to. We don't ever want to muddy up this root component, so we make subcomponents. Thus rendering only a single component on the App.js.

Now, let's delete everything between the two divs with a class name of “App” and then add another div with an h1 in it. It should all look like this:

Then in your browser, start your server with npm start or yarn start (if not running already.) it should look like this:

Hooray, you can now call yourself a coder!

Moving on!

Dynamic values in templates:

OK, in the above example where my cursor is, you can do any type of javascript in this area,and use it in any component.

Down below, we make a variable, just like good old fashion javascript, and give it a value of a string.

Then in between the h1 tags, we put curly braces and “title” the name of the variable. (Also wanted to mention this is JSX, that's how we are able to do this all this implementation.) React knows we want to output a Dynamic value, It will look for that title value up above, then will return “Welcome to the new blog.”

This is what the browser should look like now:

Baby steps ya’ll, the more you do this the easier it gets!

We can render multiple variables in a single page as well, like this:

here we make another variable name “likes” and set the value to 50. Then, I put a new “p tag” and put text with the variable “likes” in curly brackets. It should come out looking like this:

We can output most things like strings, numbers, and arrays. React automatically turns our output into a string before it hits the browser so it's able to output. The only things we cannot output easily are booleans and objects.

for example, we can't do this:

see how we made a person object/variable with two keys and value pairs? Then I tried calling it in on line 14? it didn't work, we got this error below…

Just comment out the object and the “person” in the “p tag” on line 14 for now, so you go back to a working state(it was just for example).

We could also put numbers, strings, and arrays straight into the curly braces directly. Instead of creating a variable first, not always a safe move but it can be done.

If all went well, you should see this:

In this next example, We could even use methods inside those curly brackets like this:

We use Math.random()*10 just to spin up random number between 0-10. The answer to Math.random() * 10 will show up on the browser like this:

In the last example, we add a variable called google, with the website link. Then with JSX we can change that href value to curly brackets and have a dynamic value. Again, I made a variable called “google,” with the URL of the actual google sight, and we can use that as the href attribute.

Output in the browser will look like this:

Well, I hope you learned something. This is still the basics so I hope it's not too slow for everyone. We will be using a lot of this information as we build this blog site out, so bare with us.