React 从入门到离家出走 1-环境篇

冷不防 2022-02-01 00:15 178阅读 0赞

# React 从入门到离家出走 1-环境篇 #

### 1、安装node.js ###

下载地址：[https://nodejs.org/en/][https_nodejs.org_en]  
安装成功后查看版本，即可知道是否安装成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70]

### 2、安装create-react-app ###

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

#先安装cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    npm config set registry https://registry.npm.taobao.org
    #安装create-react-app
    cnpm install -g create-react-app

**安装时一定要使用管理员权限安装**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 2]

### 3、创建项目 ###

create-react-app web-app

### 4、安装yarn ###

npm install -g yarn

### 5、运行项目 ###

yarn start

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 3]  
浏览器查看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 4]

到此react的环境安装就结束了，后面将结合ant design 来构建我们的项目。

个人原创，转载请注明 [https://blog.csdn.net/Joker\_2007/article/details/90145186][https_blog.csdn.net_Joker_2007_article_details_90145186]

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70]: /images/20220201/e24ba479b11c4807940e0f395733b33c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 1]: /images/20220201/1d1e9c6263d44953a4e13bec9f5137d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 2]: /images/20220201/66b1a9b5cd8749fbb1d15618ba048131.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 3]: /images/20220201/63161f5d2ff84e75832053ec2ccd6f44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pva2VyXzIwMDc_size_16_color_FFFFFF_t_70 4]: /images/20220201/bb99dc8ab2264ee78dec3af848c69a4d.png
[https_blog.csdn.net_Joker_2007_article_details_90145186]: https://blog.csdn.net/Joker_2007/article/details/90145186