react 的核心主要由以下部分
- react.js 核心库
- react-dom.js 操作dom的react库
- babel.js 解析jsx 语法格式为js
<!-- react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom 用于操作dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- jsx 转义成js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>创建组件
- ReactDom.render(JSX语法，ID标签) JSX语法不能是字符串类型
- script type="text/babel" 必须将type改成text/babel
<!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>
<!-- react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom 用于操作dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- jsx 转义成js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/babel"> //必须写babel
//不能是字符串
let a = <div className='reactbox'>
<h1> hello react!</h1>
</div>;
ReactDOM.render(a, app) //不用document获取id 会有兼容性 -->
</script>
</body>
</html>如以上代码不使用jsx转成js（不使用babel）则如图：
<script type="text/javascript">
let vDom = React.createElement('div', {
className: 'reactbox'
}, React.createElement('h1', null, 'hello react!'))
ReactDOM.render(vDom, document.getElementById('app'))
</script> 使用render创建组件
import React from 'react';
import ReactDOM, { render } from 'react-dom';
render(<div>render使用</ div>, document.getElementById('root'));类class创建组件，加减案例
<!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>
<!-- react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom 用于操作dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- jsx 转义成js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./prop-types.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/babel">
class Demo extends React.Component {
constructor() {
super();
this.state = {
number: 10
}
}
last() {
this.setState({
number: this.state.number == this.props.min ? Number(this.props.min) : (this.state.number - 1)
});
}
next() {
this.setState({
number: this.state.number == this.props.max ? Number(this.props.max) : (this.state.number + 1)
});
}
render() {
return (<div>
<input type='button' value='-' onClick={this.last.bind(this)} />
<div>{this.state.number}</div>
<input type='button' value='+' onClick={this.next.bind(this)} />
</div>)
}
}
ReactDOM.render(<Demo min='0' max='10' />, app);
</script>
</body>
</html>函数式组件:
-
优点：简单/渲染也快，
-
缺点：一旦调用后组件信息基本不变了（除非重新调用组件传递不同的组件） 相比类组件没有state状态随便变化，也没有周期生命函数
第一种
<script type="text/babel">
function Demo(){
return <h1>hello</h1>
}
ReactDOM.render(
<Demo />,document.getElementById('app'))
</script> import React from 'react'; //必须引入
<FunTemplete title='aa' title2='bb' />
//函数式组件1
export default function FunTemplete(props) {
console.log(props)
return <div>函数式组件{props.title}</div> //输出函数式组件aa
}第二种
import React from 'react'; //必须引入
//传一个的时候也是一个对象 但可以执行在函数中props.chilren使用
<FunTemplete ><span>1</span></FunTemplete>
//函数式组件
export default function FunTemplete(props) {
console.log(props)
return <div>函数式组件{ props.chilren}</div> //输出函数式组件1
}webpack
- npm install create-react-app 安装脚手架
- create-react-app XXX 基于脚手架创建项目 xxx文件名称
- npm start 启动
- npm build 打包
- yarn eject 查看所有配置项，一旦开启不能关闭
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
