持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
一、react---入门页面结构搭建2--react的两种使用基础方法（function+class）、（json和js之间的相互转换）
json和js之间的相互转换
如果是在框架里用import引入，也可以，但是如果在页面中写个js，也是非常简单的方式
将json文件修改为js 文件后，在页面中用script引入，然后就可以直接使用使用起来相对非常简便
基础使用方法
先引入三个js文件，上一张有写怎么使用引入连接的步骤
<title>第一个react组件</title>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<!-- js文件引入的顺序，先引入react.js,再引入react-dom.js -->
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<!-- <script src="./db.js"></script> -->
<!-- script标签必须加上type="text/babel"，因为我们需要解析jsx语法 -->
<script type="text/babel">
// var list = [];
// console.log(pets);
// 在react中组件需要使用大写开头
function HelloWorld(props) {
return <h1>你好，世界！,count值为:{props.count}</h1>;
}
// 使用了class类的继承
class HelloMesage extends React.Component {
// render表示渲染组件，所有的组件中都有这个方法
render() {
return <h5>我是一句话</h5>;
}
}
// render 参数一 表示展示的组件内容,参数二表示位置
// 使用{}来表示js
ReactDOM.render(
<HelloMesage count={2} />,
document.getElementById("app")
);
</script>
</body>
二、react--jsx语法中的循环展示（className，js{}的用法、fetch调用接口循环）
使用fetch
<title>第一个循环数据</title>
<style>
.person {
background-color: #999;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
fetch("http://localhost:3009/api/v1/products")
.then((res) => res.json())
.then((res) => {
function Products() {
// 使用jsx循环生成数据的时候一定要使用map
return (
<ul>
{res.products.map((p, i) => (
<li key={p._id}>{p.name}</li>
))}
</ul>
);
}
// render 参数一 表示展示的组件内容,参数二表示位置
ReactDOM.render(<Products />, document.getElementById("app"));
});
</script>
</body>
循环---组件套组件的使用
<title>第一个循环数据</title>
<style>
.person {
background-color: #999;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script src="./libs/babel.min.js"></script>
<script type="text/babel">
// React中所有的组件都是一个function对象
// 1️⃣组件写法：组件套组件
function Person(props) {
// 在react中设置样式的时候使用style
// 在react中设置class样式名的时候需要写成className,因为class是js的保留字
return (
<li className="person" style={{ color: props.color }}>
{props.name}
</li>
);
}
function People() {
const renwu = ["Tom", "Jerry", "马冬梅"];
// 使用jsx循环生成数据的时候一定要使用map
return (
<ul>
{renwu.map((p, i) => (
<Person key={i} color={i % 2 == 0 ? "red" : "blue"} name={p} />
))}
</ul>
);
}
// 2️⃣直接写法
/* function People() {
const renwu = ["Tom", "Jerry", "马冬梅"];
return (
<ul>
{renwu.map((p, i) => (
<li key={i}>{p}<li/>
))}
</ul>
);
} */
// render 参数一 表示展示的组件内容,参数二表示位置
ReactDOM.render(<People />, document.getElementById("app"));
</script>
</body>
