当前位置: 代码迷 >> 综合 >> Recat
  详细解决方案

Recat

热度:20   发布时间:2024-02-26 21:50:27.0

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>

  相关解决方案