React part 2

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.

check out some javascript….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (10 commonly used arrays in javascript)

Javascript 10 (8 different Math. methods And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React info…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

The Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Bleibdrey

Jonathan Bleibdrey

Software engineer, Creator, Ball of Energy