React

React JSX and Helmet

tarihinde yayınlandı

Wearing a helmet saves you from coming harm!

Well, not always! (d’oh)

But, using Helmet(npm plugin) in a React JSX application saves time 🙂

It’s usage is pretty simple;  install the plugin, import the library and implement the structure.

First things first, we start with installing  the helmet plugin:

Import the library:

Note that we’ve also imported “react”. Any React plugin needs its core library defined first. So;  if you haven’t already, don’t forget to add it.

Next thing is its usage form. Let’s add these html code to our Helmet:

Helmet form:

which will give the same output once it runs via web browser:

That’s it folks!

Talked to many people about the JSX in React. Some people like to mix HTML with React code and some don’t. Honestly, I find this form pretty and easy to understand (even for front-end developers)

 

But, this is a matter for another blog post.

Thanks for reading

 

 

 

React

React JSX and Comments

tarihinde yayınlandı

HTML-guys hate it when their comment code do not work in JSX.

 

It’s because JSX tries to render anything within HTML thinking as all the code is a part of DOM.

You can’t use HTML comments but you can use Javascript comments under one condition -and it’s using with {curly braces} while mixing html-

Here’s an example (FAIL)

and Here’s an example (SUCCESS)

Note that; This piece of code uses 2 variants of commenting: one of them uses with curly braces and other one doesn’t.


So whats the difference?

In JSX; before writing some html code in a render function, you can use:

But, once the HTML is implemented you need to put the “React-specific code” under {curly braces} to tell parser that it’s not part of the DOM but part of React code.

I know it is annoying but why would you care about commenting system in any platform, framework or library instead of other functionalities