React（一）基本使用

最新推荐文章于 2024-05-09 14:57:18 发布

小羽苏

最新推荐文章于 2024-05-09 14:57:18 发布

阅读量236

点赞数

分类专栏：前端框架基础文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_52773679/article/details/127727453

版权

前端框架基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

引入

在基础的学习中，先不会使用create-react-app创建项目，所以先用到以下包作为学习react的依赖

react：包含必须的核心代码
react-dom：渲染在不同平台所需的核心代码
babel：识别JSX语法

可以通过CDN的方式进行引入

<!-- React核心 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<!-- ReactDOM -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

下载到本地，进行使用

直接赋值上面CDN的链接访问下载即可

按照这两种方式引入完相关依赖之后就可以使用React了

基本使用

在React 18中，通过react-dom中的createRoot方法来创建一个react根元素，他接受一个真实DOM作为参数，并且通过返回对象的render方法来渲染React元素

 <body>
    <div id="root"></div>
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/babel.js"></script>
    <script type="text/babel">
      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<h1>Hello React</h1>)
    </script>
  </body>

使用 jsx时记得给script标签加上type="text/babel"，才可以正确的使用babel转义

可以看见界面效果如下
在这里插入图片描述
这样就表明了成功的应用了React

组件

之前的render函数传入的react元素是一个普通的DOM标签，但是这也可以是我们自定义的组件。React 的组件可以定义为类组件或函数组件。

在这里就先使用类组件了

用es6的类语法来创建一个App类，该类继承于 React.Component并且必须实现一个render方法，render方法的返回值就会被渲染，具体如下

class App extends React.Component {
    render() {
       return <h1>Hello React</h1>
    }
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

在这里插入图片描述
如果要在组件中拥有数据，也就是类的属性，可以在constructor中进行定义

数据可分为参与页面更新的，与不参与更新的
参与更新的数据（响应式）一般写于当前对象的state中，并且通过setState来修改数据

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      messgae: "Hello React",
    }
  }
  render() {
    return <h1>{this.state.messgae}</h1>
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)