react入门学习笔记

最新推荐文章于 2022-04-25 19:24:53 发布

「已注销」

最新推荐文章于 2022-04-25 19:24:53 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/weixin_54012475/article/details/119282959

版权

web前端同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

javascript

23 篇文章 0 订阅

订阅专栏

react

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
评论
react入门学习笔记

1，新建一个HTML文件并引入react相关的js<!DOCTYPE html><html> <head> <meta charset="utf-8">  <script src="./react.development.js"></script>  <scr
复制链接

扫一扫