React核心基础（上）-CSDN博客

本文链接：https://blog.csdn.net/DWX_top/article/details/125724986

React的核心基础笔记

程序猿最烦两件事，第一件事是别人要他给自己的代码写文档，第二件呢？是别人的程序没有留下文档。小编今天给大家总结了一份文档，都是我在学习react的时候的一些心得体会，可能不够官方，都是用我自己的大白话进行说明的，有不足的地方希望大佬指正。
在这里插入图片描述

文章目录

React的核心基础笔记

一、React介绍：

起源：
- React 起源于 Facebook 于2013年5月开源.是一个用于构建用户界面的 JavaScript 库, 与vue,angular并称前端三大框架，现在最新版本是18
阐述：
- 它只提供 UI （view）层面的解决方案在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。
特点：
- 数据驱动
- 组件化
- 虚拟DOM
学习网站推荐：
- 英文官网： https://reactjs.org/
- 中文官网： https://zh-hans.reactjs.org/
- 官网文档：https://react.docschina.org

二、开发环境搭建

cdn引入js（不使用脚手架）

安装npm包

npm i react@17.0.0  react-dom@17.0.0  babel-standalone@6.26.0    

//简单解释一下
react@17.0.0      // react核心
react-dom@17.0.0  //负责渲染
babel-standalone@6.26.0 // es6转es5

在html文档中引入

 <script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/babel-standalone/babel.js"></script>

将 script 标签中的jsx内容转换为浏览器可以识别的 JavaScript
```
<script type="text/babel"></script>
```

使用脚手架工具创建项目

使用npm包管理工具

npx create-react-app my-app //创建一个react项目
cd my-app//去到项目文件夹
npm start//启动项目

三、React核心基础

helloReact(第一个react程序)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="./node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <!-- 写一个根文件 -->
    <div id="root"></div>

    <!-- 蒋script的标签改为可识别 -->
    <script type="text/babel">
        // ReactDOM.render(渲染的h2元素节点，渲染到root根节点去)
        ReactDOM.render(<h2>helloreact</h2>,document.getElementById('root'))
    </script>
</body>
</html>

jsx语法：

概念：
- JSX 全称 JavaScript XML ，是一种扩展的 JavaScript 语言，它允许 HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。它允许 HTML 与 JavaScript 的混写。
语法规则：
1. 必须只能有一个根节点
2. *小括号（）的内容当成html元素解析
3. *插入js代码用大括号{}
4. 单标签不能省略结束标签。/>
5. JSX 允许直接在模板中插入一个 JavaScript 表达式

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="./node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
         /* 多行的react元素，必须有根元素*/

        // 定义变量
        let message = '第一个react程序'
        let user = {
       
            name:'jack',
            age:18
        }

        let list = ['我是数组1','我是数组2']
        let person = {
       
            name:'我是一个对象'
        }

        // 定义元素
        // 1、小括号（）的内容当成html元素解析
        // 2、插入js代码用大括号{}
        // 3、jsx就是javaScript XML,是一种扩展的js语言
        // 它允许 HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。
        //         它允许 HTML 与 JavaScript 的混写。
        const element =(
            <div>
                <h2>{
       message}</h2>    
                <p>姓名:{
       user.name}</p>
                <p>年龄:{
       user.age}</p>
                <p>数组:{
       list[0]}</p>
                <p>对象:{
       person.name}</p>
            </div>
        )

        ReactDOM.render(element,document.getElementById('root'))
    </script>
</body>
</html>

网页显示效果如下

第一个react程序
姓名:jack

年龄:18

数组:我是数组1

对象:我是一个对象

操作元素

在这里插入图片描述

操作内容
操作属性

操作样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="./node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let title = '操作内容'
        let url = 'https://www.baidu.com/'

        let sty = {
         
            color:'red',
            fontSize:'18px'
        }

        // 绑定点击事件函数
        function bindClick(){
         
            alert('我是绑定点击事件')
        }

        // 定义元素内容
        const element = (
            <div>
                <button onClick={
         bindClick}>我是一个绑定事件按钮</button>
                {
         /* 操作内容 */}
                <h2>{
         title}</h2>
                {
         /* 操作属性 */}
                <a href={
         url}>跳转百度</a>
                {
         /* 操作样式 */}
                <p style={
         sty}>操作样式变红</p>
                {
         /* 直接写一个对象操作样式 */}
                <p style={
         {
         color:'blue'}}>直接写一个样式变蓝</p>
            </div>
        )
        ReactDOM.render(element,document.getElementById('root'))
    </script>
</body>
</html>

Fragments：

概念：Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
简写：
```
<></>
```

示例：

<React.Fragment>
	<h2>列表</h2>
	<ul>
		<li>元素一</li>
		<li>元素二</li>
	</ul>
</React.Fragment>

列表渲染

概念：与vue里面的v-for比起来复杂点，这里使用的是map方法

示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>helloworld</title>
	<script src="./js/react.development.js"></script>
	<script src="./js/react-dom.development.js"