React——基础Count案例解析

最新推荐文章于 2026-06-16 08:54:39 发布

原创

最新推荐文章于 2026-06-16 08:54:39 发布 · 1.3k 阅读

标签

#react

本文通过创建一个React Count应用，详细介绍了React的基础用法，包括创建项目、组件分析、编写App.js和Counter.js，以及探讨React生命周期。在Counter组件中，强调了通过函数更新状态的重要性，并展示了组件如何根据props和状态决定是否重新渲染。

1. 创建项目文件夹

用官方给的脚手架直接创建项目文件夹，关于搭建项目文件夹，可以参照之前的一篇博文React创建项目文件之自己搭建和运用脚手架搭建
我这里就直接采用脚手架搭建

create-react-app react-count

然后进入react-count文件夹下面，运行命令

npm start

React会自动监听3000端口，如果浏览器出现以下页面说明第一步创建项目文件夹成功了。
这里写图片描述

项目的架构这里就不重复说了，因为项目比较简单，我们就直接将文件放在src文件夹下面。所以我们先把src文件夹下面所有的内容都删了。

jane@ljj ~/WebstormProjects $ cd react-count/
jane@ljj ~/WebstormProjects/react-count $ cd src/
jane@ljj ~/WebstormProjects/react-count/src $ rm *

2.对项目进行简单的分析

React的首要思想就是通过组件（Component）来开发应用的。
首先我们需要一个叫做App的页面组件，就是将整个页面显示出来，这就跟上图的Welcome to React所在页面一样。在这个App组件上有一个计数器组件。
所以，我们还需要一个Counter组件用来计数的。计数器组件应该有增加按钮和减少按钮。

大概就是上面这两个组件啦～～

现在我们在scr/下创建三个文件叫App.js、Counter.js和index.js。

3. 编写index.js

在public/目录下面，有一个index.html文件，该文件里面有一个id = 'root'的节点。所以我们下面的这段代码就是将App这个组件渲染到root节点下。

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";

ReactDOM.render(
    <App /> , document.getElementById('root')
)

4. 编写App.js基础部分

下面这段代码让浏览器的Welcome to React所在页面变了样子。

import React , {Component} from 'react'

class App extends Component {
    constructor(props){
        super(props);
    }
    render(){
        re

最低0.47元/天解锁文章