【React】添加新组件

环境准备

安装create-react-app

通过安装create-react-app，我们可以在本地创建前端应用。

npm install -g create-react-app

紧接着我们可以创建一个项目：

create-react-app first_react_app
cd  first_react_app
npm start

基于组件开发应用

这是React开发的首要思想。组件是什么呢？
简单说就是：能完成某个特定功能的独立的，可重用的代码。

现在添加一个计时器组件，我们先把这个组件定义好：

// ClickCounter.js
import React, { Component } from 'react';class ClickCounter extends Component {constructor(props) {super(props);// 事件监听函数this.onClickButton = this.onClickButton.bind(this);// 初始状态this.state = { count: 0};}onClickButton() {this.setState({ count: this.state.count + 1 });}render() {return (<div><button onClick={ this.onClickButton }> Click Me </button><div>Click Count: { this.state.count }</div></div>);}
}
export default ClickCounter;

在初始阶段，先一块一块解析。这里要引入关键的React以及{ Component }，然后要定义一个类，之前的语法是通过React.creatClass完成，现在换成class ClickCounter extends Component，然后我们在里面写构造器函数，定义一个点击监听函数，并将其绑定到本组件，在render()函数里，渲染要显示的内容，并通过变量占位，实时更新数据。

现在我们把这个组件代码引入到index.js.

import ClickCounter from './ClickCounter'
ReactDOM.render(<ClickCounter />, document.getElementById('root') // 在index.html中有个id为root的div
);

界面会自动刷新，可以看到计时器组件成功运用了~~~

END.

参考：

《深入浅出React和Redux》

【React】添加新组件相关推荐

React Native新组件之SwipeableFlatList
做过移动开发的同学都应该清楚,侧滑删除是移动开发中的一个常见功能.在官方没提供侧滑组件之前,要实现侧滑效果需要使用第三方库,如react-native-swipe-list-view.不过随着Reac ...
java frame清除控件_java – 清除JFrame的组件并添加新组件
我有一个JFrame,它有一些选项.当按下OK按钮时,我想要相同的JFrame清除内容并添加新内容.我试过了,但问题是新的JFrame被弹出.我究竟做错了什么? import java.awt.*; ...
前端学习（2325）：angular之添加新组件
app.component.html <div style="text-align:center"><h1>welcome to {{title}}< ...
react 给一个引用的组件添加新属性_高阶组件在React中的应用
高阶组件的定义接受React组件作为输入,输出一个新的React组件. 概念源自于高阶函数,将函数作为参数,或者输出一个函数,如map,reduce,sort. 用haskell的函数签名来表示: ...
初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
angular在IE下报object doesn't support property or method matches问题，以及router-outlet切换时不删除原组件而是添加一个新组件
angular在IE下有时会报object doesn't support property or method matches问题同时,在router-outlet切换时,不删除原组件而是添加一个 ...
react+hook函数组件实现表单添加数据，表格展现
效果图: 目录结构:(目分为主页面BookTable,以及两个组件,表格组件和添加书籍组件) 主页面:主要是将两个组件引入进页面,并将添加书籍事件.删除书籍事件传递给子组件,由子组件触发. impor ...
react 返回一个页面_Fiber 内部: 深入理解 React 的新 reconciliation 算法
最近在看 React, 发现一篇深度好文, 忍不住就翻译了. React 是一个用于构建用户界面的库, 它的核心是跟踪组件状态变化并将它们更新到页面上. 在 React 中, 我们称这个过程为 rec ...
uiw 1.2.17 发布，基于 React 16 的组件库
发布, 高品质的UI工具包,React 16+的组件库. 文档网站:uiw-react.github.io 开源仓库:github.com/uiw-react/u- 更新内容: ? 修复没有代码检测文 ...

【React】添加新组件

环境准备

基于组件开发应用

【React】添加新组件相关推荐

最新文章

热门文章