React很流行,并且已经有各种各样的框架可以用。但如果你之前已经有一个网站,你想以最小代价,为它添加React的功能(尤其是组件化编程,动态构建界面等)。请参考下面的做法。

我同时还很喜欢Typescript,请参考此前的文章:https://www.cnblogs.com/chenxizhang/p/14382837.html

第一步:添加jsx的支持。这是可以让我们用javascript定义html元素。

以最小代价将React添加到现有网站_React

 

第二步:安装react, react-dom这两个库。以及 @types/react, @types/react-dom 这两个定义库。全部用-D参数安装。

第三步:修改类型定义应用文件。Index.d.ts文件如下

以最小代价将React添加到现有网站_React_02

第四步:创建你的tsx文件,用来定义前端代码逻辑

以最小代价将React添加到现有网站_React_03

第五步:在你的html文件中,引用对应的js文件。

以最小代价将React添加到现有网站_React_04

第六步:编译tsx文件,生成js文件。如下所示

以最小代价将React添加到现有网站_React_05