汉唐皓月网站推广方案,上海外贸公司最新招聘,设计学习网站,公司如何做网站宣传目录
扩展学习资料
购物车应用
编写React元素
/src/index.js
创建组件
/src/components/listItem.jsx
/src/App.js
理解JSX【JavaScriptXML】
JSX是什么
JSX规则
/src/components/listItem.jsx
使用Fragments
/src/App.js
为何要使用Fragments
表格中使用Fragme…目录
扩展学习资料
购物车应用
编写React元素
/src/index.js
创建组件
/src/components/listItem.jsx
/src/App.js
理解JSX【JavaScriptXML】
JSX是什么
JSX规则
/src/components/listItem.jsx
使用Fragments
/src/App.js
为何要使用Fragments
表格中使用Fragment
渲染结果
小结
温习所学知识 扩展学习资料 预习资料名称 链接 MVN Node版本管理 https://github.com/nvm-sh/nvm Create React App Create React App Bootstrap 全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网
购物车应用
编写React元素
/src/index.js
import React from react;
import ReactDOM from react-dom;
import ./index.css;
// import App from ./App;
import bootstrap/dist/css/bootstrap.css
// react元素 javascript object
const element h1hello react!!!/h1
console.log(element)
// 将react虚拟dom加载到实际的浏览器页面上
ReactDOM.render(// 严格模式// 使用StrictMode的优点// 识别不安全的生命周期组件// 有关旧式字符串ref用法的警告// 关于使用废弃的 findDOMNode 方法的警告// 检测意外的副作用// 检测过时的 context APIReact.StrictMode{/* App / */element}/React.StrictMode,document.getElementById(root)
);
创建组件
应用位置树状结构图里面位置是什么【子组件父组件兄弟组件】确定参数输入的参数和哪些初始参数复用的场景【输入参数初始参数复用场景】确定类型函数组件 Class组件【函数组件、类组件】组件内容组件返回哪些内容
/src/components/listItem.jsx
import React, { Component } from react;
class ListItem extends Component {render() { return (h1我是组件Hello React !!!/h1);}
}
export default ListItem;
/src/App.js
import React from react;
import ./App.css;
import ListItem from ./components/listItem;
function App() {return (div classNamecontainerListItem //div);
}
export default App;
理解JSX【JavaScriptXML】
JSX是什么
JSX是Javascript的语法扩展使用XML标记的方式直接声明界面
模板引擎语言Angular、Vue里的语法template语法、NodeJS
不是模板引擎语言【带语法糖的ATX抽象语法树语法糖的处理放在了构建阶段运行时不需要解析】声明式方式创建UI处理UI逻辑【这样可以很好的描述UI呈现出它应有的交互的本质的形式】遵循JavaScript语法无学习门槛
react关注点分离
Babel 是一个 JavaScript 编译器
JSX背后的原理 JSX规则
在JSX中嵌入表达式用{}包裹大写开头作为定义组件小写tag为原生dom节点JSX标签可以由特定属性和子元素JSX只能有一个根元素
/src/components/listItem.jsx
import React, { Component } from react;
const product {id:1,name:Sony 65寸高清液晶大电视,price: 3999,stock: 20 // 库存
}
let count 0
class ListItem extends Component {manageCount() {return count 个;}render() { return (div classNamerow mb-3div classNamecol-6 themed-grid-col{product.name}/divdiv classNamecol-1 themed-grid-col{product.price}/divdiv classNamecol-2 themed-grid-col{this.manageCount()}/div/div)}
}export default ListItem;
使用Fragments
/src/App.js
import React from react;
import ./App.css;
import ListItem from ./components/listItem;
function App() {// React.createElement()return (div classNamecontainerListItem /ListItem /ListItem /ListItem //divdiv classNamecontainerListItem /ListItem /ListItem /ListItem //div/);
}
export default App;
为何要使用Fragments
可以包含并列的子元素编写表格组件包裹子元素html生效
表格中使用Fragment
// 父组件
class Table extends React.Component {render() {return (tabletrColumns //tr/table );}
}
// 子组件
class Columns extends React.Component {render() {return (tdHello/tdtdWorld/td/ );}
}
渲染结果
tabletrtdHello/tdtdWorld/td/tr
/table
小结
React元素创建组件JSX语法Fragment 温习所学知识
1、将Vue相关JSX练习中的棋盘练习在React中练习。
2、将写好的Jsx在Babel中转义了解解析过后的代码。
