Member-only story

React Basic

Shiori Soma

3 min readJul 7, 2021

Display JSX

This is called “grammar extension” because it allows HTML tags to be written directly as values.

By loading Babel with `<script>` tags, the JSX tags you write are converted into JavaScript code.

Points

- Attributes should be in camel script, like `onClick`, not `onclick`.

- Use `/>` if there is no closing tag, like `<input>`.

- Use `()` for HTML descriptions and use `{}` to embed variables and functions.

Only one element can be rendered

ReactDOM.render(element to display, DOM element to embed)

JSX creates Element objects, so there is always one element to create.

// NG -> error
let el = (
    <h2>JSX sample</h2>
    <p>This is sample message.</p>
)// OK
let el = (
    <>
        <h2>JSX sample</h2>
        <p>This is sample message.</p>
    </>
)

className

Since JSX already has a reserved word `class`, we’ll use `className` to represent the class attribute.

If you use `class`, you will get a warning, but you can still display it.

Set the value of the attribute

- NG example

`Attribute = “{}”`.

- OK example