React JSX Guide

JSX stands for javascript XML, a way to write HTML structures in javascript code.

Advantages

Uses HTML-like syntax.

Leverage js’ own programmability to create HTML structures.

Usage

Basic instructions

You need to use babel for syntax conversion, and for react the following code is equivalent.

function render() {
    return (<div id='d'>
                 <p>hello world</p>
            </div>)
}

function render() {
    return ReactDOM.createElement('div',
                                  { id: 'd' },
                                  ReactDOM.createElement('p',
                                                         null,
                                                         'hello world'));
}

Expressions

Expressions can be used in JSX. Expressions use a pair of brackets to mark the expression.

const text = 'hello';
const html = <div>{ text }</div>;
const flag = false;
function test() {
    return 'test function';
}
const newHtml = <div>{ flag ? test() : 'no' }</div>;

As you can see from the above example, JSX expressions support the following.

recognition of regular variables
native js method calls
ternary operators

Statements such as if/switch/variable declarations are not available in JSX, they are not expressions and are not supported in jsx.

List rendering

In vue, we can use v-for to iterate over a list data and can implement repeated element generation in templates. You can do the same thing in angular using *ngFor, and we can do the same thing in JSX.

You can use the map method to return an expression containing jsx

const songs = [
  { id: 1, name: '可惜没如果' },
  { id: 3, name: '我继续' },
  { id: 2, name: '黑夜问白天' },
];

function App() {
    return (
                <div className='App'>
                        <ul>
                                {
                                        songs.map(item => <li key={ item.id} >{ item.name }</li>)
                                }
                        </ul>
                </div>
        );
}

export default App;

Since the elements are rendered repeatedly, you need to assign a key to the generated elements, otherwise it will affect the performance of the virtual dom.

The key can only use the number/string type, and the key attribute will not appear on the real dom attribute, and is used internally.

Conditional rendering

JSX supports the generation of HTML structures that satisfy conditions, which can be implemented using the ternary operator.

const flag = true;
function App() {
    return (
            <div className="App">
                    { flag ? 'flag is true' : 'flag is false' }
                    { flag ? <div>flag is true</div> : null }
            </div>
    );
}

Style handling

JSX supports css style handling

in-line styles - style - bind style attributes to element properties

function App() {
        return (
                <div className="App">
                        <div style={{ color: red }}>here is a div</div>
                </div>
        );
}

in-line styles - style - better writing

const styleObj = {
    color: 'red'
};

function App() {
        return (
                <div className="App">
                        <div style={ styleObj }>here is a div</div>
                </div>
        );
}

class name style - ties a className attribute to the element

1
2
3

.active {
    color: red;
}

import './app.css'

function App() {
        return (
            <div className="App">
                    <div className="active">here is a div</div>
            </div>
        );
}

In the first example, since the style attribute requires an object, the first level {} is an expression and the second level {} is the object definition bracket, so it is usually written as Object, which is also more convenient to control.

Dynamic class name control

In the above example, we have used the class name style in css to set the style, but sometimes we want to control the style of an element in some scenarios, it will change, this time we need to use dynamic class name control.

import './app.css'

const flag = false;

function App() {
        return (
                <div className="App">
                        <div className={ flag ? "activate" : "" }>here is a div</div>
                </div>
        );
}

Precautions

JSX considerations for practical applications

JSX must have a root node, meaning that React cannot use jsx to create the top-level html element; we must first provide an empty element as the root node for React. (or created using the ghost node <></>).
All tags must form closures, either pairwise or self-closing.
The syntax in JSX is closer to that of javascript, with small-hump naming convention for attributes class -> className for -> htmlFor.
JSX supports multiple lines (line breaks) and can be wrapped with () if a line break is needed.

Table of Contents