×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 07 – Understanding JSX

    课程清单

    在最后 我们已经介绍了返回HTML元素的Component结构,不过这不过是 JSX。因此,让Dive深入其中。


    JSX

    让我们将上一课示例设为返回HTML元素的App组件,即

    src / App.js
    
    import React, { Component } from 'react';
    import './App.css';
    class App extends Component {
      // JSX Content
    	render() {
        return (
          <div 班级名称="App">
      			{/* 其他 Component can be nested here  */}
      			<h1>Root Of Application</h1>
      		</div>
        )
    	}
    }
    export 默认 App;
    

    Now let me comment out the JSX syntex in render() method so it will not be used any more and we will return something else, We can use the React Object which we are importing in App.js 并在上面调用一个方法 createElemet()

    javascript
    React.createElemet('div', null, 'h1', 'inside H1 tag')
    
    注意: the createElemet() takes three arguments:
    1: The first one is the element that we want to render to the DOM. This could be a div also it can be your own component.
    2:第二个参数是configuraion,然后我们将使用javascript对象,这是可选的,我们也可以传递null。
    3: The thirs argument is any amount of children and we would have multiple arguments seperated by commas. children means whats nested inside thet perticular div.
    src / App.js
    
    import React, { Component } from 'react';
    import './App.css';
    class App extends Component {
    	render() {
          // return (
          //  <div 班级名称="App">
          //   <h1>Root Of Application</h1>
          //  </div>
          // )
    
          /* JSX is converted to Below mention code */
          return React.createElement('div', null, React.createElement('h1', null, 'inside H1 tag'));
    	}
    }
    export 默认 App;
    

    现在在控制台中,输出将如下所示:

    控制台标签
    
      ...
      <div>
        <h1>inside H1 tag</h1>
      </div>
      ...
    

    的CSS类名称

    In the 反应html elements we add class by 班级名称 not by class attribute. will cover that why we use 班级名称 in next 。现在将看到它如何通过JSX转换。
    So in our createElemet() method in second parameter instead of null configuration we will pass an javascript object there we can define class name like …

    javascript
    React.createElemet('div', {className:'App'}, 'h1', 'inside H1 tag');
    

    现在在控制台中,输出将如下所示:

    控制台标签
    
      ...
      <div class="App">
        <h1>inside H1 tag</h1>
      </div>
      ...
    

    JSX限制

    Now let’s us 点 some restrictions we face for example 班级名称 thing.

    班级名称

    We cannot use class attribute in the JSX because javascript it self reserve the word(class). In application we already use to create the class this is why we have to use 班级名称.
    All the HTML elements we are using in the render() method are managed by the 反应Library. We are not using the real HTML text, 反应is converting the behind the scene. react finds the attributes in quotation marks we can define on all these elements.

    相同的元素

    例如,我们不能返回相同的元素:

    src / App.js
    
    import React, { Component } from 'react';
    import './App.css';
    class App extends Component {
      // JSX Content
    	render() {
        return (
          <div 班级名称="App">
      			<h1>Root Of Application</h1>
      		</div>
        <h1>Root Of Application</h1> {/* Cannot add same element twice */}
        )
    	}
    }
    export 默认 App;
    

    我们的JSX表达式必须具有一个根元素。我们实际上可以返回相邻的元素,我们将在本课程的最后看到。
    将所有内容包装到每个组件的一个根元素中是一种典型的事情,也是一种典型的最佳实践。


    结论

    our HTML elements are compiled by JSX and are converted into React.createElemet() by one of the many built tool, we get out of the box in this project. it is the reason why we need to import React even though we are not using it at all. Because behind the scene we will use it once it is compiled.
    Of course writing code using React.createElemet() for creating the elements is really cumbersome especially as you add and nest more and more elements.
    that’s the reason we don’t use React.createElemet() instead of that, we are using JSX. But it is important to understand the internals and understand what this compiles to.
    而且最重要的是,我们了解到JSX看起来像HTML,但事实并非如此,最后是经过编译的javascript。

    反应introduction
    反应Component
    JSX
  • 启用通知    不用了,谢谢