目录
这个大家看标题应该也知道了,React是一个用于构建用户界面的javaScript库,起源于Facebook的内部项目,后续在2013 年 5 月开源出来。
它有以下特点:
声明式 | 你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI |
---|---|
基于组件 | 组件是React最重要的内容,组件表示页面中的部分内容 |
学习一次,跨平台编写 | 使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用 |
目标:能够独立使用React脚手架创建一个react项目。
创建一个文件夹,然后进入到里面,在地址栏输入cmd 回车。
进入命令行工具后,输入下面的命令:
npx create-react-app react-demo01
命令解读:
create-react-app
是React脚手架的名称。下载完成后,进入 react-demo01。
cd react-demo01
输入启动命令:
yarn start
或
npm start
启动成功后,你就可以看到下面的界面:
现在我们使用开发工具打开我们刚刚下载的项目,大家可以使用 Webstorm , HBuilder X , Visual Studio Code 。我使用 Webstorm 。
1、只保留app.js根组件和index.js和index.css,删除src目录下自带的其余文件。
2、将其余文件的内容修改,让其不报错。
index.js文件作为项目的入口文件,大家看上图的注释,其中ReactDOM的render方法渲染App根组件到id为root的dom节点上,那么 root 节点在哪里呢?
还有一个小地方就是,我们可以把 index.js 中 的 <React.StrictMode> </React.StrictMode>, 严格模式去掉,因为它会影响我们的useEffect 执行时机 ,因为它要检测意外的副作用,每次执行都会执行两次,所以大家可以去掉,去掉也不会影响我们的开发的。当然也可以选择不删除。
概念:JSX是 JavaScript XML(HTML)的缩写,表示在 JS 代码中书写 HTML 结构。
作用:在React中创建HTML结构(页面UI结构)
优势:
注意:JSX 并不是标准的 JS 语法,是 JS 的语法扩展,浏览器默认是不识别的,脚手架中内置的 @babel/plugin-transform-react-jsx 包,用来解析该语法。
语法
{ JavaScript表达式 }
我们在 app.js 编写代码。
效果:
可以使用的表达式:
注意:
页面的构建离不开重复的列表结构,比如歌曲列表,商品列表等,我们知道vue中用的是v-for,react这边如何实现呢?
使用数组的map 方法!
效果:
注意:
可以使用if/else或三元运算符或逻辑与运算符来实现。
效果:
样式分为 行内样式 和 类名。
行内样式:
效果:
类名 - className:
我们需要现在app.css 编写代码。
app.js
效果: