React学习（三）：通过 React 编写名片组件（React属性）

阿里云服务器0元试用，首购低至0.9元/月起
【开发云】年年都是折扣价，不用四处薅羊毛
前置内容阅读 React学习（二）：编写 React 组件并成功挂载
效果预览：

1. 启动 my-project 工程

a. 进入工程目录启动工程

npm start

b. 下载 bootstrap 用于样式

npm install bootstrap --save

2. 编写名片组件

a. 在 src 目录下新建文件夹 componets 并在该目录下新建 NameCard.js 文件

b. 在 NameCard,js 文件中编写以下内容

import React from "react";
class NameCard extends React.Component {render() {// 采用了 ES6 的析构的方法，以便于编写简单const { name, number, isHuman, tags } = this.propsreturn (<div className="alert alert-success"><h4 className="alert-heading">{name}</h4><ul><li>电话：{number}</li><li>{ isHuman ? '人类' : '外星生物' }</li></ul><hr/><p>{ tags.map((tag, index) => (<span className="btn badge-pill btn-primary" key={index}>{tag}</span>))}</p></div>)}
}
export default NameCard

b. 在 index.js 中引入 bootstrap 文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 引用 bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);
reportWebVitals();

c. 将 App.js 文件修改成以下内容

import logo from './logo.svg';
import './App.css';
// 将编写的 NameCard 引入 React 入口文件中
import NameCard from './componets/NameCard';// 创建标签变量，用于传入 NameCard 组件
const tags = ['音乐', '电玩']
function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header><NameCard name='incercadi' number={17755169222} isHuman tags={tags}/></div>);
}
export default App;

d. 保存文件刷新网页即可得到以下结果

3. 将名片组件修改成函数

a. 将 NameCard.js 文件修改成以下内容

import React from "react";
// 将组件修改成函数
const NameCard = (props) => {const { name, number, isHuman, tags } = propsreturn (<div className="alert alert-success"><h4 className="alert-heading">{name}</h4><ul><li>电话：{number}</li><li>{ isHuman ? '人类' : '外星生物' }</li></ul><hr/><p>{ tags.map((tag, index) => (<span className="btn badge-pill btn-primary" key={index}>{tag}</span>))}</p></div>)
}

b. 刷新页面可得到和之前一样的效果

React学习（三）：通过 React 编写名片组件（React属性）相关推荐

React学习（1）——JSX语法与React组件
为什么80%的码农都做不了架构师?>>> 本文记录了在官网学习如何使用JSX+ES6开发React的过程. 全文共分为3篇内容: JSX语法与React组件状态.事件与动态渲 ...
HarmonyOS鸿蒙学习笔记（11）Flex组件alignItems属性说明
Flex组件alignItems属性 1.代码示例 2.FlexDirection.Row情况下各个ItemAlign的运行情况. 2.1.alignItems:ItemAlign.Auto的运行效果 ...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom.本小节我们学习下组件的更新机制. 我们知道我们定义类组件的时候,只能 ...
ballerina 学习三十二编写安全的程序
ballerina编译器已经集成了部分安全检测,在编译时可以帮助我们生成错误提示,同时ballerina 标准库已经对于常见漏洞高发的地方做了很好的处理,当我们编写了有安全隐患的代码,编译器就已经提 ...
React学习(六)-React中组件的数据-state
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 ID:suibichuanji 点击下方 ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
React学习(九)-React中发送Ajax请求以及Mock数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
2019 年 React 学习路线图
作者 | javinpaul 译者 | 无明之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发 ...

React学习（三）：通过 React 编写名片组件（React属性）

1. 启动 my-project 工程

2. 编写名片组件

3. 将名片组件修改成函数

React学习（三）：通过 React 编写名片组件（React属性）相关推荐

最新文章

热门文章