【学习打卡】第1天 入门React

课程名称：[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节： 环境搭建 / 项目启动 / NPM vs YARN

主讲老师：阿莱克斯

课程内容：

1. 使用create-react-app搭建一个react工程化项目
2. 使用node-v查看版本号
3. 学习npx命令

课程收获：

1. 使用命令

   npx create-react-app my-app

2. 安装依赖并启动

npm install
npm start

3. 修改 src/App.js中文字

      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>hello world</p> // 修改
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

4. package.json

   "react": "^18.2.0", // 关键组件
   "react-dom": "^18.2.0", // 关键组件
   "react-scripts": "5.0.1", // 核心组件 集成了babel等构建工具 类似于webpack封装版
   "scripts": {
       "start": "react-scripts start", // 利用node启动本地服务器
       "build": "react-scripts build", // 打包项目
       "test": "react-scripts test", // 单元测试
       "eject": "react-scripts eject" // 弹出项目的配置文件
   },
   

5. 认识 jsx

   jsx允许在js代码写出html代码来渲染页面，因为react在全球范围内流行，jsx的代码可以直接写在js文件中

6. NPM Yarn 命令学习

• 从 package.json 中安装项目依赖 npm install 或 yarn
• 向 package.json 添加/安装新的项目依赖 npm install {库名} --save yarn add {库名}
• 向 package.json 添加/安装新的dev项目依赖（devDependency）npm install {库名} --save-dev yarn add {库名} --dev

7. 课程截图