Recat使用
1.安装脚手架工具
npm install -g create-react-app / cnpm install -g create-react-app
2.创建项目
create-react-app 项目名
切换到项目目录 npm run start 启动项目
元素渲染
JSX元素对象只可以有一个根节点 (类似VUE)
渲染过程 为 ReactDOM.render(模板,根节点)
Jsx
优点:
1.JSX执行更快,编译为JS代码进行优化
2.类型更安全,编译过程如果出错不再编译,及时发现错误
3.JSX编写更加简单快捷(不和VUE比)
注意:
1.JSX 必须有根节点
2.正常的普通的HTML元素要小写,如果大写,默认为组件
JSX表达式
1.由HTML元素构成
2.中间如果需要插入变量用 {}
3.{ }之间可以用表达式
4.{ }中间表达式可以混合使用JSX对象
5.属性和HTML内容一样用()来插入内容
JSX style样式
1.class中不能合并多个class属性
l例:class =' abc' class ='active'
2.只能使用JSX对象的新形式 {} 添加样式 不能通过"样式"方式添加
3.style样式中,如存在多个单词的属性组合,第二个单词开始,首字母大写(驼峰命名法) 或 使用引号
例:backGroundColor borderBottom
4.多个类共存的操作
<h1 className= { "abc" + classStr(JSX对象,设置的类名样式) }> helloword </h1>
或使用拼接字符串的形式
let classStr = [ ' abc' , ' reg' ].join(" ")
<h1 className= { classStr }> helloword </h1>