React脚手架create-react-app(环境搭建)

**

一、React的环境搭建(最简洁式)

**

1.首先确保安装了node和npm。

2.然后安装一个脚手架(这里我们使用create-react-app这个脚手架)
在这里插入图片描述
3.然后在自己需要的目录下利用脚手架搭建最开始的环境
在这里插入图片描述
4.然后在环境目录下运行npm start在这里插入图片描述,这是后我们发现自动打开了浏览器,并且地址是localhost:3000

在这里插入图片描述
而且这里有一个初始页面,这个页面就是react写好的一个欢迎页面,我们用编辑器打开我们建立好的环境,
在这里插入图片描述
public文件夹下面是我们的输出页面也就是我们再浏览器显示的页面,在Index.html中有一个ID叫root的div,这就是我们最后要将写好的内容挂载的DOM节点
在这里插入图片描述
而src文件夹下面就是我们写的内容了,这里sre下面有一个App.js文件就是刚才我们再浏览器看到的内容了
在这里插入图片描述
4. 知道了这些我们就可以自己来写一个简单的页面来试验一下。新建一个文件叫new-app.js,那么程序员对世界都是友好的,我们就写一个程序员对世界的态度吧,Hello world。
在这里插入图片描述
先引进react依赖一下,再创建一个类NewApp继承React.Component(注意这里的类名首字母要大写,不然应该是会报错的)在render方法中可以直接return我们最后的内容写好这些之后,最后我们再报这个组件导出。这就是react的jsx语法。

然后我们打开index.js先引进我们刚才写的组件
在这里插入图片描述
然后我们在ReactDOM.render中将原来的App组件改成我们自己写的NewApp组件
在这里插入图片描述
最后的index是这样的
在这里插入图片描述
这时候我们就能看到浏览器自己就刷新了

在这里插入图片描述
今天的分享就到这里了,有什么错误欢迎大家指出。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值