React初始化项目结构分析

根据上一篇文章,初始化了一个React项目,接下来,我们看看这个项目都有什么。


2789632-d33598d98422b9dc.png

看一下,简单的一个模块间的关系。
首先,打开的依旧是index.html, 在index.html里面,我们可以设置一些DOM元素,可以添加一个定值,也可以只写一个DOM,由React后续写入,例如:
此处定义一个div,写了一句话,并直接定义了样式:字体红色。id 为root的div则为空,之后由React添加内容。


2789632-db1e524ebfdfd985.png

Index.js 和index.css则是为id 为root的div 追加内容和样式。也就是为root添加子节点,追加方式如下:


2789632-efc0848b06e64312.png

运行结果如下:


2789632-4f7cbf6c6a05a9d9.png

2789632-8b11625db399ab70.png

2789632-16477880cb72f270.png

转载于:https://www.jianshu.com/p/ec15f8c285ef

猜你喜欢

转载自blog.csdn.net/weixin_34004576/article/details/91067408
今日推荐