React 环境搭建

1.安装Node.js,npm

node官网下载:https://nodejs.org/en/ ,一路next默认安装即可,当我们安装好node后,npm同时也自动安装好了,用 node -v 以及 npm -v 查看版本号,若显示出版本号则说明安装成功!(不需要手动配置环境) 如以下图片所示:

image.png

推荐:
因为国内使用npm很慢,我们可以使用淘宝的cnpm,同时设置镜像地址
npm install -g cnpm --registry=https://registry.npm.taobao.org

image.png

安装完以后,上诉所有通过npm安装的React的方式都可以将npm改成cnpm,速度会快很多

2. 创建我们的第一个 React 项目

例如我们要在D:\web下创建first-react-demo这个工程,并跑通,我们依次执行如下步骤
进入D:\web这个文件夹,在地址栏键入cmd 并 enter


image.png

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



create-react-app first-react-demo 在web这个文件夹下创建fist-react-demo这个项目
image.png

image.png

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


image.png

在创建成功的基础上,进入first-react-demo项目文件夹,地址栏键入cmd并enter,在打开的cmd窗口中,键入npm start


image.png

image.png

到此恭喜您,大功告成!
浏览器键入localhost:3000即可访问

原文:https://www.cnblogs.com/jianan/p/9564259.html
//www.greatytc.com/p/a62da41dacce
具体详细的package.json解析请看大神的文章:package.json文件

备注:
项目目录如下:


image.png

manifest.json 指定了开始页面 index.html,一切的开始都从这里开始,所以这个是代码执行的源头。
尝试修改 src/App.js 文件代码:


image.png

去网页输入 localhost:3000


image.png

查看更多:react | 菜鸟教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在当下前端热潮中,一大批前端开发者,迷失了学习和追求的方向,面对日夜更迭的前端技术,我想大多数人跟我一样会觉得自己...
    wenzirang阅读 609评论 0 3
  • React环境搭建 标签(空格分隔): React [TOC] 最近在研究React+Bootstrap来来写前端...
    袁俊亮技术博客阅读 20,563评论 0 16
  • 其实在今年年初,就初略的写过一篇关于react项目创建的详细步骤的文章,但那时候都是在最后实践完成之后自己凭借着回...
    Swimly阅读 3,183评论 0 2
  • 链接地址:http://www.runoob.com/react/react-install.html 1、rea...
    青春前行阅读 309评论 0 0
  • Step1.安装Node.js和npm Step2.打开cmd控制台或者Terminal查看是否安装成功 输入no...
    MarcoTan阅读 402评论 0 0