Basic Rules of JSX

Writing React Functional Components

You can write a react component using any method of writing functions. Check out the the below snippet.

Basically any function that returns JSX (HTML Like Syntax) React will treat as a component.

// Function Declaration
function Component1(props) {
  return <h1> Hello World </h1>
}

// Function Expression
const Component2 = function (props) {
  return <h1>Hello World</h1>
}

// Arrow Function
const Component3 = props => {
  return <h1> Hello World </h1>
}

// Showing them in use
function App(props) {
  return (
    <div>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  )
}

Rules of JSX

JSX is the HTML like syntax we can use in React Components. There are several rules to keep in mind.

1. ONLY ONE TOP-LEVEL ELEMENT

GOOD

The div is the only top-level element

<div>
  <h1>Hello World</h1>
  <p>lorem ipsum</p>
</div>

BAD

The h1 and p are both at the top-level, this will cause an error.

<h1>Hello World</h1>
<p>lorem ipsum</p>

Also Good

If you really don't want to wrap the content in a div you can use empty tags which is called a "Fragment"

<>
<h1>Hello World</h1>
<p>lorem ipsum</p>
</>

2. Attributes are camelCase

All HTML attributes you are use to become camel case when writing them in JSX.

onclick becomes onClick
onchange becomes onChange
onSubmit becomes onSubmit
class becomes className (why? because the class keyword is already used in javascript)

You get the idea.

3. Inline styles in JSX

In normal html a inline style would be written like this.

<div style="display: flex; background-color: blue;">dfsfsfsdfsdf</div>

But JSX is NOT HTML it is just an HTML like abstraction over Javascripts DOM API. So when writing inline styles your dealing with the style object of the DOM node, so instead of a string you pass an object that will be merged into that nodes style object. Since it's javascript, all the CSS style attributes are now camel case instead of hyphenated.

<div style={{display: "flex", backgroundColor: "blue"}}>dfsfsfsdfsdf</div>

4. ARRAYS WORK

You can pass arrays of JSX if you want.

return [<h1>Hello World</h1>, <h1>Hello World</h1>, <h1>Hello World</h1>]

Is the same as me writing

return (
  <>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
  </>
)

5. INJECTING JAVASCRIPT EXPRESSIONS

Your JSX is treated as html, and anything in curly brackets are treated as Javascript expressions in the functions scope. Any valid javascript expression can be used this way.

return <h1> I am {30 + 5} years old </h1>

Key Takeaways

JSX Syntax Quirks

className instead of class
props (always come from Outside the component)
{} to embed Javascript
{{}} for objects in JSX one curly brace set to say I am writing JS and then one curly brace for the object syntax
Writing CSS in CamelCase
Conditional rendering
Everything Must Close
Looping with map or map & filter
Anything can be dynamic