2021-12-06 学习记录--React-初识

小呀小萝卜儿

已于 2022-03-12 17:14:11 修改

阅读量1k

点赞数 2

分类专栏：学习-React 文章标签： react.js 前端

于 2021-12-15 10:52:26 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/121876434

版权

学习-React 专栏收录该内容

37 篇文章 6 订阅

订阅专栏

一、官网

在这里插入图片描述

二、转译`jsx`的文件

在这里插入图片描述

三、注意点

在这里插入图片描述

四、`jsx`语法规则

在这里插入图片描述

五、一定注意区分：【`js语句(代码)`】与【`js表达式`】

  1.js表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方
      
    下面这些都是表达式：
      (1). a——变量
      (2). a+b
      (3). demo(1)——调用函数
      (4). arr.map()
      (5). function test() {}——封装函数
      
  2.js语句(代码):
  
    下面这些都是语句(代码)：
      (1). if() {}
      (2). for() {}
      (3). switch() {case:×××}

六、`react`中定义组件

在这里插入图片描述
【解决changeWeather中this指向问题】：

七、引入不同的`js`，可以在`react`里拿到不同的属性

在这里插入图片描述

八、 jsx注释写法：`{/.../}`

【快捷键：ctrl + /】 🤭

example：

{/* <input ref={c => {this.input1 = c;console.log('@',c)}} type="text"/><br/><br/> */}

九、`jsx`小模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 是做移动端适配的，想加入就加入；不想加入就删除 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>jsx小模板</title>

  <style>

  </style>

</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!--
    注意1：react核心库（react.development.js） 必须在 react-dom.development.js 之前引入
 -->
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
	// 创建组件
    class LifeSpan extends React.Component{
        render() {
            return (
                <div>

                </div>
            )
        }
    }
    // 渲染组件
    ReactDOM.render(<LifeSpan/>,document.getElementById('test'));
</script>

</body>
</html>

十、`react`生命周期

不管新旧，重要的生命周期钩子有以下3个：
在这里插入图片描述
即将废弃的生命周期钩子：【除了表示卸载的3个Will】

1、`react`生命周期（旧）

在这里插入图片描述

下面这三个最最最常用，主要掌握这三个就好啦~

举例：
卸载组件：

对应代码：

// 卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById('test'));

2、`react`生命周期（新）

在这里插入图片描述

3、`react`生命周期（新）与 `react`生命周期（旧）的区别：

【新增的这两个极其罕见，很少用】
在这里插入图片描述

十一、类式组件实现父子组件

在这里插入图片描述
结果：

【补充】

父组件往子组件传值👇👇

父组件`App`：

在这里插入图片描述

子组件`Header`：

在这里插入图片描述

十二、下载`React`相关`JS`的方法

一、下载`react.development.js`和`react-dom.development.js`的方法：

进入react官网后，其余步骤见下图：
在这里插入图片描述

二、下载`babel.min.js`和`prop-types.js`的方法：

【两者方法相同，我只举一个例子：下载babel.min.js】

借助BootCDN进行下载，步骤如下：
在这里插入图片描述

剩下步骤和上面的4、5一样~

These are bilibili尚硅谷React学习视频的学习笔记~

小呀小萝卜儿

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-12-06 学习记录--React-初识

These are bilibili尚硅谷React学习视频的学习笔记~
复制链接

扫一扫

专栏目录

2021-12-06 学习记录--React-初识

一、官网

二、转译jsx的文件

三、注意点

四、jsx语法规则

五、一定注意区分： 【js语句(代码)】与【js表达式】

六、react中定义组件

七、引入不同的js，可以在react里拿到不同的属性

八、 jsx注释写法：{/*...*/}

九、jsx小模板

十、react生命周期

1、react生命周期（旧）

2、react生命周期（新）

3、react生命周期（新）与 react生命周期（旧）的区别：

十一、类式组件实现父子组件

父组件往子组件传值👇👇

父组件App：

子组件Header：

十二、下载React相关JS的方法

一、下载react.development.js和react-dom.development.js的方法：

二、下载babel.min.js和prop-types.js的方法：

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

二、转译`jsx`的文件

四、`jsx`语法规则

五、一定注意区分：【`js语句(代码)`】与【`js表达式`】

六、`react`中定义组件

七、引入不同的`js`，可以在`react`里拿到不同的属性

八、 jsx注释写法：`{/.../}`

九、`jsx`小模板

十、`react`生命周期

1、`react`生命周期（旧）

2、`react`生命周期（新）

3、`react`生命周期（新）与 `react`生命周期（旧）的区别：

父组件`App`：

子组件`Header`：

十二、下载`React`相关`JS`的方法

一、下载`react.development.js`和`react-dom.development.js`的方法：

二、下载`babel.min.js`和`prop-types.js`的方法：