(1)jsx 即 javascript+xml 其实就是JavaScript对象
JSX——使用react构造组件,bable进行编译 ==> JavaScript对象——ReactDom.render() ==> DOM元素==>插入页面
(2)创建组件
import React from 'react'
import ReactDOM from 'react-dom/client'; // 把react组件渲染到页面
// import App from './01-base/01-class组件'
// import App from './01-base/02-函数式组件'
// import App from './01-base/03-嵌套组件'
import App from './01-base/04-组件样式'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
01类组件
import React from "react";
// 类组件
class App extends React.Component{
render(){
return <div>hello class Component</div>
}
}
export default App
02函数组件
function App (){
return <div>
hello functional Component
</div>
}
// 无状态state组件 16.8版本之前 ,之后引用react hooks 写状态写属性
export default App
03嵌套组件
import React, { Component } from 'react' // rcc 快捷模板
// 建议统一一种写法
// 类组件
class Child extends Component{
render(){
return <div> Navbar-Child</div>
}
}
class Navbar extends Component{
render(){
return <div>Navbar
<Child/>
</div>
}
}
// 函数组件
function Swiper(){
return <div>swiper</div>
}
// 箭头函数写法
const Tabbar = ()=> <div>Tabbar</div>
export default class App extends Component {
render() {
return (
<div>
<Navbar/>
<Swiper/>
<Tabbar/>
</div>
)
}
}
04组件样式
import React, { Component } from 'react'
import './css/01-index.css' // 导入css模块 webpack支持
export default class App extends Component {
render() {
var myname = '王权富贵'
var obj ={
background:'yellow',
fontSize:'30px' // font-size 改成驼峰写法
}
return (
<div>
{10+20}
{myname}
{10>20?'aaa':"bbb"}
<div style={obj}>111</div>
<div style={{background:'red'}}>222</div>
{/* react推荐我们使用行内样式,因为react觉得每一个组件都是一个独立的整体 */}
<div className='active'>333 警告:class写成calssName</div>
<div id='myapp'>555</div>
<label htmlFor='username'>用户名:警告:for写成htmlFor</label>
<input type='text' id='username'></input>
</div>
)
}
}
.css文件
.active{
background: blue;
}
#myapp{
background-color: red;
}
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 学习react day02
发表评论 取消回复