首页手记【学习打卡】第1天入门React

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

标签：

Html5 CSS3

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

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

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

主讲老师：阿莱克斯

课程内容：

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

课程收获：

使用命令

   npx create-react-app my-app

安装依赖并启动

npm install
npm start

修改 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>

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" // 弹出项目的配置文件
},

认识 jsx

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