React -- jsx语法和React环境搭建

最新推荐文章于 2024-08-25 17:00:00 发布

A-小擎擎

最新推荐文章于 2024-08-25 17:00:00 发布

阅读量258

点赞数

分类专栏： react 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/weixin_46398959/article/details/104484205

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先，感谢Facebook于2013年5月开源了其React框架，造福于全体前端程序员，下面开始学习！

React有什么特点？

声明式设计

高效

灵活

JSX语法

组件（复用）

单向响应的数据流（减少了重复代码）

jsx语法

jsx语法是一种语法糖，是为了更方便的书写代码

作用：就是在js里面写html

语法规则：

注释：{/* 注释内容*/}
标签内的js语句要用差值表达式包起来–{ }
差值表达式中，你可以写for循环
jsx语法必须只能有一个根元素
script标签type属性为"text/babel"
value：表单元素 value 属性改为 defaultValue
checked：表单元素 checked 属性改为 defaultChecked
onXxx：标签中事件类型首字母大写
for：label 标签中的 for 属性改为 htmlFor
style：写对象 style={{color:‘red’}}
class：标签中 class 属性改为 className
jsx语法中对象不能直接渲染，数组是以字符串的形式渲染
遍历列表：
使用数组的map方法，对数组的每一项进行映射,每个节点必须都要指定key值

<body>
    <div id="box"></div>
    <script type='text/babel'>
        var arr = ['a','b','c']
        ReactDOM.render(<div>
                            {
                                arr.map((item,index)=>{
                                    <p key={index}>
                                        {item}
                                    </p>
                                })
                            }
                        </div>,
                        document.querySelector("#box"))
    </script>
</body>