React基础--从如何创建项目开始手把手教学

React基础

一. 什么是React？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

二. 如何创建应该React项目

首先，新建一个文件夹（养成良好习惯用英文命名，避免出现不适配），在文件夹路径中输入cmd，进入命令

npm install create-react-app@5.0.1 -g
# 全局安装 react 官方提供的脚手架工具 create-react-app (CRA)
create-react-app ./react-basic
# 使用 CRA 创建项目, 项目名称为 react-basic
cd react-basic
# 切换到项目根目录
npm start
# 启动项目

三. JSX语法扩展

什么是JSX？

JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的， 在React中使用JSX来构建用户界面

const element = <h1>Hello,World</h1>
root.render(element)

JSX使用规范

1.美化

//美化前
const jsx = <div>
  		<ul>
        	<li></li>  
        </ul>
      </div>          

//美化后
const jsx = (
  <div>
  	<ul>
        <li></li>
    </ul>  
  </div>
)

如果JSX中存在多个标记，建议用小括号进行包裹，使代码更整洁，便于排错和修改

2.根标记

//错误写法
const jsx = (
	<p>Hello</p>
    <p>React</p>
)

//正确写法
const jsx = (
    <div>
    	<p>Hello</p>
    	<p>React</p>
    </div>
)

使用JSX语法创建元素的时候，在元素的最外层必须有一个根标记

3.幽灵标记

为了避免因为要满足规定而出现的没有意义的标记，React提供了幽灵标记

const jsx = (
	<React.Fragment>
    	<p>Hello</p>
    	<p>React</p>
    </React.Fragment>
)
//也可以写作为：
const jsx = (
	<>
    	<p>Hello</p>
    	<p>React</p>
    </>
)

4.小驼峰命名

小驼峰命名法是指当一个标识符由多个单词组成，第一个单词首字母小写，其他单词首字母大写

<input  maxLength="10" readOnly autoFocus />

在JSX中标记属性要使用小驼峰命名法

5.关键字替代

在JSX中为元素添加属性时使用className替代class、使用htmlFor替代for

<input type="text" className="todo"/>
<label hemlFor="demo"></label>

6.Emmet插件

{
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
}

在JavaScript 文件中启用 Emmet 插件的支持。

四. JSX嵌入表达式

在JSX中使用一对花括号{}来嵌入表达式产生的值

const name = "张三"
const jsx1 = <div>Hello,{name}</div>
//当name发生改变的时候，jsx1内容也会随之改变
const activeName = "active"
const jsx2 = <input type="text" className={activeName} />
//插入属性值
const x = 10
const y = 20
const jsx3 = <p>{x*y}</p>
//执行计算
function getValue() {
  return "some value from getValue function"
}
const text = <p>{getValue()}</p>
// 渲染函数返回值

五. JSX条件渲染

1. 使用if分支语句条件渲染

const isLoading = false;
function getContent(){
    if(isLoading){
        return <span>数据加载中...</span>;
    }else{
        return <span>渲染数据</span>;
    }
}
const jsx = <div>{getContent()}</div>

2.利用三元运算符进行条件渲染

const isLoading = false;
const jsx = isloading ? <span>数据加载中...</span> : <span>返回数据</span>；

3.使用逻辑运算符与进行条件渲染

const isLoading = false;
const jsx = isLoading && <span>数据加载中</span>

六. JSX列表渲染

自动展开特性

在JSX中，可以将数组直接放入插值表达式，数组将会被自动展开，并且数组中的元素会被直接渲染到该位置

const array = ["list-item-1","list-item-2","list-item-3"]
const jsx = <div>{array}</div>
//结果为：<div>list-item-1 list-item-2 list-item-3</div>

但是不能直接将对象嵌入到JSX中，因为当数组被自动展开后JSX不知道要如何渲染对象

const arrayObject = [
    { name:"list-item-1" },
    { name:"list-item-2" },
    { name:"list-item-3" },
]
{arrayObject}
//这时，控制台会直接报错

在JSX中可以使用map方法进行列表渲染

步骤如下：

1.使用map方法将数组转为JSX数组

2.将map方法返回的JSX数组插入到JSX中使其自动展开

3.JSX渲染JSX数组中的展开内容

const data = [
    { id:1 , name:"list-item-1"}
    { id:2 , name:"list-item-2"}
    { id:3 , name:"list-item-3"}
];
const jsxData = data.map((item)=> <li key={item.id}>{item.name}</li>);

let jsx = <ul>{jsxData}</ul>

七. JSX元素样式

1.通过style属性为元素添加行内样式

const style = {
  width: 200,
  height: 200,
  backgroundColor: "skyblue",
  fontSize: 24,
}
const jsx = <div style={styles}></div>;

2.添加全局样式

// src/styles.css
.box {
  width: 100px;
  height: 200px;
  background: pink;
}

// src/index.js
import "./styles.css";
const jsx = <div className="box"></div>;

3.通过classnames第三方库实现通过className属性为元素动态绑定类名

npm install classnames

classNames('foo',{bar:true});

import classNames from "classnames";
const jsx = <div className={classNAmes("box",{active:true})}></div>;

八. 在React应用中插入本地图片

import logo from "./assets/images/logo.png"
export default class App extends React.Component{
    render(){
        return <img src={logo} alt=""/>;
    }
}

const logo = require("./assets/images/logo.png");
export defualt class App extends React.Component{
    render(){
        return<img src={logo} alt="" />;
    }
}

export default class App extends React.Component{
    render(){
        return<img src={require("./assets/images/logo.png")} alt="" />
    }
}

export default class App extends React.Component{
    render(){
        return <img src={`${process.evn.PUBLIC_URL}/assets/images/logo.png`} alt=""/>;
    }
}

九 事件绑定

在JSX中，事件的名称也采用小驼峰命名法

事件对应的事件处理函数通过插值表达式嵌入到JSX中

//src/index.js
function onClickHandler(){
    console.log("clicked");
}
const jsx = <button onClick={onClickHandler}>button</button>

or

const jsx = <button onClick={() => console.log("clicked")}>button</button>

不过第二种方式仅适用于事件处理函数代码较少时

十. 函数传参

function onClickHandler(arg1,arg2){
    console.log(arg1)
    console.log(arg2)
}
const jsx = <buton onClick ={()=> onClickHandler("a","b")}>button</buton>

十一. 事件对象

当事件处理函数不显示传递参数情况下，事件处理函数的第一个参数时事件对象

function onClickHandler(event){
    console.log(event);
}
const jsx = <button onClick={onClickHandler}>button</button>;

当然，如果显示为事件处理函数传递参数时，开发者需要手动将事件对象传递到事件处理函数中

function onClickHandler(arg1,arg2,event){
    console.log(arg1)
    console.log(arg2)
    console.log(event)
}
const jsx = <bnutton onClick={(event) => onClickHandler("A","B",event)}>button</bnutton>;

十二. this关键字

事件处理函数中，Javascript和JSX的 this 关键字指向是不同的，Javascript中，this在事件处理函数中指向触发事件的元素，俗称：谁调用指向谁。而在JSX中，事件处理函数中的this不指向触发事件的元素，而是undefined

function onClickHandler(){
    console.log(this)//此时this指向undefined
}
const jsx = <button onClick={()=>onClickHandler()}>button</button>