React笔记之入门-JSX初体验(3)

最新推荐文章于 2022-03-15 16:59:46 发布

多动手,勤思考

最新推荐文章于 2022-03-15 16:59:46 发布

阅读量147

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/cainiao1412/article/details/108322816

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前置简介

上一节：https://juejin.im/post/6866982378301030408

我们讲解了基本的React使用，但是基础的写法太繁琐，

所以就有了 JSX ,

X标识拓展版，所以JSX就是JS拓展版。

Vue中有 vue-loader , .vue文件里写 template、script、style 三个标签，通过vue-loader就可以变成一个组件，

所以React就有了一个jsx-loader, 不过现在已经被babel-loader取代了，所以现在用的都是babel-loader，

babel-loader现在已经被webpack内置在了其一部分中。

使用CDN方式引入JSX

首先引入babel js ，

`<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>`

然后添加一个 `<script type="text/babel">` 标签，在这个标签里写jsx的语法，

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="root">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.9.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">
        // 定义一个n变量
        let n = 0
        // 使用React创建一个div对象，class属性是red，内容是变量n 以及  一个button元素，点击事件是让n这个变量+1 , 并且重新渲染App元素
        const App = () => (
            <div className="red">
                {n}
                <button onClick={
                    () => {
                        n += 1
                        render()
                    }
                }>
                    +1
                </button>
            </div>
        );
        const render = () => {
            ReactDOM.render(<App/>, document.querySelector("#root"))
        }
        render()
    </script>

</body>
</html>
```

重点观察一下 text/babel 标签里的代码，对比之前的要简介很多，

这种方式的原理就是 text/babel这个标签里的代码，浏览器是不认识的，

但是babel.min.js 会把这里面的代码替换为浏览器认识的JS代码，CDN引入方式大致就是如此。

使用create-react-app方式引入JSX

首先还是 yarn global add create-react-app 安装create-react-app工具，

初始化项目 create-react-app myproject，

这时候进入项目src文件夹下，查看App.js，默认就使用了JSX的语法，因为webpack默认就是让JS走babel-loader那一套。

使用JSX的注意事项

注意className

<div className="red">n</div>

被转义成

React.createElement('div',{className:'red'},n)

注意className不要写成class，因为你看起来是html代码，其实还是js代码，不要写错。
插入变量

标签里的所有JS代码都要用{}包起来

如果你需要变量n，那么就用{}把n包起来

如果你需要对象，那么就要用{}把对象包起来，如 {{name:‘张三’}}
习惯return后面加上 ()

如下

function App() {
 return 
   <div className="App">
     content
   </div>
 ;
}

这样会出错，因为return后面有空格，代码翻译的时候会return一个undefined回去,

所以请将return后面的()加上，用括号把代码包起来，代表返回一个代码块。

import React from ‘react’;

 import React from 'react';
 function App() {
   return (
     <div className="App">
       content
     </div>
   );
 }
 export default App;

这里虽然import进来的React在代码里看起来是没有使用的，但是因为return后面的代码翻译成js是，

React.createElement('div',{className:'App'},"content") ,

所以如果不import React就会出错，请注意。

下一节：https://juejin.im/post/6867045932337364999

多动手,勤思考

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React笔记之入门-JSX初体验(3)

前置简介上一节：https://juejin.im/post/6866982378301030408我们讲解了基本的React使用，但是基础的写法太繁琐，所以就有了 JSX ,X标识拓展版，所以JSX就是JS拓展版。Vue中有 vue-loader , .vue文件里写 template、script、style 三个标签，通过vue-loader就可以变成一个组件，所以React就有了一个jsx-loader, 不过现在已经被babel-loader取代了，所以现在用的都是babel-load
复制链接

扫一扫