30-Day React Learning Journey part-2 ( JSX )

Introduction:

This article is the second part of “30-Day React Learning Journey (part 1)” Where we talked in the previous part about:

• Suggestions for learning resources.
• Why you should learn React.
• how to get started.
• wrote our first line in React.

All this with sharing my personal learning experience and some tips + a simplified explanation of what I learned.

We will continue from day 5 to day 7, I know that this seems a little, but these are the basics of React that you must master before we move on to another part.

Links

• I post daily on Twitter about my experience with learning React and other things. Follow me there → Youssef Hafnawy.

• All the code shown in this article and more can be found here → GitHub: 30-Day-React-Learning-Journey

📚 I know you're lazy so I collected all my tweets about React on → React-Tweet

📚 I have also compiled all the explanations on one page for you → React-Summary

Notes:

• Remember, this is a learning journey, It is possible that I made mistakes, so if you notice something wrong, tell me and I will correct it.

• I will build this article on the fact that you read the previous one, so if you find me talking about something in little detail, I may have talked about it in the previous part.

• There is no such thing as just two notes, so did you know that React is the second most-starred library on GitHub after Vue?

Without further ado, let's get started with → 30-Day React Learning Journey part-2 ( JSX )

day 5 ( JS vs JSX )

to Create and add an element to the DOM using just JS You need to:

1. select the parent element.
2. create the element you want.
3. Add the contents of the element.
4. append the element to the parent.

let father = document.querySelector("#app");
let h1 = document.createElement("h1");
h1.append("Hallo, react");
father.append(h1);

Four steps in order to create one element, and this is without adding a class or anything else. Imagine yourself trying to create a whole page in this way. Each element has at least four lines of code.

with React you can just use JSX! with the main root we create

root.render(<h1>Hallo, react</h1>);

remember it from the first part!

React took the logical path of creating an element and reduced all these steps using JSX where all you have to do is just write the element!

Yes, HTML directly inside JS. Can you imagine, before I continue, I want you to imagine how it can benefit you? The more you deal with JS before, the more excited you will be about the idea.

I strongly advise you to continue learning JSX using the fact that you can write something HTML-like directly inside JS and try writing to see what works and what doesn't.

Since it is not 100% HTML, so you can go to the documentation and see the differences, or you can experiment and discover it yourself, For me, I discovered about 70% of the differences on my own and will not forget them.

I am interested to know what you discovered and what was your feeling the first time you saw JSX.

and also I still haven't settled on the appropriate way to write this series as I don't know whether to explain to you what I learned or just share the experience and some tricks.

So for now, I will briefly explain to you what I learned in my style.

day 6 ( JSX basics )

React Without JSX:

Before we start, I would like to tell you that you can use React without JSX, if you do not want to increase the complexity or size of the work environment in which you work.

And also learning React without JSX shows you how things work under the hood where you will understand the principles and basics of React.

For me, I learned it firsthand, and if I needed something I would go look for it,I have not seen anyone or any course that does not advise you to learn it, and even React advises that

JSX basics:

In general, React is just JS with a few extra things you call it js++ But you did not modify anything on the basics of the language.

I won't go into detail about how React will know that you are writing JSX, but in general, just write any HTML code and React is smart enough to recognize it.

yes, if you write <h1>Hallo, react</h1> Directly inside JS, react will do the four steps and create the element by itself.

Since we are still inside JS we can simply do the following:

• link a JSX element to a variable:

let myHeading = <h1>Hallo, react</h1>
console.log(myHeading);

• using it with a function or if:

if ( reactISGood ) {
   let myHeading = <h1>Hallo, react</h1>
} else {
   let myHeading = <h1>Hallo, vue</h1>
}

• butting JSX inside an array or an object

 let myHeading = [<h1>Hallo, react</h1>, <h1>Hallo, vue</h1> ]

why do you think, as I told you that you are inside JS? Use JSX wherever you want with any js feature.

But since we are inside JS we have to follow the rules of JS like:

• the word "class" is already taken so we need to use "className" instead

let myHeading = <h1 className="veryBigHeading">Hallo, react</h1>

• Forget anything like "aria-label" it is now called "ariaLabel" yes, everything now is camelCase

Yes, that is why I advised you to try yourself and try to discover what works and what does not work and to think as a programmer and try to discover the reason with the least available information, as you will not forget anything you learned in this way.

day 7 ( JSX with JS ):

Before we start, let me tell you some tricks that make you read an article that contains personal experience, not just educational content.

• if you use VsCode Look for this extension "Simple React Snippets" It will make your life easier.
• if want to use Emmet with React (JSX) go to this article: Enable Emmet support for JSX thank me later.
• Did you know that it is the male seahorse that lays eggs, not the female?

JSX with JS

the same way you use JSX inside JS you can use JS inside JSX!

So, to use JS inside JSX You have to tell react that we've dropped out of JSX and returned to JS, so if you don't do this, whatever you write will be treated as text or as a regular element.

To do this, write whatever you want to be a JS code inside {}

let bestFramework = "Svelte"
let myHeading = (<h1 className="veryBigHeading">Hallo, {bestFramework}</h1>)

You can open these brackets anywhere in JSX, allowing you to do Many cool things like:

let imgSrc = 
"https://i.insider.com/602ee9ced3ad27001837f2ac?width=700";
let link = "https://twitter.com/hafanwi/status/1593162901744803840"

<img src={imgSrc}></img>
<a href={link} ></a>

// Do not go behind these links

• you can map on an array with all your image URLs with one line

• you can create a 100 div with a simple for loop

I'll leave the rest to the imagination of the enthusiastic programmer in you to discover how many things you can do just with this.

Of course, a JSX element can contain more than one child, but you can not have more than one element on one variable.

const element = (
  <div>
    <ul className="bestFramework">
      <li>Vue</li>
      <li>Svelte</li>
      <li>Remix</li>
    </ul>
  </div>
);

Conclusion:

I hope you will forgive me for not completing the experience for some of you in this article, as I did not yet know what to focus on here.

Since I did not explain everything about JSX as I did not tell you how JSX is just a big object or a trick to writing more than one element without a father and more.

At the same time, I did not talk about the things I found difficult and what I learned from the JSX experience on my own and others.

Therefore, my detailed explanation of all of the above, as well as my full experience with learning, are collected on one page, as I said previously.

• React-Tweet

• React-Summary

In the end, I would like to hear your opinions about the article.

• What was missing?
• Should I add more or fewer details?
• Do I add more explanation or cut it out and only talk about the experience?

Author

• professional links:
  • Twitter
  • LinkedIn
  • GitHub
• Hire me:
  • UpWork
  • Freelancer
• Blog:
  • HashNode
  • Dev.to
  • Medium