When To Use What Language

Comparison of when to use HTML, Javascript, JSX along with template literals and object literals

• HTML : in .html files or inside JSX <div>...</div> blocks
• Javascript : in .js, .jsx, .ts, .tsx, or within HTML <script> tags
• Template Literals : use backticks `...` to give a dynamic string within Javascript; also allow multi-line string
• Preserve white space; useful for showing sample codes <code>{`...`}</code>
• Object Literals : key-value data confined in curly brackets {} within Javascript
• Note: arrow functions can return an object by wrapping parenthesis around the return () => ( {key:value} )
• JSX : in React components and looks like HTML
• Javascript expressions can be put inside JSX blocks by using curly brackets {}