JSX notes

What is the JSX:

  • JSX is JavaScript XML that allows you to write HTML markup language (Syntax Sugar) in JavaScript.
  • To use the JSX syntax, run CNPM I babel-react-d and add the syntax to the ‘. Babelrc ‘file,
  • The representation of JSX code, which is how it is written
    • You can use {props} to insert variables or any valid JS expression into the HTML without adding $
    • You can also insert functions {func(props)} with parameters
// Insert functions with arguments

<h1>Hello, {getName(props)}</h1>

// You can add attributes to the tag. If the attribute value is a string, it is quoted

const element = <div tabIndex="0"></div>;

{}. "" and {} do not mix

const element = <img src={user.avatarUrl}></img>;

// If the JSX element has no child elements/nodes, it can be single-closed

const element = <img src={user.avatarUrl} />;

// You can add a class to HTML, but you need to rewrite the class to className. The for property should be written as htmlFor

var myDivElement = <div className="foo" />;

// To add a custom attribute to render, it is best to start with data-

ReactDOM.render(

    <div>

    <h1>Custom attributes</h1>

    <h2>Custom attributes are below</h2>

    <p data-myattribute = "somevalue">This is a nice JavaScript library!</p>

    </div>

    ,

    document.getElementById('example')

);

Copy the code

Summary: JSX adds XML syntax to JavaScript. It says in JS that JSX will be preprocessed into React Elements

Standalone files, introductions, and expressions

  • Your React JSX code can be placed in a separate file. For example, we create helloworld_react. Js and import the js file in an HTML file
/ / helloworld. Js file

ReactDOM.render(

  <h1>Hello, world!</h1>.

  document.getElementById('example')

);

// Import the JS file in an HTML file

<body>

  <div id="example"></div>

<script type="text/babel" src="helloworld_react.js"></script>

</body>

/ / js expression

ReactDOM.render(

    <div>

      <h1>{1 + 1}</h1>

    </div>

    ,

    document.getElementById('example')

);

Copy the code

Ternary operators, styles, comments, arrays

  • If else statements cannot be used in JSX, but ternary expressions can be used.
  • React recommends using inline styles. We can use camelCase syntax to set the inline styles. React will automatically append px to the specified array of elements.
  • Comments need to be in curly braces
  • JSX allows you to insert arrays into templates that automatically expand all the members
// If I = 1, print true, if I = 1, print false

ReactDOM.render(

    <div>

      <h1>{i == 1 ? 'True! ' : 'False'}</h1>

    </div>

    ,

    document.getElementById('example')

);

// Add myStyle inline for h1 elements:

var myStyle = {

    fontSize: 100.

    color: '#FF0000'

};

ReactDOM.render(

    <h1 style = {myStyle}>Inline style</h1>.

    document.getElementById('example')

);

// Comments need to be enclosed in curly braces

ReactDOM.render(

    <div>

    <h1>Annotation tutorial</h1>

{/ * comment... * /}

     </div>.

    document.getElementById('example')

);

// The array automatically expands all its members

var arr = [

  <h1>Novice tutorial</h1>.

< H2 > not only learn technology, but also dream! </h2>,

];

ReactDOM.render(

  <div>{arr}</div>,

  document.getElementById('example')

);

Copy the code

<h1 style = {{fontSize:12}} </ h1 >, </ h1 style = {{fontSize:12}}

  • Even if we write JSX tags, we don’t render our HTML tags directly to the page. Instead, we convert them to javascript code like react. createElement and render them to the page