初识react

一、react概述

1、什么是react

是用于构建用户界面的JavaScript库，它也是一个渐进式的用于构建用户界面的javascript框架

2、主要特征

声明式:使用原生JS编写的页面存在着开发效率低下、性能较差的情况，使用react大家就像编写HTML一样编写页面

声明式:使用组件的思想编写程序时现代企业开发的一种思路、让组件达到复用的效果、大大提高开发效率，让项目具有可维护性和扩展性

一次学习，跨平台编写

• 使用react不仅能够编写WEB应用
• react还可以编写移动应用(react-native)
• react还可以完成VR(虚拟现实)（react 360）

3、React框架的发展史

React.createElement(arg1,arg1,arg3)

、创建React元素

如果要创建React元素，必须要通过React.createElement()方法完成react元素的创建

arg1:参数1用于声明元素的名称

arg2:参数2用于声明元素的属性

arg3:参数3用于定于元素的子元素或内容

const h1Ele = React.createElement("h1",null,"Hello React")

3、渲染到HTML页面

在body元素中定义一个目标容器

<div id="root"></div>

通过React DOM中的createRoot()方法完成页面的渲染

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(h1Ele)

三、创建虚拟DOM的两种方式

1、通过虚拟React.createElement的方式创建虚拟DOM

这种方式过于麻烦，

        代码结构会变得非常复杂

        结构层次不清楚

        代码量过多，不利于实际开发

2、通过JSX的方式创建虚拟DOM（重点）

        引入相关的js文件

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        通过JSX的方式创建React元素

 const containerEle=<div>
        <h1>个人简介</h1>
        <div>姓名:Jack</div>
  </div>

        渲染React元素

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(containerEle)

四、yarn包管理器

1、简介

Yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，yarn包管理器，和npm的作用一模一样。都是用来管理项目中node_modules目录 中的所有依赖包Yarn是为了弥补npm的一些缺陷而出现的

2、安装yarn

在终端上执行如下命令进行全局安装yarn

npm i -g yarn

安装完成之后，可以执行命令查看yarn的版本

yarn --version

3、yarn命令使用

3.1、初始化项目

yarn init

3.2安装依赖包

yarn add [package]    //下载最新版本
yarn add [package]@[version] //下载具体的版本
yarn add [package] --dev //下载的是运行时的依赖
yarn global add [package] //全局下载

3.3移除依赖包

yarn remove [package]

3.4、安装项目的全部依赖

yarn
或者
yarn install

3.5、配置镜像

设置yarn的淘宝镜像

yarn config set registry https://registry.npm.taobao.org

查看镜像源

yarn config get registry

配置node-sass镜像

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass

3.6、查看全局安装的位置

yarn global dir

五、使用CRA创建React项目

使用create-react-app脚手架来完成react项目的创建

npx create-react-app 项目名称

目录结构

|-node-modules:第三方依赖包
|-public:资源文件
  |-index.html:页面出口文件
|-src:源文件
 |-index.js:项目入口文件

1、在脚手架下创建第一个react项目

//导入ReactDOM
import ReactDOM  from "react-dom/client";
//通过JSX的方式创建React元素
const title=<div>   
    <h1>个人简介</h1>
    <ul>
        <li>姓名:Jack</li>
        <li>年龄:18</li>
        <li>爱好:学习</li>
    </ul>
</div>
const root=ReactDOM.createRoot(document.querySelector('#root'))
root.render(title)

六、JSX

1、什么是JSX

JSX是JavaScript XML的简写，实际上是javascript的扩展，既有JavaScript的语法结构，又有XML的结构

1.1、创建节点

jsx必须要有一个跟节点

如果不想产生无用的跟标签，但是还是要遵守JSX的语法要求，可以使用如下两种方式

JSX必须要有一个根节点，而且编译之后在浏览器中不产生跟标签，jsx可以使用如下两种方式完场

使用空标签的方式来完成

const content = <>
    <h1>hello</h1><h1>hi</h1>
</>

Fragment组件来完成

const content = <Fragment>
    <h1>hello</h1><h1>hi</h1>
</Fragment>

1.2、jsx的特殊要求

• jsx必须要有一个标签
• JSX中的标签如果没有子元素，那么也要使用</>来作为结束

 <img src=''></img>
  或者
 <img src=''/>

• 采用驼峰式命名法,如下几种属性特别注意

  class---->className

<div className='teacher'>
        职业:前端讲师
</div>

​ for--->htmlFor

 <label htmlFor='name'>姓名:</label>
 <input id="name" placeholder='请输入您的姓名'/>

​ tabindex--->tabIndex

<div tabIndex="0">北京</div>
<div>广州</div>
<div tabIndex="1">上海</div>
<div>深圳</div>
<div tabIndex="2">香港</div>
 <div>澳门</div>

• 为了避免分号陷阱，建议大家必须使用()将元素括起来

const content=(<>
 </>)

1.3、javascript表达式

在JSX中不管是动态元素的渲染还是属性的渲染全部通过{}来进行渲染的

1.4、jsx的算数表达式和三元表达式

<div>是否成年:{age>=18?'成年':'未成年'}</div>
<div>虚岁:{age+1}</div>

1.5、函数表达式

let idcard="610122xxxxxxxxxxxx"
const getBirthday=idcard=>idcard.slice(6,10)+"-"+idcard.slice(10,12)+"-"+idcard.slice(12,14)
const template=(
    <>
        <h1>个人简介</h1>
        <div>姓名:{name}</div>
        <div>年龄:{age}</div>
        <div>工作:{job}</div>
        <div>爱好:{hobby}</div>
        <div>
            <img src={avatar}></img>
        </div>
        <div>是否成年:{age>=18?'成年':'未成年'}</div>
        <div>虚岁:{age+1}</div>
        <div>生日:{getBirthday(idcard)}</div>
    </>)

1.6、对象表达式

let user={
    name:'刘备',
    age:39,
    job:'皇帝'
}
const introduce=user=>`我叫${user.name},今年${user.age}岁,职业是${user.job}`
const template=(<>
    <div>姓名:{user.name}</div>
    <div>年龄:{user.age}</div>
    <div>职业:{user.job}</div>
    <div>
        介绍:{introduce(user)}
    </div>
</>)

2、react的样式的处理

针对于行内样式和类样式的处理如下

2.1、类样式

使用className="类样式名"方式来进行类样式的设置

• 在src/assets/css/index.css

.mtable{
    border-collapse: collapse;
    width: 900px;
}
.mtable td{
   border:1px solid #ccc;
   padding:10px;
   text-align: center;
}

• 在src/index.js中引入

import './assets/css/index.css'

2.2、行内样式

语法

<div style={{key:value,key:value}}></div>

当然也可以将对象提取出来

const headStyle={border:'1px solid #eee',padding:'10px',backgroundColor:'#ccc',color:'#fff'}
<th style={headStyle}>序号</th>

注意：样式名采用驼峰式命名法，如果有多个单词，每个单词的首字母必须要大写才可以。

3、引入本地图片

如果在一个组件中要引入图片，这个图片可以来自本地，也可以来自网络，来自本地图片的处理

如果要引入本地中图片，常用的方法有两种

• 通过ES6的import方式进行导入

• 通过node.js的require方法引入

注意：如果图片是网络图片，直接写网址就可以了，无需进行其他处理，如果是网络图片，有的时候图片地址是正确的，但是图片却出不来，可能是防盗链问题。