插件包2src文件夹是项目源码目录平时开发页面就在其中3.public文件4node_modules

JSX什么是JSXJSX中使用js表达式JSX实现列表渲染JSX实现条件渲染if

else

1package.json他是项目存放依赖包的地方里面包括了一些项目核心包及下载的其他插件包

dependencies:

^13.4.0,testing-library/user-event:

^13.5.0,react:

^2.1.4},以上就是package文件中存放项目核心包的地方

scripts:

./App;//把app根组件渲染到id为root的节点上节点在public的index.html中

const

ReactDOM.createRoot(document.getElementById(root));

root.render(App

//app-index.js-public/index.htnl(root)路径

function

public文件里面通常放着一些静态资源。

例如.ico结尾的文件即为我们项目运行成功后在浏览器页签中所展示的icon图标但是我们不能将其替换为png或者jpg格式的文件如果想替换的话就必须替换为ico格式的文件。

index.html

项目的入口文件引用了第三方类库啊还可以引入cdn或者样式但是其中的div

id“root”是项目的总容器所有的内容存储在这个容器中。

这个容器有且只能有一个。

且在项目的其他地方我们不建议往这个容器中加入我们待渲染的组件和页面因为在root中我们添加的是APP如果我们再添加其他元素进去会将我们添加的APP顶掉。

manifest.json

该文件是一个套壳的配置文件当我们的项目需要在手机端运行时就需要在这个文件里面进行配置。

通过安卓和苹果的应用程序都需要使用专门的开发语言进行开发因此如果我们想使用html来进行简单的移动端页面的开发就需要进行套壳。

这种就在这里不进行过多的讲解。

Robots.txt

该文件是屏蔽文件主要是为了防止爬虫来进行页面数据的爬去可以参考如下网站的简介

https://blog.csdn.net/weixin_30955341/article/details/94896204

4node_modules

JSX是js和xmlhtml的缩写1表示在js代码中能便编写html模板结构它是react中编写ui模板的方式

本质并不是标准的js语法它是js语法的扩展浏览器本身不能直接识别需要通过解析工具babel解析后才能在浏览器运行

jsx优点

通过大括号语法{}识别js中的表达式比如常见的变量函数调用方法调用等

使用引号传递字符串

[{id:0,name:vue},{id:1,name:react},{id:2,name:微信小程序}

function

key{item.id}{item.name}/li)}/ul/div);

}export

classNameApp{flagspanflag为true就显示flase不显示/span}/div);

}export

App;三元表达式可以根据变量来显示true的模板内容还是false的模板内容

const

classNameApp{flag?spanloading.../span:spanno

loading/span}/div);

getArticleType(){if(articleType0){return

function

handClick(){alert(我被点击了)}return

(div

onClick{handClick}点我/button/div);

}export

handClick(e){console.log(我被点击了,e)}return

(div

onClick{handClick}点我/button/div);

}export

语法事件绑定的位置改成箭头函数的写法在执行click函数实际处理业务函数时候传递实参

function

handClick(name){console.log(我被点击了,name)}return

(div

onClick{()handClick(掌门)}点我/button/div);

}export

一个组件就是用户界面的一部分他有自己的逻辑和外观组件之间可以相互嵌套也可以复用多次

React组件

在react中一个组件就是首字母大写的函数内部存放了组建的逻辑和视图渲染组件只需要将组件当成一个标签书写即可

const

hook函数它允许我们向一个组件添加一个状态变量从而控制组件的渲染效果

const

2.重新使用新的count渲染视图setCount(count1)}return

(div

onClick{handleClick}{count}/button/div);

}export

在react中状态被认为是只读的我们应该替换他而不是修改它直接修改状态不能引起视图更新

修改变量状态

handleClick(){//直接修改无法引起视图更新countconsole.log(count

}const

2.重新使用新的count渲染视图setCount(count1)}修改对象状态

对于对象类型的状态变量应该始终传给set方法一个全新的对象进行修改

import

[form,setForm]useState({name:张})//

2.点击事件回调const

2.重新使用新的count渲染视图setForm({...form,name:赵})}return

(div

onClick{changeForm}修改formm{form.name}/button/div);

}export

.top{width:100px;height:100px;background:red;

}行内方式

stylewidth100px;height:100px;111/div简洁版本

const