一、react 介绍
create-react-app 是 FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具
二、Mac 电脑开发准备
1.安装 node.js 是为了用 npm ,使用安装包即可
2.安装 git ,是为了用 git ,安装 git 过程
( 1 )安装 homebrew
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
( 2 )安装成功之后
brew install git
( 3 )即可使用 git 命令
三、搭建 react 脚手架
1.npm install -g create-react-app
发现报错:
[Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/ansi-regex'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules/npm/node_modules/ansi-regex'
2.搜索 npm install -g create-react-app MacOS 报错解决
sudo npm uninstall -g create-react-app //删除之前对镜像
npm config set registry https://registry.npm.taobao.org // 安装还是不成功直接切换成淘宝镜像安装
npm config get registry
sudo npm install -g create-react-app
create-react-app --version//查看版本
3.create-react-app react-program//快速生成新项目,react-program 为项目名称,
(已经开始报错了,不支持这种安装方式了)
报错如下:
You are running create-react-app
4.0.3, which is behind the latest release (5.0.0).
We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/) 4.成功之后出现 Success! Created react-program at /Users/zhangxinzhan/react-program Inside that directory, you can run several commands:
npm start Starts the development server.
npm run build Bundles the app into static files for production.
npm test Starts the test runner.
npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd react-program npm start
Happy hacking! 5. 使用命令 cd react-program npm start 6.启动之后就可以看到一个 welcome 页面,然后就可以去 src 下面编辑你自己的 APP 啦 https://www.cnblogs.com/katydids/p/11083096.html 7.引入 antd https://ant-design.gitee.io/docs/react/use-with-create-react-app-cn,不能用 1-6 npm i antd 引入 antd 遇到点问题,得是在 antd 官网介绍的那块引入的 8.引入 router npm install react-router-dom npm i react-router-dom
1
murmur 2022-08-22 09:44:24 +08:00
我推荐你用 vue 学起,至少不至于把踩坑的部分单独写出来记录一下,看大家的经验,css 比 js 更难一点
|
2
hay313955795 2022-08-22 09:51:05 +08:00
@murmur css 确实是个难题....写了不生效 就很尴尬..调试也调试不出来..
|
3
lifesimple 2022-08-22 10:24:43 +08:00
@hay313955795 css 为啥不能调试出来呢 直接 f12 找到元素调试呀
|