react入门学习笔记-程序员宅基地

技术标签: web前端  react  javascript  

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+事件类型(第一个字母需要大写)

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_54012475/article/details/119282959

智能推荐

2016MUTC9-1010 Jong Hyok and String_hdu 5853 jong hyok and string-程序员宅基地

文章浏览阅读581次。题解:将p串翻转,间隔不同字符连接起来,进行一次后缀数组的操作。若strange set(Q)>0,那么Q肯定是p串中一个的子串。所以Q串翻转后,二分直接在后缀数组中找到边界位置,lower和upper。当不存在时,答案为0;当lower==upper时,答案为最大长度(sa[lower]到间隔字符的长度)-最小长度(max(height[lower],height[upper+1])+1_hdu 5853 jong hyok and string

已解决UnicodeDecodeError: ‘ascii‘ codec can‘t decode byte 0x8e in position 0: ordinal not in range(128)_unicodedecodeerror: 'ascii' codec can't decode byt-程序员宅基地

文章浏览阅读1.1w次,点赞8次,收藏9次。已解决(Python编码问题)UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0x8e in position 0: ordinal not in range(128)_unicodedecodeerror: 'ascii' codec can't decode byte 0xe8 in position 0: ordi

决策树学习-程序员宅基地

文章浏览阅读1.8w次,点赞3次,收藏10次。决策树学习是应用最广的归纳推理算法之一,它是一种逼近离散值函数的方法。在这种方法中学习到的函数被表示为一颗决策树,学习得到的决策树也能再被表示为多个if-then规则,以提高可读性。决策树学习方法对噪声数据有很好的健壮性且能够学习析取表达式。决策树学习算法有很多,比如ID3、C4.5、ASSISTANT等等。这些决策树学习方法搜索一个完整表示的假设空间,从而避免了受限假设空间的不足。决策树学习的归纳偏置是优先选择较小的树。决策树表示法决策树通过把实例从根节点排列(sort)到某个叶子节点来分类实_决策树学习

Vue 项目导入字体文件_vue 引入字体-程序员宅基地

文章浏览阅读3.1k次,点赞2次,收藏4次。要想实现UI设计师设计的原型效果,有时候需要用到一些特殊的字体,在项目中就需要导入相关的字体文件。本文章以平方字体为例。_vue 引入字体

Unity导出微信小游戏_unity导出微信小游戏项目流程-程序员宅基地

文章浏览阅读762次。Unity自带的方法基本都支持 , 验证了一下BestHTTP插件没法使用 , 场景切换会崩溃 暂时没找到问题出在哪。先验证流程 , 创建一个空项目 , 把微信提供的插件导入进空项目。直接点顶上的导出微信小游戏 , 填入必备的信息(appid…到这里 虽然没有具体验证完成所有的东西 , 但是。微信小游戏感觉这几年挺火,打算熟悉一下流程看看。微信提供的Unity转微信小游戏解决方案。后续接着验证经常用的插件 看看是否支持。2023年03月06日14:48:28。编译平台选WebGL。_unity导出微信小游戏项目流程

匈牙利算法:二分图最大匹配_二分图最大匹配om√n-程序员宅基地

文章浏览阅读65次。#include <cstring>#include <iostream>#include <algorithm>using namespace std;const int N = 510, M = 100010;int n1, n2, m;int h[N], e[M], ne[M], idx;int match[N];bool st[N];void add(int a, int b){ e[idx] = b, ne[idx] = h[_二分图最大匹配om√n

随便推点

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度_html网页所有元素都相对于页面尺寸设置百分比参数-程序员宅基地

文章浏览阅读653次。原链接:https://www.cnblogs.com/libaoli/p/5779629.html作者:请叫我阿力这几天都在修改博客上面的样式。本来用的是d83.0的模板。自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果。对CSS3不是特别的熟练,只能去网上找找案例看了。发现一个不错的文章。写的比较入门,也很仔细。所以拿过来分享给大家。如..._html网页所有元素都相对于页面尺寸设置百分比参数

基于 SpringBoot + MyBatis 的在线音乐播放器_springboot播放mp3-程序员宅基地

文章浏览阅读1k次。value="删除音乐" οnclick="deleteMusic(\''+list.musicId+'\')">';return new ResponseBodyMessage(-1,"没有你要删除的音乐",false);_springboot播放mp3

Flex调用GP服务实现按划选范围切割地图(二)_flex drawevent.draw_end-程序员宅基地

文章浏览阅读1.7k次。具体代码实现:http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:esri=”http://www.esri.com/2008/ags“ xmlns:mx=”library://ns.adobe.com/flex/mx”minWidt_flex drawevent.draw_end

css图标与文字对齐实现方法-程序员宅基地

文章浏览阅读101次。1.移动端(安卓设备、ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐。2.实际上不管是line-height还是用position去定位,不管你display用..._css实现,左侧两行文字,右侧图标始终跟第一行文字对齐

springboot activiti关闭验证自动部署_activiti工作流引擎关闭-程序员宅基地

文章浏览阅读932次。# spring-activiti# 自动部署验证设置:true-开启(默认)、false-关闭spring.activiti.check-process-definitions=false# asyncExecutorEnabled属性设置设置true后将代替那些老的Job executorspring.activiti.async-executor-enabled=falsesp..._activiti工作流引擎关闭

调用JAVABEAN连接类_连接javabean-程序员宅基地

文章浏览阅读94次。调用JAVABEAN连接类_连接javabean

推荐文章

热门文章

相关标签