react基本用法_react的用法-优快云博客

本文链接：https://blog.youkuaiyun.com/summers_alice/article/details/104909388

本文详细介绍了React的基本用法，包括如何引入必要的文件、创建组件、使用虚拟DOM以及将组件挂载到真实DOM上。同时，文章强调了文件引入的顺序，并解释了不同文件的作用，为初学者提供了清晰的学习路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react用法

1，引入三个文件

<script src="../base/react.min.js"></script>
<script src="../base/react-dom.min.js"></script>
<script src="../base/browser.min.js"></script>

文件引入是有顺序的，先引入react.min.js，再引入react-dom.min.js，最后引入browser.min.js

第一个文件相当于Vue.js，提供的是react对象；
第二个文件提供了reactdom对象；
第三个文件是帮助浏览器解析jsx语法糖

2，在script标签中的用法

创建组件
组件是虚拟dom
将虚拟dom通过ReactDom.render挂载到真实dom上
组件名必须大写

这个是15.6版本的写法

<script type="text/babel">
let Component = React.createClass({
  render() {
    // render 函数内部 返回jsx
    return (
      <h1> 你好世界</h1>
    )
    
  }
})
// 将组件的虚拟dom挂载到真实dom上
ReactDOM.render(<Component/>,document.getElementById('app'))
</script>

注：使用jsx时需要引入browser.min文件，而且在script标签中需要加上type=“text/babel”才可以解析jsx

这是16版本的写法

class Mount extends Component{
	render(){
		return()
	}
}
export default Box