React 学习回顾（第一节）

注意：本例子全是我回顾手敲得，其中单词难免有错，如果有错请自己按照语法格式敲一遍

第一节 React环境搭建

React 核心 JSX 语法

ReactDOM.render(
        React.createElement(    //创建元素的方法
            'p',                //创建的p标签
            {className:'red'},  //写入一个class的属性 ==>class被重命名
            '这是一个小可爱'       //标签里面的内容
        ),
        document.getElementById('app'))

如果是在标签里面在嵌入标签

ReactDOM.render(
    React.createElement(
        'div',
        {className:'red'},
        [
            '我是DIV 里面的一段话',
            React.createElement(
                'p',
                {tage:'custom '},
                '我是一个嵌套的标签'
            )
        ]
    ),
    document.getElementById('app'))

注：我们可以直接使用JSX 来编写代码，但是相对来说比较复杂，同时还要掌握更多JSX语法，此时我们使用Babel帮我们处理JSX语法让我们编写更加方便！

使用babel 方法：

• 创建一个React的文件

• npm init 初始化一个项目文件

• 根目录分别创建public文件及src文件 （public 用于存储我们的静态文件，src转义前的js文件）

• 下载安装babel 工具，babel中文官网。

• - npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react --save-dev
  - npm install @babel/polyfill --save 
  

• 在根目录下配置 .balbelrc

• {
      "presets":["@babel/preset-env","@balbel/preset-react"]
  }
  

• package.json 文件中配置一下"scripts"启用 （watch 实时监控）

• "babel": "./node_modules/.bin/babel src --out-dir pulic -watch"
  

  注：package.json中的配置文件不懂的移步到npm中文网 ，一下说几个关键的

  • "scripts" : 指令选项，
    • 此例中指令时 ./node_modules/.bin/babel src --out-dir pulic -watch，为了简化给他"babel"指令
  • "devDependencies"：开发时依赖，生产时不需要。
    • 使用npm 安装的时候 --save-dev 可简写 -D
  • "dependencies"：生产时依赖，就是表示发布到线上的时候也需要的依赖
    • 使用npm 安装时 --save 可简写-S