npm init -y
npm i babel-standalone -D
npm i react react-dom -D
安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始学习下面知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react初识组件</title>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
const head = (
<header> 这是属性引入组件 大括号 内写入存放标签的属性 </header>
)
//声明式无状态的组件
function Section(){
return (
<section> 这是函数引用组件样式的3种写法 </section>
)
}
//声明式有状态的组件 继承React.Component
class Footer extends React.Component{
constructor(){
super()
this.name = "panfu"
}
}
let element = (
<div>
<h2>{head}</h2>
<h2>{head}</h2>
<header> 这是头部样式 </header>
<section> 这是主体样式 </section>
<footer> 这是底部样式 </footer>
<h2>{head}</h2>
<hr/>
<Section />
<h2><Section /></h2>
<Section></Section>
</div>
);
//ReactDOM.render将element渲染到id=app的标签中
ReactDOM.render(
element,
document.getElementById('app')
)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
//声明式无状态组件
function Section( props ){
console.log( props )
return (
<section> 幸运大转盘{props.title} {props.data}</section>
)
}
let element = (
<div>
<h2><Section /></h2>
<Section
title={ '获奖的观众是' }
data={['小明',"小红"]}
></Section>
</div>
);
ReactDOM.render(
element,
document.getElementById('app')
)
</script>
</body>
</html>
