|
1.概念:
他是用于构建用户界面的 JavaScript 库;
2.官网:
中文:https://reactjs.bootcss.com/
英文:https://reactjs.org/
3.使用:
基础:
ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
? ReactDom.render(element,container,callback)
? element: 元素(内容);
? container:内容存放的容器;
? callback:回调函数(可选)
<script crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id='root'></div>
<script>
ReactDOM.render(
"今天天气不错",
document.querySelector('#root') ,
()=>{
console.log('渲染成功')
}
)
</script>
React.js 提供了React.js的核心代码 ,比如 虚拟DOM,组件
? React.createElment(type,props,children)
? type: 类型,(也就是是什么标签),
? props:属性
? children: 子辈的内容
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id='root'> </div>
<script>
let h1= React.createElement("h1",null,'我是一个标题');
let p= React.createElement("p",null,'我是一个p标签');
let el= React.createElement(
'header',
{id:"header"},
h1,
p
);
ReactDOM.render(
el,
document.querySelector('#root'),
()=>{
console.log('渲染成功')
}
)
</script>
babel
babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js
JSX:
? Javascript和xml的扩展语法;他可以更加简化代码;
? 他的使用需要配合babel
? 注意: script标签里加上type类型为text/babel
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<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>
插值表达式:
? 在 JXS 中可以使用 {表达式} 嵌入表达式
? 各种数据的插值状态:
? 字符串,数值他们是原样输出
? 数组是去掉逗号,原样输出;
? 布尔值,undefined,null 不输出
? 对象 整个输出会报错,想要输出结果,必须找到对象里面的属性名一个一个输出
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<div id='root'>
</div>
<script type='text/babel'>
let data={
name:"zhangsan",
age:14
}
ReactDOM.render(
<header>
<h1>hello react {data.name}</h1>
<p>利用JSX来渲染</p>
</header>,
document.querySelector('#root'),
()=>{
console.log('渲染成功')
}
)
</script>
条件输出:
? 三元运算符
? 与或运算符 && ||
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<div id='root'>
</div>
<script type='text/babel'>
ReactDOM.render(
<header>
<h1>{ false ? '成立':'不成立'} </h1>
<p>{true || '利用JSX来渲染' }</p>
<p>{true && '正确'}</p>
</header>,
document.querySelector('#root'),
()=>{
console.log('渲染成功')
}
)
</script>
列表渲染:
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<div id='root'>
</div>
<script type='text/babel'>
let data=[
"内存1",
"内存2",
"内存3"
]
function toData(){
let arr=[]
return arr
}
ReactDOM.render(
<ul>
{
data.map(item=>{
return <li>{item}</li>
})
}
</ul>,
document.querySelector('#root'),
()=>{
console.log('渲染成功')
}
)
</script>
JSX 使用注意事项:
? :基于javascript和xml的扩展语言
唯一父级/唯一容器
? 他可以作为值使用
? 他并不是字符串
? 他也不是html,很多属性在编写时不一样;
? class =====className
? style ======是一个对象,不是字符串
? 他可以配合js表达式一起使用
? 他不可以和js语句一起使用
? 所有的标签必须是小写
? 所有的标签必须闭合,哪怕是单标签
? 每次且只能输出一个标签 (必须要有一个容器)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
.box{
width:100px;
height:100px;
background-color:cyan;
}
</style>
<div id='main'>
<div id='header'></div>
<div id='container'></div>
<div id='footer'></div>
</div>
<script type='text/babel'>
let style={
width:'200px',
height:'200px',
background:'red'
}
let {Fragment}=React;
ReactDOM.render(
<Fragment>
<div className='box' style={ style}></div>
<p>我是一个段落标签</p>
</Fragment>,
document.querySelector('#header')
)
</script>
create-react-app - 脚手架
安装:
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
查看版本:
npx --version
使用:
安装完成以后，即可使用 create-react-app 命令
create-react-app <项目名称>
进入目录
cd 项目名
运行
npm start
运行 Jest测试
npm run test
打包应用:
npm run build
组件:
? 对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复 用，且不用担心冲突问题。
? 函数式组件
? 函数的名称就是组件的名称;
? 函数的返回值就是组件要渲染的内容;
? 类式组件:
? 组件类必须继承 React.Component
? 组件类必须有 render 方法
import React,{Component} from 'react';
class App extends Component {
render(){
return (<div>你好</div>)
}
}
export default App;
案例:
app.js
import React,{Component} from 'react';
import FriendList from "./FriendList";
class App extends Component {
render(){
return (<div>
<FriendList/>
</div>)
}
}
export default App;
FriendList.js
import React,{Component} from 'react';
import "./FriendList.css";
export default class FriendList extends Component {
render (){
return (
<div className="friend-list">
<div className="friend-group">
<dt>家人</dt>
<dd>爸爸</dd>
<dd>妈妈</dd>
</div>
<div className="friend-group">
<dt>朋友</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
</div>
<div className="friend-group">
<dt>客户</dt>
<dd>阿里</dd>
<dd>腾讯</dd>
<dd>头条</dd>
</div>
</div>
)
}
}
friendList.css
.friend-list {
border: 1px solid #000000;
width: 200px;
}
.friend-group dt {
padding: 10px;
background-color: rgb(64, 158, 255);
font-weight: bold;
}
.friend-group dd {
padding: 10px;
}
.friend-group.expanded dd {
display: block;
}
.friend-group dd.checked {
background: green;
}
props 和 state
? props:父组件传递过来的参数
? state:组件自身的状态
? setState :修改属性
props 与 state 的区别:
? props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
? state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
? state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state
React中的事件:
? 大小写问题;
? this问题: 可以用回调函数来解决
总结:
了解React基础,以及创建脚手架,和React的事件
|