React学习笔记

VIP文章 26:28

已于 2024-03-11 21:36:35 修改

阅读量415

点赞数 6

分类专栏： React 文章标签： react.js 学习笔记

于 2024-03-04 07:22:21 首次发布

本文链接：https://blog.csdn.net/njkl2166/article/details/136442227

版权

1、React初步认识

React构建Web和原生交互界面的库，相较于其它前端框架的优势，具有丰富的生态跨平台支持。

1.1、React的开发依赖

开发React必须依赖三个库：

react：包含react所必须的核心代码；
react-dom：react渲染在不同平台所需要的核心代码；
babel：将jsx转换成React代码的工具；

1.2、VSCode代码片段

我们在前面练习React的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成。
VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
具体的步骤如下：
- 第一步，复制自己需要生成代码片段的代码；
- 第二步，https://snippet-generator.app/在该网站中生成代码片段；
- 第三步，在VSCode中配置代码片段；

1.3、案列

列表渲染
条件渲染
事件绑定和传参方式（hooks函数不用绑定this）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn React</title>
</head>
<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.定义根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          message: "Hello App",
          movies: ["星际穿越", "大话西游", "盗梦空间", "少年派的奇幻漂流"]
        }
      }

      render() {
        return (
          <ul>
            {
              this.state.movies.map(item => {
                return <li key={item}>{item}</li>
              })
            }
          </ul>
        )
      }
    }

    // 2.渲染根组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn React</title>
</head>
<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>
    function foo() {
      console.log("foo:", this);
    }

    foo()

    // 1.定义根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          counter: 0
        }
      }

      render() {
        const { counter } = this.state
        return (
          <div>
            <h2>当前计数: {counter}</h2>
            <button onClick={this.increment.bind(this)}>+1</button>
            <button onClick={this.decrement.bind(this)}>-1</button>
          </div>
        )
      }

      increment() {
        this.setState({
          counter: this.state.counter + 1
        })
      }
      decrement() {
        this.setState({
          counter: this.state.counter - 1
        })
      }
    }

    // 2.渲染根组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

</body>
</html>