《React项目0到1》-初始化项目

第一步:使用react脚手架:create-react-app 新建一个react项目,如下:

create-react-app projectName

新建成功

整个过程大概也就3-5分钟的样子,安装完成后,我们可以看到可以使用一些yarn命令,启动、build、test、弹射(不可逆,慎用)。

第二步: 添加TS,并且修改任意js文件为.tsx后运行

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

那么,我们就启动项目,执行一下: cd admin -> yarn start


启动成功

我并没有设定默认浏览器,所以打开的是Edge浏览器,之后会修改成为谷歌浏览器,毕竟谷歌浏览器调试起来,要好用得多。之后考虑的兼容浏览器: 、

  • 谷歌(版本 86.0.4240.75(正式版本) (64 位))
  • 火狐(78.0.2 (64 位))
  • Edge(版本 86.0.622.43 (官方内部版本) (64 位))

既然项目搭建好了,简单看下初始项目的目录结构:


单页程序(SPA: single page web application)所以这里就只需要一个html文件,即index.html, 也就是入口文件。
index.html

index.html里面就只有一个id 为root的div标签,那么内容是如何进入到这个div里面的呢?我们来看看index.js里面有什么。
index.js

先不管其他的内容,只看红色框里面的内容,document.getElementById('root'),这句话就是把id为root的节点对象拿到,然后ReactDOM.render(),把组件App渲染到这个节点里面。具体React.render的使用,可以参考React官网,进行更详细的了解,有兴趣的化,也可以参看React的github地址(https://github.com/facebook/react/blob/v16.13.1/packages/react-dom/src/client/ReactDOMRoot.js
)进行了解。

项目地址:https://github.com/956159241/PersonalBlog

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容