JSX

Howdy!

I was thinking to myself that I really love frontend development, and for now I would really like my career to be solely frontend work, because of this I thought it be a good idea to do a course on React to refresh myself and get a better understanding of things.

(Here’s the course for reference)

Now to be honest, I never really used JSX before when it comes to styling. For me I find it easier to just classify my element by a class name and then go into my App.css file and just give it specific attributes there. However, if you are doing it inline here are some lil tips if you didn’t already know!

Now when you go into any css file you would separate the words with a hyphen like “background-color” or “text-align”. Now when you’re doing JSX it is camelcase. So background-color turns into backgroundColor and text-align becomes textAlign.

When you’re giving these attributes its usually after the tag of the element. So if its a div before you close it you follow it with “style={{}}” and then input your characteristics inside the curly brackets. The value you give it must be wrapped in a single quote as well. Also compared to a css file instead of separating attributes by a semi-colon, with JSX it’s separated by commas.

This is just the styling aspect of JSX, there is so much more you can do with it! Like giving a const a JSX value or embedding expressions within them. If you’re curious about what else JSX has to offer here’s a good article regarding it.