当前位置：首页 > news >正文

React 基础案例

news 2025/8/3 8:16:57

React的特点：

1、声明式编程

2、组件化开发

3、多平台适配yuan

原生实现：

    <h2 class="title"></h2><button class="btn">改变文本</button><script>let msg = "Hello World";const titleEl = document.querySelector(".title");titleEl.innerHTML = msg;const btnEl = document.querySelector(".btn");btnEl.addEventListener("click", (e) => {msg = "Hello React";titleEl.innerHTML = msg;});</script>

React实现：

React开发必须依赖三个库

1、react：包含react所必须的核心代码

2、react-dom：react渲染在不同平台所需要的核心代码

3、babel：将jsx转换成React代码的工具

（1）引入依赖

1、直接CDN引入

2、下载后，添加本地依赖

3、npm管理（脚手架使用）

  <body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性--><!-- jsx特点：多个标签最外层只能有一个根标签 --><script type="text/babel">let msg = "Hello World";function btnClick() {msg = "Hello React";render();}// 渲染的内容，挂载的对象function render() {ReactDOM.render(<div><h2>{msg}</h2><button onClick={btnClick}>改变文本</button></div>,document.getElementById("app"));}render();</script></body>

代码组件化

<body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性--><!-- jsx特点：多个标签最外层只能有一个根标签 --><script type="text/babel">// 封装App组件 想让app是个组件必须先继承class App extends React.Component {// 构造器定义属性constructor() {super(); // 初始化父类实例，才可以使用this// 当数据变化引起页面的变化，不能直接定义在对象里面,必须写在state对象里面this.state = {msg: "Hello World",};}render() {return (<div><h2>{this.state.msg}</h2><button onClick={this.btnClick.bind(this)}>改变文本</button></div>);}btnClick() {//直接修改页面不会发生变化 this.state.msg = "Hello React";// 必须通过一个函数执行 数据更新操作render函数this.setState({msg: "Hello React",});}}ReactDOM.render(<App />, document.getElementById("app"));</script></body>

（2）使用脚手架

原生使用的是命令式编程，react使用的是声明式编程