React文件解释、组件定义及渲染过程

Posted 2023-03-09

参考技术A 安装node，使用react官方的脚手架工具生成结构，在桌面依次执行下面三行命令

node_modules文件夹是存放依赖包

yarn.lock：放置的是整个项目所依赖的第三方模块的各种信息（或者是package.json，功能一样，有yarn.lock,执行命令是用yarn，否则用npm）

README.md：放置对项目的描述。可删除文件内容后自行编辑描述。

package.json：对项目进行说明，比如项目名字、版本、是否为私有项目、该项目安装的依赖和可执行的npm各种指令

要执行start命令，使用npm start的话，会被自动转为npm run start；而要执行build命令的话，必须使用npm run build（项目打包）才行。

.gitignore：配置不想上传到git的文件

1、.ico 是浏览器中标签页部分的图标，该图标可以到网上搜索一下，自己制作一个；【文件名和后缀名不是固定的，都是可以修改的。但实际开发中，默认都是以favicon.ico命名，便于与其他图片区分开，用来表示地址栏的小图标。所以更推荐使用这个图标时，以favicon.ico命名。】

1）<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> //引入图标

2）文件内设置了移动端适配的meta标签，我们不做移动端的，可以删除

3）文件里引入了manifest.json，我们不需要使用，可以删除它，相应的可以把public下的manifest.json文件也删除；

4）假如浏览器不支持javascript，页面上的提示内容在noscript标签内设置。

如：<noscript>您的浏览器不支持js，请打开浏览器对js的支持配置项</noscript>

5）<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

苹果为ios设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。

1）这里可以直接引入css文件

2）import App from './App';实际是在引入App.js，App是App.js的缩写，写App的时候会先在当前目录下找App.js这个文件；

3）React.StrictMode 标签是开启react的严格模式

就是一个组件，在index.js中引入，通过render渲染函数，渲染在页面上，并且只能渲染一个标签，可以在外层包裹一个div，里面放各个组件标签名

然后在index中，通过reactDOM把app生成的文本，挂载到id为root的标签上，然后index.html上，让父容器的id=root，就渲染成功了。

ReactDOM.render(<App />,document.getElementById(' '));

3、App.test.js是一个项目的自动化测试文件，可删除

class 组件名 entends Component ｛  

        render () ｛    ==>  渲染函数

             return （返回出去渲染的内容）

        ｝

｝

入口文件index.js中使用render函数挂载到index.html的DOM节点上

ReactDOM.render(<App />,document.getElementById(' '));

render函数只能渲染一个标签，index.js或者组件中都是这样，可以在外层包裹一个div，里面放各个组件标签名