반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정-JS 튜토리얼-php.cn

이 글에서는 주로 react 케이스를 처음부터 만드는 세부 단계에 대해 설명합니다. 글의 구체적인 내용을 살펴보겠습니다

설명 예시

다음으로 간단한 사례를 통해 React의 내용을 자세히 배워보겠습니다
반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정

위 그림과 같이 버튼이 2개 있는데, 플러스 버튼을 클릭하면 숫자가 입니다. 더하기 1, 빼기 버튼을 클릭하면 숫자는 빼기 1이 됩니다

코드 구조

create-react-app를 사용하여 프로젝트를 만들고 코드 구조를 가장 간단한 모드로 줄이세요create-react-app创建一个工程，将其中的代码结构删减到最简单的模式

반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정

修改index.js

index.js中的代码就很简单了，只要引入App组件，执行渲染即可

import React from &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import App from &#39;./components/App&#39;ReactDOM.render(<App/>, document.getElementById(&#39;root&#39;));

로그인 후 복사

组件的基本内容

App.js中的内容才是我们要真正实现的逻辑,我们将使用ES6的方式创建一个React的组件，步骤如下

引入react

import React from &#39;react&#39;

로그인 후 복사

2.创建组件，并让组件继承React.Component,同时实现render函数

class App extends React.Component{
    render(){        return (
            <p>
            </p>
        )
    }
}

로그인 후 복사

3.为组件指定默认输出

export default App

로그인 후 복사

完整代码如下：

import React from &#39;react&#39;;class App extends React.Component{
    render(){        return (
            <p>
            </p>
        )
    }
}
export default App;

로그인 후 복사

React.Component是react的一个抽象基类，单独引用它毫无意义，我们通常用其来实现子类，实现子类的时候必须要实现其render函数
render函数的所用是返回组件的内容，而渲染的过程是有 react框架来完成的，在return()中只能有一个顶级的标签元素
export default指定了当前组件输出的默认模块

功能实现

范例中的内容可分为四个部分

1.加号按钮
2.减号按钮
3.简单文本
4.鼠标点击按钮变化的数字

其中按钮和文本都非常简单，但是数字需要鼠标点击进行改变的，假如我们没有学习过任何的前端框架，我们就要使用document对象，获取页面的内容，然后将其装换为数字，再对数字进行计划，然后将计算结果写入页面。而使用react来实现，我们需要知道，react的核心目标 组件化，组件中可变换的内容称之为状态（想看更多就到PHP中文网React参考手册栏目中学习）

组件中的数据来源有两种，内部声明和外部传入，分别用state和prop进行区别和表示，在es6组件中，可以通过constructor构造函数中接收外部传来的prop和声明内部使用的状态数据，在本文的范例中，我们需要用到一个在鼠标点击后不断变化的数字

constructor(props){
    super(props);
    this.state = {
        count:0
    }}

로그인 후 복사

我们已经声明了内部状态，并接收了外部传入的数组，下面我实现页面的展示内容,即实现render函数中的内容

    render(){
        return (            <p>
                <button>+</button>
                <button>+</button>
                <span>当前点击次数</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

로그인 후 복사

반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정

渲染效果如图1-3所示

内容美化

从页面效果来看，各个元素紧靠在一起，不太好看，我们通过简单的css对其进行美化，要达到的目标是：
- 整个内容增加上边距和左边距
- 按钮、文本、数字相互之间有一定的间距

在react中，使用css的方式与传统的方式有不同的地方
- 引入外部样式文件
新建style/App.css

.box{    margin-left: 50px;    margin-top: 50px;}.box *{    margin:auto 5px;}

로그인 후 복사

在App.js引入这个css文件

import &#39;../style/App.css&#39;

로그인 후 복사

在这里要值得注意的是，在react中，class属性要写成className，因为class是 JavaScript 的保留字

    render(){
        return (            <p className="box">
                <button>+</button>
                <button>-</button>
                <span>当前点击次数</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

로그인 후 복사

반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정

使用JavaScript对象来声明样式

    render(){
        const style={
            marginLeft:&#39;50px&#39;,
            marginTop:&#39;50px&#39;
        }
        const item = {
            margin:&#39;auto 5px&#39;
        }
        return (            <p style={style}>
                <button style={item}>+</button>
                <button style={item}>-</button>
                <span style={item}>当前点击次数</span>
                <span style={item}>{this.state.count}</span>
            </p>
        )
    }

로그인 후 복사

运行效果与图1-4一样

使用对象声明样式时，要使用camelCase< img src=" https://img.php.cn//upload/image/818/719/710/1536650649650192.png" title="1536650649650192.png" alt="반응은 어떻게 작동하나요? 처음부터 리액트 케이스를 만드는 전 과정"/>색인을 수정하세요. js

< code>index.js의 코드는 매우 간단합니다. App 컴포넌트를 소개하고 렌더링만 하면 됩니다

    render(){
        return (            <p style={{marginLeft:&#39;50px&#39;,marginTop:&#39;50px&#39;}}>
                <button style={{margin:&#39;auto 5px&#39;}}>+</button>
                <button style={{margin:&#39;auto 5px&#39;}}>-</button>
                <span style={{margin:&#39;auto 5px&#39;}}>当前点击次数</span>
                <span style={{margin:&#39;auto 5px&#39;}}>{this.state.count}</span>
            </p>
        )
    }

로그인 후 복사