<>create-react-app 脚手架

Create React App 是一个使用 Node.js 编写的命令行工具,通过它可以帮助我们快速生成 React.js 项目,并内置了
Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包,也就是通过它,我们可以使用 模块化 以及 ES6+
等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer
帮助我们更好的在本地预览应用,其实还有更多。

<>安装与使用

通过npm、yarn、npx都可以,因为方法都大同小异,所以我们这里只为大家演示一下npm的安装使用方法

<>安装指令
npm i -g create-react-app
<>使用指令

在安装完成以后,我们就可以使用 create-react-app 命令来创建一个项目
create-react-app '项目名称'
<>项目目录结构说明

运行命令以后,就会在运行命令所在目录下面创建一个以项目名称为名的目录
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
<>浏览器反馈

技术
©2019-2020 Toolsou All rights reserved,
java四大函数式接口(重点,简单)html写樱花树,写樱花树的作文HashMap详解某东14薪变16薪,是诚意还是套路?浏览器内核(理解)让人意想不到的Python之樱花树(turtle库的华丽样式)os模块的简单使用