学习React 的第一天

光太郎
321 阅读3分钟

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情”

1.简介

  1. 今年是我成为程序员的第四年了，一路走来学了很多东西，有PHP，JAVA，C#，Python，Docker，K8s，Linux等等，每个语言都玩了一下，做了两个demo，学的多但是不精。
  2. 在我职业生涯的前两年主要做的是Python后端和爬虫，但是自己好像并不喜欢做后端，还是喜欢马上做出就能看到画面的前端。
  3. 其实接触前端的时间很早了，还没读大学之前，就知道把网页打开修改网页上的数据。
  4. 为什么前两年没有从事前端工作呢，主要还是听了指导员说，Python人工智能，大数据等等各种高大上的感觉，结果在毕业之后没有去一线城市，就留在了二线城市，完全没有对口的工作，各种投简历，各种被拒绝，自己就慢慢找视频学习前端，学习VUE。
  5. 终于在工作第二年快结束的时候，公司项目重构，没这么多前端，我就申请去试一下，结果就回不去了，至今一直在公司做前端写Vue。
  6. 在正式进入前端行列之后，恶补了ES、TS、CSS等技术栈，也是在那个时候接触到了倔金。
  7. 终于在有了一年经验之后，又想要更进一步，想要了解一下React，去年又刚好处了对象然后又考证等等，每次就学习一半之后又放下，荒废了一年，终于在今年蹭着春节期间，好好学习了一下React框架。
  8. 接下来就是我学习框架的一些笔记与心得。

2. 学习正篇

  1. 规定使用的技术栈
    1. Vite
    2. Ts
    3. React18
    4. npnm
  2. 创建初始化项目
    1. 安装node与npm略过
    2. 更换npm源 
      npm config set registry=http://registry.npm.taobao.org/
npm config get registry
    3. 安装pnpm 
      npm i -g pnpm
pnpm -v
pnpm config get registry
    4. 创建项目 
      pnpm create vite demo01 --template react-ts
    5. 安装依赖、运行项目 
      cd demo01
pnpm install
pnpm run dev
    6. image.png

3. 了解项目目录

├── index.html # 首页入口文件，你可以添加一些 meta 信息或统计代码啥的
├── package.json # 项目配置文件
├── public # 公共资源目录
│   └── vite.svg
├── src # 开发的目录，基本上要做的事情都在这个目录里
│   ├── App.css
│   ├── App.tsx # 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录
│   ├── assets # 静态资源文件
│   │   └── react.svg
│   ├── index.css
│   └── main.tsx # 项目的核心文件
└── vite.config.ts

4. 修改App.tsx文件 让自己能看懂

image.png

    function App() {
        return <h1>学习React第一天💗</h1>
    }

    export default App
  1. 就三行代码
  2. 定义一个funtion 并返回
  3. 尝试使用build 
    pnpm build
  4. 查看build之后 
    pnpm preview
  5. 查看控制台即可看到新的地址与端口
  6. 修改port
    1. 打开vite.config.ts文件
    export default defineConfig({
    plugins: [react()],
    server: {
        port: 8888,
    }
})
  7. 再打开 localhost:8888 就可以在看到了

4. 总结

  1. 学习到如何安装pnpm与修改源
  2. 使用vite创建一个react项目
  3. vite创建的react项目的目录说明

5.下一章学习

  1. JavaScript 的语法扩展 JSX
  2. 创建组件
  3. 使用组件
  4. 组件传递数据
avatar
文章
阅读
粉丝