'tag.htm'; break; case 'flag': $pre .= $default_pre .= 'flag.htm'; break; case 'my': $pre .= $default_pre .= 'my.htm'; break; case 'my_password': $pre .= $default_pre .= 'my_password.htm'; break; case 'my_bind': $pre .= $default_pre .= 'my_bind.htm'; break; case 'my_avatar': $pre .= $default_pre .= 'my_avatar.htm'; break; case 'home_article': $pre .= $default_pre .= 'home_article.htm'; break; case 'home_comment': $pre .= $default_pre .= 'home_comment.htm'; break; case 'user': $pre .= $default_pre .= 'user.htm'; break; case 'user_login': $pre .= $default_pre .= 'user_login.htm'; break; case 'user_create': $pre .= $default_pre .= 'user_create.htm'; break; case 'user_resetpw': $pre .= $default_pre .= 'user_resetpw.htm'; break; case 'user_resetpw_complete': $pre .= $default_pre .= 'user_resetpw_complete.htm'; break; case 'user_comment': $pre .= $default_pre .= 'user_comment.htm'; break; case 'single_page': $pre .= $default_pre .= 'single_page.htm'; break; case 'search': $pre .= $default_pre .= 'search.htm'; break; case 'operate_sticky': $pre .= $default_pre .= 'operate_sticky.htm'; break; case 'operate_close': $pre .= $default_pre .= 'operate_close.htm'; break; case 'operate_delete': $pre .= $default_pre .= 'operate_delete.htm'; break; case 'operate_move': $pre .= $default_pre .= 'operate_move.htm'; break; case '404': $pre .= $default_pre .= '404.htm'; break; case 'read_404': $pre .= $default_pre .= 'read_404.htm'; break; case 'list_404': $pre .= $default_pre .= 'list_404.htm'; break; default: $pre .= $default_pre .= theme_mode_pre(); break; } if ($config['theme']) { $conffile = APP_PATH . 'view/template/' . $config['theme'] . '/conf.json'; $json = is_file($conffile) ? xn_json_decode(file_get_contents($conffile)) : array(); } !empty($json['installed']) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . ($id ? $id . '_' : '') . $pre; (empty($path_file) || !is_file($path_file)) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . $pre; if (!empty($config['theme_child']) && is_array($config['theme_child'])) { foreach ($config['theme_child'] as $theme) { if (empty($theme) || is_array($theme)) continue; $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . ($id ? $id . '_' : '') . $pre; !is_file($path_file) and $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . $pre; } } !is_file($path_file) and $path_file = APP_PATH . ($dir ? 'plugin/' . $dir . '/view/htm/' : 'view/htm/') . $default_pre; return $path_file; } function theme_mode_pre($type = 0) { global $config; $mode = $config['setting']['website_mode']; $pre = ''; if (1 == $mode) { $pre .= 2 == $type ? 'portal_category.htm' : 'portal.htm'; } elseif (2 == $mode) { $pre .= 2 == $type ? 'flat_category.htm' : 'flat.htm'; } else { $pre .= 2 == $type ? 'index_category.htm' : 'index.htm'; } return $pre; } ?>reactjs - How Jsx is valid javascript? - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - How Jsx is valid javascript? - Stack Overflow

programmeradmin15浏览0评论

I use react and jsx. my question is how jsx is a valid js syntax? only way that I think it's maybe true, is that react piles all the file and converts jsx(s) to valid js. like what C preprocessor does with macros. is it true? and if it is true, is it right that we consider react as js library? I think it is higher level of a library.

if No, who it is done?

I use react and jsx. my question is how jsx is a valid js syntax? only way that I think it's maybe true, is that react piles all the file and converts jsx(s) to valid js. like what C preprocessor does with macros. is it true? and if it is true, is it right that we consider react as js library? I think it is higher level of a library.

if No, who it is done?

Share Improve this question asked Dec 1, 2021 at 6:43 RedwanRedwan 1077 bronze badges 2
  • 2 Does this help? – Andy Commented Dec 1, 2021 at 6:47
  • 2 JSX is not valid JavaScript. – code Commented Dec 1, 2021 at 6:57
Add a ment  | 

2 Answers 2

Reset to default 10

JSX is just syntactic sugar over function calls of React.createElement, It is transpiled by Babel.

As a developer you may not like the way how react elements are created, so React team gave the JSX syntax and It is very easy and you can co-relate with HTML.

No one is stopping you to useReact.createElement. But that will your code overbloated.

Just take a case where you've decided to use Raw React then you would end up as below.

const list =
  React.createElement('div', {},
    React.createElement('h1', {}, 'My favorite ice cream flavors'),
    React.createElement('ul', {},
      [
        React.createElement('li', { className: 'brown' }, 'Chocolate'),
        React.createElement('li', { className: 'white' }, 'Vanilla'),
        React.createElement('li', { className: 'yellow' }, 'Banana')
      ]
    )
  );

The above code will work as expected but It has some limitation:

  1. Not readable
  2. Not Maintainable

After using JSX syntax, you won't have these problems as you can see below using JSX.

<div>
  <h1>My favorite ice cream flavors</h1>
  <ul>
    <li className="brown">Chocolate</li>
    <li className="white">Vanilla</li>
    <li className="yellow">Banana</li>
  </ul>
</div>

You can see it on babeljs.io

If your ponent is

import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>Hello word</h1>
      <h2>I'm learning React</h2>
    </div>
  );
}

then It will be transpiled to

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = App;

require("./styles.css");

function App() {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hello word"), /*#__PURE__*/React.createElement("h2", null, "I'm learning React"));
}

JSX is not a valid JavaScript.

JSX is a look-alike of JavaScript. A piler Babel converts the JSX code into meaningful JavaScript code. With a JSX piler, you can transform JSX expressions to calls to React.createElement

JSX:

<p style={{color:'#000', background:'blue'}}>This is JSX</p>

Compiled JavaScript:

"use strict";

/*#__PURE__*/
React.createElement("p", {
  style: {
    color: '#000',
    background: 'blue'
  }
}, "This is JSX");

You can play along to see runtime pilation here

发布评论

评论列表(0)

  1. 暂无评论