假如React沒了JSX

　　如題，想必React大家早已不陌生，而React裡面的JSX都是玩的得心應手了，但是假如說React裡面沒有了React那會是一種什麼樣的情形呢，我們來簡單的看一下。

　　首先我們來實現一個簡單的list列表。

　　好，現在我把他的程式碼貼出來，大家看一下(可複製的程式碼在文章最下方)

　　感覺是不是很清晰明瞭。那我們如果不使用JSX該怎麼書寫這段程式碼呢?

　　下面我們來看一下實現。(可複製的程式碼在文章最下方)

　　是不是感覺複雜了很多，而且層級關係也沒有那麼一目瞭然了。當然了，在工作中我們基本不會不使用JSX。畢竟直接用React.createElement來寫程式碼看上去非常複雜和麻煩，

　　但是我們還是需要懂的在React當中不使用JSX該怎樣來書寫程式碼。一個原因是因為這是基礎，另一個原因則因為很多公司面試的時候會讓你不用JSX來手寫程式碼，如果你不知道怎麼寫可就太尷尬了

　　使用JSX的程式碼

　　import React, {Component} from 'react'import './App.css'class App extends Component{

　　render() {// 使用JSX的寫法return (

　　基礎鞏固000

　　{true?'基礎鞏固111':'基礎鞏固222'}

　　{true?

　　基礎鞏固333

　　:

　　基礎鞏固444

　　}

　　);

　　}

　　}

　　export default App

　　不使用JSX 的程式碼 　

　　import React, {Component} from 'react'import './App.css'class App extends Component{

　　render() {// 不使用JSX的寫法var child1 = React.createElement('li', null, '基礎鞏固000');var child2 = React.createElement('li', null, true?'基礎鞏固111':'基礎鞏固222');var child3 = React.createElement('li', null, '基礎鞏固333');var child4 = React.createElement('li', null, '基礎鞏固444');var root = React.createElement('ul', {className: 'myList'}, child1, child2, true?child3:child4);return root

　　}

　　}

　　export default App