We all know that React can be a bit confusing when you are first starting to learn. So I decided to blog about my journey in learning React so I can be used to help others and also refer back to the topics that I get stuck on during this process.
🧐 so what have I learned on the first day?
Today I learned the basics of React such as JSX, but what exactly is JSX? JSX is an extension of javascript that is typically used when rending react web applications, ill get more into rendering later on in the blog post.
As I did more videos and research about React I was so stuck on how can you make HTML elements in a React and I found that react can be used in a very interesting when it comes to developing HTML elements.
<h1>hello world</h1>
Looks like regular HTML right? The difference when it comes to this is that It would be found in a javascript file and not the index.html, This is an example of a JSX element.
You can also nest JSX expressions into one another but there is a major difference when it comes to nesting. If your expression takes up more than one line you need to put your JSX expression into parentheses.
(
<a href = 'somewebsite.com' >
<h1>
Hi im a website
</h1>
</a>
)
Confusing right 🥴?! Putting parentheses around HTML elements.....oops I'm sorry let me get it right. Putting parentheses around JSX expressions is going to take some time to get used to. I'm so used to writing the tags and moving along, but now if I have more than one line I have to put it inside parentheses?? can you not make my life harder than it already is.
As if I am already confused enough I was then hit with that you can put these things into variables that can be used later on like in javascript.
here's an example:
const myExample =
(
<a href ='https://www.mysite.com'>
<h1>
click here
</h1>
</a>
)
😲 Then I started to think like are you mixing javascript with HTML??? like aren't you supposed to keep the two separate??
I eventually continued reading and research for a couple more hours but then I developed brain overload because I was loaded with so much information
It's really fun learning React and I thoroughly enjoy it and can't wait to see what I am able to build with it. Tomorrow I cover more things that I learned such as outer elements, rendering, and the virtual DOM so strap your seatbelts the roller coaster is just getting started let's enjoy this ride together.