react(一）：特点-基本使用-JSX语法

发布于：2025-03-15 ⋅ 阅读:(20) ⋅ 点赞:(0)

初识React 

React是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。

官网文档：React 官方中文文档

特点

1.声明式编程

2.组件化开发

3.多平台适配

开发依赖

开发React必须依赖三个库：

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

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

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

引入依赖的方式：

1.CDN引入

<!-- CDN引入 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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

3.npm管理

案例-普通方式实现

注意：React18前后，渲染组件的书写方式较为不同

React18之前：使用 ReactDOM.render() 方法来渲染组件

React18之后：使用 ReactDOM.createRoot() 方法来渲染组件

<body>
  <div id="root"></div>

  <!-- 1.引入依赖 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 编写React代码 -->
  <script type="text/babel">
    // React18之前：ReactDOM.render()
    // ReactDOM.render(<h2>Hello World</h2>,document.getElementById('root'))

    // React18之后：createRoot
    const root = ReactDOM.createRoot(document.getElementById('root'))
    /* 
      要修改文本内容
      step1:将文本定义成变量
    */
    let message = 'Hello World'

    //step2:监听按钮的点击
    function btnClick() {
      // 2.1修改数据
      message = 'Hello React'

      // 2.2重新渲染界面
      rootRender()
    }

    rootRender()
    // step3.封装一个渲染函数
    function rootRender( ){
      // 第一个（）表示方法；第二个()表示它是一个整体
      root.render((
        <div>
          <h1>{message}</h1>
          <button onClick={btnClick}>修改文本</button>
        </div>
      ))
    }
  </script>
</body>

案例-组件化开发

可使用类的方式，将其封装成一个组件

<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">
    // 使用组件重构代码
    // 1.类组件-类名必须大写！！
    // 2.函数式组件
    class App extends React.Component {
      // 组件数据
      constructor() {
        super()

        //this.state = {定义的数据}
        this.state = {
          message:"Hello World"
        }
      }
      // 组件方法(实例方法)
      btnClick() {
        //该函数默认this指向为undefined——改变其this指向
        // 内部完成两件事：1.将state中的值修改掉  2.自动重新执行render函数
        this.setState({
          message:"Hello React"
        })
      }

      // render中返回的jsx内容即root根节点渲染内容
      render() {
        // console.log("render",this);//此处this-App组件实例
        return (
          <div>
            <h2>{this.state.message}</h2>
            <button onClick={this.btnClick.bind(this)}>修改文本</button>
          </div>
        )
      }
    }
    
    // 将组件渲染到界面上
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(<App />)
  </script>
</body>

JSX语法解析

jsx书写规范

render(){
  const {message} = this.state
  /* 
  书写规范：
  1.JSX结构中只有一个根元素
  2.JSX结构通常包裹一个（）—— 将整个jsx当成一个整体，实现换行
  、3.jsx可以是单标签，也可以是双标签，但是单标签必须以/>结尾
  */
  return (
    <div>
      <h1>{ message }</h1>
      <br/>
    </div>
  )
}

jsx注释写法

render(){
  const {message} = this.state
  return (
    <div>
      {/* jsx注释写法 */}
      <h1>{ message }</h1>
    </div>
  )
}

jsx插入内容

<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">
    //1.创建root
    const root = ReactDOM.createRoot(document.getElementById('root'))

    //2..定义App根组件
    class App extends React.Component {
      constructor() {
        super()

        this.state = {
          message:"Hello World",
          names:[ 'Jack', 'Tom', 'Lucy' ],
          count:100,

          aaa:undefined,
          bbb:null,
          ccc:true,

          friend:{name:'lucy', age:22},

          firstNmae:'张',
          lastName:'三',

          age:20,

          movies:["哪吒","唐探","三体"]
        }
      }

      render(){
        // 1.插入标识符
        const {message, names,count} = this.state
        const { aaa, bbb, ccc} = this.state
        const {friend} = this.state

        // 2.对内容进行运算后显示(插入表达式)
        const {firstNmae, lastName} = this.state
        const fullName = firstNmae + "" + lastName

        const {age} = this.state
        const ageStr = age > 18 ? '成年人' : '未成年人'
        const {movies} = this.state
        const items = movies.map(item => <li>{item}</li>)

        // 3.返回jsx的内容
        return (
          <div>
            {/* 1.Number/String/Array直接显示处理 */}
            <h1>{ message }</h1>
            <h2> {names} </h2>
            <h2> {count} </h2>

            {/* 2.undefined/null/Boolean页面什么都不显示-取值为空 */}
            <h2>{aaa}</h2>
            <h2>{bbb}</h2>
            <h3>{ccc}</h3>

            {/* 3.Object类型不能作为子元素显示 */}
            {/* <h2>{friend}</h2> */}
            <h2>{Object.keys(friend)}</h2>

            {/* 4.可插入对应的表达式 */}
            <h2>{ 10 + 20 }</h2>
            <h2>{firstNmae + "" + lastName}</h2>
            <h2>{fullName}</h2>

            {/* 5.插入三元运算符 */}
            <h2>{ageStr}</h2>
            <h2>{age >=18 ? "成年" : "未成年"}</h2>

            {/* 可以调用方法获取结果 */}
            <ul>{items}</ul>
            <ul>
              {movies.map(item => <li>{item}</li>)}
            </ul>
            <ul>{this.getMovies()}</ul>
          </div>
        )
      }

      getMovies(){
        const liEls = this.state.movies.map(item => <li>{item}</li>)
        return liEls
      }
    }

    // 3.将App组件渲染到root上
    root.render(<App />)
  </script>
</body>

jsx绑定属性

<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">
    //1.创建root
    const root = ReactDOM.createRoot(document.getElementById('root'))

    //2..定义App根组件
    class App extends React.Component {
      constructor() {
        super()

        this.state = {
          title:"学习第一天",
          imgURL:"https://p1.ssl.qhmsg.com/t0143b426aee3bb03cb.jpg",
          link:"htttp://www.baidu.com",

          isActive:true,
          objStyle:{color:"red", fontSize:"30px"}
        }
      }

      render(){
        const {title, imgURL,link,isActive,objStyle} = this.state

        // 需求：isActive为true时，添加active类名
        // 写法一：
        const className = `abc cba ${isActive? "active" : ""}`
        // 写法二：
        const classList = ["abc","cba"]
        if(isActive) {
          classList.push("active")
        }
        return (
          <div>
            {/* 1.基本属性绑定 */}
            <h1 title={title}>我是h1元素</h1>
            {/* <img src={imgURL} alt=""/> */}
            <a href={link}>百度一下</a>

            {/* 2.绑定class属性 */}
            <h2 className={className}>哈哈哈哈哈</h2>
            <h2 className={classList.join(" ")}>哈哈哈哈哈</h2>

            {/* 3.绑定style属性:绑定对象类型 */}
            <h2 style={{color:"red", fontSize:"30px"}}>11111</h2>
            <h2 style= {objStyle}>888</h2>
          </div>
        )
      }
    }

    // 3.将App组件渲染到root上
    root.render(<App />)
  </script>
</body>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布