React--HTML⽂件编写react
⼀、基本概念
要想在html⽂件⾥⾯书写和使⽤react，必须要明⽩三个⽅法和概念
React这个是react的核⼼语法，是关键
ReactDOM这个是react操作DOM的特殊⽅法，der()
Babel这个是解析es6语法的⼯具，让⽼旧浏览器能够识别
那要获取这三个⽅法和概念，可以去下载响应的⽂件引⼊，也可以通过CDN引⼊，推荐CDN引⼊
<script src="unpkg/react@16/umd/react.development.js"></script>
<script src="unpkg/react-dom@16/umd/react-dom.development.js"></script>
<script src="unpkg/babel-standalone@6.26.0/babel.js"></script>
接下⾥就是在html⽂件⾥⾯创建⼀个根元素，这个根元素就是react⽤来插⼊并渲染所有react元素的容器
<div id="root"></div>
最后就可以在script标签⾥⾯写react代码了，但是这⾥有个重点，那就是script标签的类型type，正常的script标签类型是type="text/javascript"，⽽⼀般写模板语法时，写的类型是type="text/html"，但是react的script标签的类型是type="text/babel"**记住⼀定要写成这个类型，否则会报错，解读不了react代码
react也是主要模块化，组件化开发，所以可以把每⼀个功能或者⽅法写成⼀个组件，react封装组件的⽅法有两种：
JS写法
正常的JS写法，类似于JS函数，⼀个函数就可以看成是⼀个组件，但是不同的是react⾥⾯函数名不再是调⽤函数的，⽽是react元素名，⽽且必须⼤写开头，因为react默认⼩写开头的元素为html原⽣语法，如div，'span'等，只有⼤写开头的元素才会解析成react元素（即组件），注意这个元素⾥⾯有个props对象参数，组件所需要的所有数据都是从这个参数⾥⾯获取的，key值就是在元素上⾃定义的值：如name function App (props) {
return (
<h1>Hello {props.name} !</h1>
)
}
class写法
class写法其实就是typescript的类，通过extends继承react组件，在这⾥⾯可以写react的⽣命周期，随意写⾃⼰想要写的东西，constructor⽅法是必须要有的，这个⽅法有个props参数，⽤来让App组件可以使⽤元素上的定义的值，否则App拿不到值，⽽要App能够使⽤props，必须通过super⽅法挂载⼀下
class App extends React.Component {
constructor(props) {
super(props)
}
render () {
return (
<h1>Hello {this.props.name} !</h1>
)
}
}
Tips
创建html文件通过上⾯两个写法⽐较，可以发现有⼀点不同：
1、函数写法的组件直接返回react元素，不需要render函数去渲染⼀下，在class⽅法⾥⾯渲染react元素，则需要通过render函数去转换⼀下
2、函数写法的组件获取props对象的数据是直接通过.⽅法，但是在class⾥⾯则需要通过this.props.key的⽅式，不能直接.⽅法获取
⼆、渲染react元素
想要将react元素渲染到DOM中，显⽰出来则需要通过ReactDOM对象的render()⽅法
这样就相当于把创建的App这个组件渲染到了页⾯ID为root的根元素⾥⾯，展⽰在页⾯，⾄于组件⾥⾯⽤的数据就直接写在元素上⾯，注意通过{}把数据包裹起来
react组件可以嵌套的，像class这种⽅式是继承，嵌套的话就是在另⼀个组件中想要展⽰另⼀个组件的地⽅直接书写这个react组件即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。