前言
今天我们一起来学习react的内容，简单的学习一下。
一、React是什么？
是一个用于构建用户界面的 JavaScript 库。
二、如何使用
1.基于浏览器的模式
React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
-
React.createElement(type,props,children); -
ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
- ReactDOM.render(element, container[, callback])
- element：要渲染的内容
- container：要渲染的内容存放容器
- callback：渲染后的回调函数
babel
babel-standalone.js：在浏览器中处理 JSX
react.development.js提供了核心代码
react-dom.development.js提供了与浏览器交互的Dom功能
代码如下：
<!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="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
"今天天气",
document.querySelector("#root"),
()=>{
console.log("渲染成功");
}
);
</script>
</body>
</html>
2.利用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="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
let h1 = React.createElement("h1",null,"我是一个标题");
let p = React.createElement("p",null,"我是一个段落标签");
let el= React.createElement("header",{id:"header"},h1,p);
ReactDOM.render(
el,
document.querySelector("#root"),
()=>{
console.log("渲染成功");
}
);
</script>
</body>
</html>
3.JSX
是一个基于 JavaScript + XML 的一个扩展语法
JSX 使用注意事项
- 必须有,且只有一个顶层的包含元素 - React.Fragment
- JSX 不是html，很多属性在编写时不一样
- 列表渲染时，必须有 key 值
- 在 jsx 所有标签必须闭合
- 组件的首字母一定大写，标签一定要小写
<!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="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<h1> hello react</h1>
<p>利用JSX来渲染</p>
</header>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
4.插值表达式
在 JXS 中可以使用 {表达式} 嵌入表达式
表达式：产生值的一组代码的集合
注意：分清楚 表达式 与 语句 的区别，if、for、while 这些都是语句，JSX 不支持语句
代码示例
<!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="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let str ={
name: "拜拜",
age:18
}
ReactDOM.render(
<header>
<h1> {str.name}不错</h1>
<p>利用JSX来渲染</p>
</header>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
5.条件输出
输出数据类型
- 字符串、数字：原样输出
- 布尔值、空、未定义 会被忽略
列表渲染
- 数组
- 对象
扩展：虚拟 DOM （virtualDOM） 和 diff
条件渲染
<!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="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<h1>{true?"成立":"不成立"}</h1>
<p>{false||"利用JSX来渲染"}</p>
<div>{true&&"正确"}</div>
</header>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
6.列表循环
<!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="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/babel">
let data =[
"内容1",
"内容2",
"内容3",
"ddd"
]
function toData(){
let arr=[];
data.forEach(item=>{
return arr.push(<li>{item}</li>)
})
return arr;
}
ReactDOM.render(
<ul>
{
data.map(item=>{
return<li>{item}</li>
})
}
</ul>,
document.querySelector("#root"),
() => {
console.log("渲染成功");
}
);
</script>
</body>
</html>
基于自动化的集成环境模式 - create-react-app - 脚手架
通过前面 script 的方式虽然也能完成 React.js 的开发，但是有一个现在前端很重要的特性 - 模块化，无法使用。
Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用 模块化 以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。
安装与使用
通过 npm、yarn、npx 都可以
安装
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
使用
安装完成以后，即可使用 create-react-app 命令
create-react-app <项目名称>
或者通过 npx 的方式
npx
npx create-react-app <项目名称>
项目目录结构说明
运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
命令脚本
create-react-app 同时也提供了其它一些命令来帮助我们进行开发
npm start
启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000
类式组件
- 组件类必须继承 React.Component
- 组件类必须有 render 方法
代码示例
import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dL'
export default class Friendlist extends Component {
render(){
return (
<div className="friend-list">
{
Object.keys(data).map(item=>{
return (<Dl
name = {item}
value ={data[item]}
/>)
})
}
</div>
)
}
}
props 和 state
- props 父组件传递过来的参数
- state 组件自身状态
import React,{Component} from "react";
export default class Dl extends Component {
state ={
isOpen:true
}
render() {
let {title,list} = this.props.value;
let {isOpen} = this.state;
return(
<div className={"friend-group" +(isOpen ? "expanded":"")}>
<dt onClick={
()=>{
this.setState({isOpen:!isOpen})
}
}>{title}</dt>
{
list.map((item,index)=>{
return <dd key={index}>{item.name}</dd>
})
}
</div>
)
}
}
props 与 state 的区别
state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state
组件通信与数据流
在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。
数据代码
let datas = {
family:{
title:"家人",
list:[
{name: "爸爸"},
{name: "妈妈"}
]
},
friend:{
title:"朋友",
list:[
{name: "张三"},
{name: "李四"},
{name: "王五"},
]
}
}
export default datas;
React 中的事件注意问题
onClick 必须用大写，否则会报错
<button onClick={()=>{
this.setState({nub:nub+1})
}}>长一岁</button>
总结
今天我们主要学习了react 的一些基础内容，它包含了一些注意的地方，比如渲染时要包含的数据要用单{}去包裹。
所有标签必须闭合，哪怕单标签，这和我们之前学习的内容是一个很大的不同点。
|