React快速上手

最新推荐文章于 2024-09-13 15:06:03 发布

HouszChina

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： react JavaScript

本文链接：https://blog.csdn.net/HouszChina/article/details/79842604

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

通过create-react-app工具快速构建React项目，初步了解React工作机制。

1. 环境配置

忽略React的技术栈细节，使用create-react-app构建应用。
开发环境：node和npm(或cnpm)

安装create-react-app：

cnpm install -g create-react-app

在工作目录下执行下列命令建立应用：

create-react-app myapp

自动构建完成后进入项目根目录：

cd myapp

启动应用：

cnpm start

默认地址为http://localhost:3000/，浏览器打开即可看到效果：
这里写图片描述
这样就快速构建了一个可运行的React应用。

React依赖庞大的技术栈，如Babel、Webpack等，初学者的耐心很容易在一系列配置文件中消耗殆尽。React的发明者Facebook提供了create-react-app来让开发者快速上手，无需过早淹没于各种配置细节。

2. 添加组件

React的核心是通过组件（component）的复用来开发应用。每个组件完成特定功能，将项目分解成小的组件能够大大减少开发难度。

先来看create-react-app自动生成的项目结构：

src/
public/
node_modules/

README.md
package.json

src目录下存放我们项目的源码。将src/index.js改为：

import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './ClickCounter';
import './index.css';

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

在src目录下新建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;

http://localhost:3000/已经自动更新：
这里写图片描述

点击Click Me测试效果。

接着解释一下代码各部分的意义。
在index.js中：

import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './ClickCounter';

使用import语法分别导入了React、ReactDOM和自定义模块ClickCounter。import是ES6语法，不必担心浏览器对ES6的支持问题，因为webpack和babel会将其自动转换为ES5语法，这一过程由create-react-app自动完成。

在ClickCounter.js中：

import React, { Component } from 'react';

这一行导入了React和Component。Component是所有组件的基类，所有的组件都由其派生。接下来就是创建一个ClickCounter组件类：

class ClickCounter extends Component {
}

这也是ES6的语法，可以看出与Java十分类似。

js代码中“夹杂”着类似HTML的语法，如：

<ClickCounter />

<div>
    <button onClick={this.onClickButton}>Click Me</button>
    <div>
        Click Count: {this.state.count}
    </div>
</div>

这种写法正是React的特色：JSX

3. JSX

传统的web应用通常由三部分构成：
* HTML 表示内容
* CSS 表示样式
* JavaScript 定义交互
JSX使得三者融为一体，在一个文件中完成三种功能。可以为组件直接定义样式：

render() {
    const counterStyle = {
        margin: '16px'
    }
    return (
        <div style={counterStyle}>
            <button onClick={this.onClickButton}>Click Me</button>
            <div>
                Click Count: {this.state.count}
            </div>
        </div>
    );
}

JSX与HTML的不同之处在于JSX可以自定义标签，这点与XML是相同的，这也正是JSX名字来源：JavaScript+XML。

JSX定义的组件会直接被React渲染，区别标签是HTML元素还是React组件的唯一原则就是：
首字母是否大写。