项目目录结构说明
运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
我们在编写代码时的主要目光要集中在src这个文件夹内，不过里边的文件都是系统自带的一个模板，我们可以全部删掉然后自己重新编写
我们要想完成循环数据渲染页面，光用脚手架创建是不够的，还需要一个最最最重要的东西，就是组件
组件是什么？
所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。
函数式组件与类式组件
-
函数式组件
-
函数的名称就是组件的名称
-
函数的返回值就是组件要渲染的内容
-
-
类式组件
-
组件类必须继承
React.Component -
组件类必须有
render方法
-
我们这里主要通过类式组件完成实际案例来给大家做一个演示
1. 创建一个index.js并且引入根组件app.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(
<App />,
document.getElementById('root')
);
2. 创建一个app.js作为根组件并引入一个自定义组件
其实我们在这里直接写也可以实现，但是写出来的代码会很臃肿，不够简洁，不符合React组件存在的意义，所以我们在这里在引入一个组件
import React,{Component} from "react";
import FriendList from './FriendList';
class App extends Component{
render(){
return (<div>
<FriendList />
</div>)
};
}
export default App;
3. 在自定义组件里写入模板框架，引入你的数据与样式，且在引入一个新的组件
import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dl'
export default class FriendList extends Component {
render(){
return (
<div className="friend-list">
{
Object.keys(data).map((item,index)=>{
return <Dl key={index} value={data[item]}/>
})
}
</div>
)
}
}
着重点：
-
Object.keys——因为我们这里的数据data，是一个对象，但是map方法是数组的方法，所以我们要使用Object.keys这个方法来获取到一个数组方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 -
react列表渲染时尽量不要把索引(index)设置为key值
React是根据组件上设定的key属性来生成该组件唯一的标识，只有key改变了，React才会更新组件，否则重用该组件。如果想要更新组件内容，请保证每次的key都不一样。 -
父级给子级传递参数，直接在组件内写入你要传递的数据，譬如上方代码，我们给子级传递了具体数据
value={data[item]}在接收的时候只需要在子级使用props就可以了
4. 最后一个模板里边的内容
import React,{Component} from "react";
export default class Dl extends Component{
render() {
let {title,list} = this.props.value
return (
<dl className="friend-group">
<dt>{title}</dt>
{
list.map((item,index)=>{
return <dd key={index}>{item.name}</dd>
})
}
</dl>
)
}
}
着重点：
-
props接收父级传递过来的参数
我们接收的时候，要将props写在render()方法内部，这里因为接受了多个，所以使用了解构赋值来存放数据，当数据只有一个时，可以直接使用this.props.value
