一丶创建脚手架
1.使用npx create-react-app my-app指令创建脚手架(npx是npm下载工具包中自带,无需单独下载,版本低于@5自行引入)
2.启动npm start
二丶JSX基本使用(JSX就是javascript XML缩写)
1.常规写法(不推荐)
import React from 'react';
import ReactDOM from 'react-dom/client';
// 创建元素 标签/属性/内容
const title =React.createElement("h1",{name:"我是元素h1的属性"},"创建react节点元素")
// 渲染元素 渲染的元素/渲染到那
ReactDOM.render(title,document.getElementById("root"))
2.JSX表达式写法(推荐)
import React from 'react';
import ReactDOM from 'react-dom/client';// JSX写法(推荐使用)
const name="js表达式"
const title=<h1>我写的是JSX写法渲染,我叫{name}</h1>
ReactDOM.render(title,document.getElementById("root"))
注意点:JSX是一个表达式,本质就是React.creatElement()方法的语法糖
1.驼峰命名法 :JSX 表达式中 class 写作 className
<div className="container"></div>
2.style 接收一个对象:style 接收一个对象,而不是字符串
let style = {
width: "100px",
height: "100px",
background: "red"
};
ReactDOM.render(
// 写法一
<div className="box" style={style}></div>,
// 写法二
<div className="box" style={{width: "100px", height: "100px",background: "red"}}></div>,
document.querySelector("#root")
);
3.JSX 表达式只有一个父元素
ReactDOM.render(
<div>
<div className="box" style={style} />
<input type="text" />
</div>,
document.querySelector("#root")
);
不想让父级元素渲染就使用React.Fragment
// 标准写法
render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</React.Fragment>
);
}
// 简化写法
render() {
return (
<>
Some text.
<h2>A heading</h2>
</>
);
}
三丶条件渲染(if else / 三元表达式 / 逻辑与)
import ReactDOM from 'react-dom'
// 条件渲染
// 1 if-else
// 根据某个条件来决定渲染什么内容
const isLoading = true
const loadData = () => {
if (isLoading) {
// 加载中...
return <div>数据加载中....</div>
} else {
// 加载完成
return <div>数据加载完成~</div>
}
}
const el = (
<div>
<h1>条件渲染:</h1>
{loadData()}
</div>
)
// 渲染
ReactDOM.render(el, document.querySelector('#root'))
四丶列表渲染(map映射)注意一定要加key值,来作为唯一的标识
import ReactDOM from 'react-dom'
// 列表渲染
const songs = [
{ id: 1, name: '痴心绝对' },
{ id: 2, name: '像我这样的人' },
{ id: 3, name: '南山南' }
]
// list => [ <li>痴心绝对</li>, <li>像我这样的人</li>, <li>南山南</li> ]
// const lis = songs.map(item => {
// return <li key={item.id}>{item.name}</li>
// })
// 简化:
const lis = songs.map(item => <li key={item.id}>{item.name}</li>)
const lis1 = songs.map(item => <li key={item.id}>{item.name}</li>)
const el = (
<div>
<ul>{lis}</ul>
<ul>{lis1}</ul>
</div>
)
// 渲染
ReactDOM.render(el, document.querySelector('#root'))
五丶React组件
1.函数组件(无状态组件,只会静态显示数据)
import ReactDOM from "react-dom";
1.普通函数式组件
function Hello() {
return <h1>Hello 组件</h1>
}
2.箭头函数
const Hello = () => {
return <h1>箭头函数创建的组件</h1>
}
3.不渲染任何内容
const Hello = () => {
return null
}
渲染组件
ReactDOM.render(<Hello />, document.querySelector("#root"));
2.class类组件(有状态组件,可以动态显示ui数据)
import ReactDOM from 'react-dom'
import React, { Component } from 'react'
1.class 需要继承React.Component父类所以需要单独导入React
2.必须有render方法且必须有返回值
1.标准写法
class Hello extends React.Component {
render() {
// return null
return <div>Hello class component</div>
}
}
2.简写
class Hello extends Component {
render() {
// return null
return <div>Hello class component</div>
}
}
// 渲染组件
ReactDOM.render(<Hello />, document.querySelector('#root'))
3.组件抽离
六丶React事件绑定
1.点击事件
import { Component } from "react";
import ReactDOM from "react-dom";
1.直接写处理函数
class Hello extends Component {
render() {
return (
<div>
<h1>计数器:{this.state.count}</h1>
{/*
onClick 用来绑定点击事件
花括号中的 () => {} 就是事件处理程序
*/}
<button
onClick={() => {
console.log("你点了");
}}
>
+1
</button>
</div>
);
}
}
2.调用处理函数
class Hello extends Component {
// 创建一个方法, 作为 按钮 的事件处理程序
handleClick() {
console.log('独立的函数,你点了')
}
render() {
return (
<div>
<h1>计数器:</h1>
<button onClick={this.handleClick}>+1</button>
</div>
)
}
}
const Hello = () => {
// 事件处理程序
const handleClick = () => {
console.log("函数组件中绑定事件");
};
// 直接将 事件处理程序的名称 传递给 onClick 即可
return <button onClick={handleClick}>+1</button>;
};
// 渲染组件
ReactDOM.render(
<>
<Hello />
</>,
document.querySelector("#root")
);
2.事件对象event
import { Component } from "react";
import ReactDOM from "react-dom";
class Hello extends Component {
handleClick(e) {
// 阻止浏览器默认行为
e.preventDefault();
console.log("独立的函数,你点了", e);
}
render() {
return (
<div>
<h1>计数器:</h1>
<a href="http://itcast.cn/" onClick={this.handleClick}>
程序员
</a>
</div>
);
}
}
// 渲染组件
ReactDOM.render(
<>
<Hello />
</>,
document.querySelector("#root")
);