react入门学习笔记

23 篇文章 0 订阅
9 篇文章 0 订阅

1,新建一个HTML文件并引入react相关的js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 引入react核心库 -->
    <script src="./react.development.js"></script>
    <!-- 引入react-dom 用于react操作dom -->
  	<script src="./react-dom.development.js"></script>
    <title>hello react</title>
  </head>
  <body>
  	<!-- 渲染react元素的容器 -->
  	<div id="app"></div>
  </body>
</html>

2,在script中编写react代码并渲染到容器中

在script中编写react代码有两种方式。一种是javascript方式另一种是jsx方式。
1,使用javascript方式编写(写法繁琐不推荐)

// 该方式主要是使用React.createElement(标签名, 标签属性, 标签内容)的形式进行嵌套。
<script>
  const VDom = React.createElement('h1', {}, React.createElement('span', {}, 'hello react'));
  ReactDOM.render(VDom, document.getElementById('app'))
</script>

2,使用jsx方式编写(写法简洁推荐)

// 1, 需要引入babel.min.js 用户把jsx语法转换为javascript
<script src="./babel.min.js"></script>
// 2, script 标签需要加 type="text/babel"
<script type="text/babel">
  // 3, 此处不需要加引号 (加了引号就是字符串了)
  const VDom = <h1><span>hello react</span></h1>;
  ReactDOM.render(VDom, document.getElementById('app'))
</script>

3,在jsx语法中使用javascript表达式

// 在jsx中可以在{}中编写javascript表达式语法
<script type="text/babel">
  const date = new Date();
  const VDom = <h1><span>当前时间:{date.toLocaleDateString()}</span></h1>;
  ReactDOM.render(VDom, document.getElementById('app'))
</script>

4,在jsx语法中使用class类名

// 样式的类名不要使用class,需要使用className定义
const VDom = <h1><span className="date">当前时间:{date.toLocaleDateString()}</span></h1>;

5,在jsx语法中使用内联样式style

// 内联样式要用 style={{key:value,key:value}}的格式去写
const VDom = <h1><span style={{color: 'white', backgroundColor: 'black'}} >当前时间:{date.toLocaleDateString()}</span></h1>;
// 注意:value需要用引号包含,如果是带连字符的属性需要写成驼峰的格式,多个属性之间使用逗号(,)隔开

6,在jsx语法中使用事件

// 在jsx语法中使用事件:比如点击事件
const VDom = <h1 onClick={事件名称}></h1>
// 使用事件的时候,格式为on+事件类型(第一个字母需要大写)

今日的学习笔记到此结束,如有错误欢迎指正。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值