网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

如何把一段代码保存成jsx

时间:2024-10-25 12:35:26

jsx是在react中代替javascript的一种语法扩展。我们可以不适用jsx来写,但是显然使用jsx会更加方便,简单。

工具/原料

电脑

react

react简单入门

1、我们可以直接进入react的官网,拿到一个最简单的例子来帮助我们开始学习react之旅。引入依赖项。<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>下图中,render中就是我们jsx的写法。

如何把一段代码保存成jsx

2、上面的index.html在浏览器中打开,显示hello World!。我们把script中的内容提取出来,放在一个单独文件中test.js,在index.html中,添加进去。

如何把一段代码保存成jsx如何把一段代码保存成jsx

3、这里会出现一个问题,就是直接打开浏览器页面报错了,这个告诉我们,需要http支持。最简单的,我们直接利用npm安装一个http-server,然后进入根目录下面开启http-server命令。打开浏览器,输入localhost:3000,端口号默认3000,也可以自己配置,如果被占用了,会报错。

如何把一段代码保存成jsx如何把一段代码保存成jsx

jsx的使用

1、最基础的就是{}这个花括号,这个就是里面是javascript的表达式。不过我们不能使用if else语句,可以采用三元运算。

如何把一段代码保存成jsx

2、下图是内联样式表的使用方式,以及如何写注释。

如何把一段代码保存成jsx

3、最终在浏览器上面的显示效果如下图所示。

如何把一段代码保存成jsx
© 2025 阿力知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com