React's JSX language

In traditional web development, HTML and JavaScript files separate respected. FaceBook thinks component in the web development is the most important, in order to HTML file embedded in JavaScript code, facebook expand the language JavaScript, forming jsx language.

Can normally write HTML code in JavaScript file, generated on the blog post react the project src folder App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

In this document, render () method can be like writing HTML code in an HTML file, which is jsx language. jsx language is not necessary to develop react, do not use jsx, you can use React.createElement () to create the HTML node, but this method does not jsx language concise and readable, it is recommended to use jsx languages in development.

Note that using JSX: class for JavaScript reserved words of the language should be used instead className, and the HTML for attribute is a reserved word in JavaScript, you should use htmlFor instead.

In JSX language, it can be like a normal HTML file writing HTML tags, if you need to use the JavaScript language in a piece of HTML tags need to use curly braces {} to surround the JavaScript code that tells the compiler that these are tools Zhejiang JavaScript code:

const div=<div>{1+100}</div>

Note: style attribute JSX should serve as an object, because the object is a JavaScript syntax, so they need to be surrounded by braces. Meanwhile, css property is no longer connected to the use of crossed, but the use form of the hump, thus declaring a style element may be as follows

const div=<div style={{fontSize:'16px',textAlign:'center'}}>{1+100}</div>

In our development, for a list (such as a list of articles) it is very common. Thanks JSX language, the use of JavaScript iterative loop can quickly generate a list of some, but not a large segment of elements similar to a large section of the list. JSX array can be used to store a set of elements, and finally to the use of brace expansion.

For example: to achieve a simple piece of lists, modify App.js

// introduced REACT 
Import React, the Component {} from  ' REACT ' ; 

// introduced style file 
Import ' ./App.css ' ; 

// Construction APP class 



class the App the extends the Component { 
    
    
    // define render method 
    
    render () { 
        
        const ARR = [ ' REACT ' , ' JavaScript ' , ' Java ' , ' Node ' , ' VUE ' ];
         const eleArr arr.map = ((ELE, I) => {
            
            return <li key={i}>{ele}</li>
        });
        
        
        return (
            
            <div className="App">
            <ul>
            {eleArr}
            </ul>
            </div>
            
        );
        
    }
}



export default App;

Thus generated should always be an element with a key attribute, which is react to identify different elements to be used to determine which element changes to re-render used.

React's JSX language

Guess you like