React前端开发环境搭建

痛定思痛。 2022-03-02 09:10 241阅读 0赞

node安装：[https://blog.csdn.net/weixin\_39706415/article/details/88680676][https_blog.csdn.net_weixin_39706415_article_details_88680676]

# （一）安装Node.js、npm、cnpm #

当我们在[官网][Link 1]下载并安装Node时，npm也自动安装好了，一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功（不需要自己手动配置系统环境变量）

![1154613-20180831083256443-741539540.png][]

因为国内使用npm很慢，我们可以使用淘宝的cnpm，同时设置镜像地址

npm install -g cnpm --registry=https://registry.npm.taobao.org

![1154613-20180831085218190-1887060300.png][]

安装成功后，可以键入cnpm -v检查是否安装成功

![1154613-20180831085521136-1868915850.png][]

### （二）创建我们的第一个react程序 ###

例如我们要在D:\\workSpace下创建first-react-demo这个工程，并跑通，我们依次执行如下步骤

window下进入D:\\workSpace这个文件夹，在地址栏键入cmd enter，

![1154613-20180831090305564-522180356.png][]

cnpm install -g create-react-app   全局安装创建react-app的module（这一步不一定要在workspace目录下）

![1154613-20180831090508085-567995138.png][]

create-react-app first-react-demo  在workspct这个文件夹下创建fist-react-demo这个项目

![1154613-20180831090723989-1730561394.png][]

但是，有可能会报错 Unexpected end of JSON input while parsing near '....0","dependencies":\{"' ，假如报错，需要执行npm cache clean --force

![1154613-20180831095618822-652403311.png][]

在创建成功的基础上，我们在打开first-react-demo这个文件夹，地址栏键入cmd并enter，在打开的cmd窗口中，键入npm start

![1154613-20180831101438278-1572210047.png][]

大功告成。浏览器键入localhost:3000即可访问

![1154613-20180831101713688-614884832.png][]

转：[https://www.cnblogs.com/jianan/p/9564259.html][https_www.cnblogs.com_jianan_p_9564259.html]

[https_blog.csdn.net_weixin_39706415_article_details_88680676]: https://blog.csdn.net/weixin_39706415/article/details/88680676
[Link 1]: https://nodejs.org/en/
[1154613-20180831083256443-741539540.png]: /images/20220302/15bb7e66b552483fa442acb8958fa8ce.png
[1154613-20180831085218190-1887060300.png]: /images/20220302/19ac3995d85e413788cc0f222da5bd73.png
[1154613-20180831085521136-1868915850.png]: /images/20220302/fe346d36a0094af3b20af9ef193b1696.png
[1154613-20180831090305564-522180356.png]: /images/20220302/ba916ee68f604624a713a6cae2b75f0a.png
[1154613-20180831090508085-567995138.png]: /images/20220302/cefa7f325edf4332ae72d67c47027307.png
[1154613-20180831090723989-1730561394.png]: /images/20220302/1e1d416b2c004d149f60956b724ac78f.png
[1154613-20180831095618822-652403311.png]: /images/20220302/d0e2e28db7474c548bc2e0588e3adbd5.png
[1154613-20180831101438278-1572210047.png]: /images/20220302/80b82b49d8cc4d8b95e9747c57c8dc1b.png
[1154613-20180831101713688-614884832.png]: /images/20220302/3bbf6434902940bd8fd004247ac319ee.png
[https_www.cnblogs.com_jianan_p_9564259.html]: https://www.cnblogs.com/jianan/p/9564259.html