05、React系列之--永不过时的Hello world

本文介绍React项目的创建方法,包括使用Create React App工具快速搭建环境及不借助工具从零开始编写Hello World示例。同时探讨React组件的基本用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录:

1、快速创建工具

我们可以通过好多种方式来创造react项目,比如官方说的Create React App(要求是Node4或以上版本),可以通过npm工具来安装

npm install -g create-react-app

然后创建一个项目

create-react-app my-app
cd my-app

最后可以通过

npm start || npm test || mpm run build

等命令来启动服务等,具体请看官方文档

note: 创建React项目不止这一个工具,有非常多的,比如jspm等这里不一一说明了。

2、不使用工具,一步步来写Hello World

先来看效果

hello-result.png

在这里我们不使用任何的快速开发的框架或工具,我们按照官方一步步来做一个Hello World的React Demo

1、步骤

  • 1、下载Download Starter Kit 15.3.2 包。地址http://reactjs.cn/react/downloads.html
  • 2、把其中的build文件夹copy到自己要写的Hello world项目中
  • 3、手动添加所需要的js

2、开始Hello World

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>

  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

</head>
<body>
  <div id="example"></div>

  <script type="text/babel">
    ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('example')
    );
  </script>
</body>
</html>

hello-world.png

注意图中的黄色框,就是我们在html中所添加的代码,我们双击index.html就可以看到最初上面的效果图了。

3、解析一下

  • 1、导入需要的js
 <script src="../build/react.js"></script>
 <script src="../build/react-dom.js"></script>
 <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

首先我们要写react,那么就要引入react.js,react-dom.js不多说这个,那么第三个bable是什么东东,它就是一个js的解释器,把es6的语法(新语法)转化成现在的浏览器中就可以用(而不用等浏览器去支持)

  • 2、ReactDOM.render()方法

ReactDOM.render方法有两个参数 ,第一个是组件,第二个是组件要显示的位置,调用这个方法就可以把组件渲染到指定的dom节点上了

怎么样,简单吧,就是这么简单,那么下来我们玩点稍微高级一点的

3、单个组件

我们知道React是组件的世界,我们写的Hello World 还没有任没看组件的出现,那么我们把Hello world写成一个组件

在上面的Hello world代码中,我们只修改body中的script,代码如下:

<script type="text/babel">
    //使用ES5的写法
   /**
    var HelloWord = React.createClass({
      render:function(){
        return(
          <div>
            <h1>hello world ES5</h1>
          </div>
        ) ;
      }
    });
    */

    //使用ES6的写法
    class HelloWord extends React.Component{
      render(){
        return(
          <div>
            <h1>hello world  ES6</h1>
          </div>
        );
      }
    }

    ReactDOM.render(
    <HelloWord />,
    document.getElementById('example')
    );

以上我们把HelloWord写成了一个插件,并且采用两种写法,这两种写法输出是一毛一样的,只不过一个是使用了ES5的写法,一个使用了ES6的写法(建议,先使用ES5,了解了ES5再使用ES6(目前来说好多项目或教程还是采用ES5的居多))

解释一下

  • 1、我们以ES5为例来说,首先是创建一个React类,这样创建了一个组件
var HelloWord = React.createClass({
    .....
});
  • 2、组件显示什么内容,以及如何显示,组件的render()方法上场了
render(){
    return(
        <div>
            ...
        </div>
    ) ;
}

Note:这里要注意一点就是return()方法只能且必须有一个根节点(比如上面的div),在根结点中,你可以任意的嵌套。

本篇文单所对应的demo地址

https://github.com/githubchen001/react-lesson/tree/master/lesson01/03-helloworld

下一节

下一节,我们看看如何使用browserify管理React,如何打包,如何自动刷新浏览器等等

<think>好的,我现在需要帮助用户了解wang-editor的自定义工具栏配置。首先,我要回忆一下wang-editor的相关知识,确保信息的准确性。 用户提到的是“wang-editor”,可能指的是由国内开发者开发的富文本编辑器,常用于Vue或React项目中。需要确认版本,因为不同版本的配置方式可能有差异。不过一般来说,自定义工具栏配置的方法在大多数版本中是似的。 首先,我需要介绍什么是工具栏配置。用户可能希望知道如何添加、删除或重新排列工具栏按钮。接下来,应该分步骤说明如何进行配置,包括注册新按钮、配置工具栏选项等。 要确保覆盖以下几点: 1. 如何通过配置文件或选项来定义工具栏显示哪些按钮。 2. 如何自定义新的按钮或扩展现有功能。 3. 可能的代码示例,帮助用户理解具体实现。 4. 注意事项,比如不同版本之间的差异或常见问题。 用户可能需要示例代码,所以需要准备一些简单的代码片段,例如使用JavaScript或TypeScript配置工具栏。同时,要提醒用户根据自己使用的框架(如Vue、React)进行调整。 另外,需要检查是否有最新的API变更,确保提供的信息不过时。比如wang-editor v5可能和v4的配置方式不同。假设用户使用的是较新版本,比如v5,那么配置方式可能是通过传入一个数组来定义工具栏。 可能还需要提到如何自定义按钮的图标、事件处理函数,以及如何集成到编辑器中。例如,注册一个自定义按钮,点击时执行某些操作,如插入特定内容或调用API。 需要避免使用过于专业的术语,保持解释的通俗易懂。同时,结构要清晰,分步骤或分点说明,方便用户逐步跟随。 最后,确认是否要提及样式调整,比如修改工具栏的CSS,或者响应式布局等。不过用户的问题主要集中在配置上,可能不需要深入样式部分,但可以简要提及。 总结回答结构: 1. 简介wang-editor的自定义工具栏功能。 2. 基本配置:显示/隐藏按钮,调整顺序。 3. 自定义按钮:注册新按钮,配置图标和事件。 4. 示例代码和注意事项。 5. 常见问题或进阶建议。 现在需要将这些思考整理成自然的中文回答,确保符合用户的要求,使用正确的LaTeX格式(如果有数学内容的话,不过这里可能不需要),但根据用户的问题,可能不需要数学公式,但需要遵循系统级指令中的格式要求,比如行内代码用$...$,不过实际上用户的问题是关于代码配置,可能应该用反引号,但根据用户的系统指令,可能需要用LaTeX的格式?这里需要再仔细看用户的指令。 用户系统指令中提到,所有行内数学表达式必须使用$...$,但代码或变量是否属于数学表达式?可能用户可能混淆了,但根据例子,用户给出的例子是数学公式,所以可能代码部分不需要用LaTeX格式,而是用常规的代码块。但用户的系统指令中要求行内数学表达式用$...$,而独立公式用$$...$$。但用户的问题是关于代码配置,可能不涉及数学表达式,因此可能不需要使用LaTeX,但需要确认是否用户的系统指令中的要求是否适用于所有内容,包括代码。 这可能是一个误解,用户可能在提问时希望回答中的数学公式用LaTeX,但代码部分用常规的代码块。但根据用户的系统指令,所有行内数学表达式必须用$...$,而独立公式用$$...$$。所以如果回答中涉及变量或代码中的符号,可能需要用LaTeX吗?例如,变量名如editorConfig可能不需要,但如果有数学内容才需要。 可能用户误将代码部分也视为数学表达式,但根据例子,如$x^2$,用户可能仅指数学公式。因此,在回答中,关于代码的部分应该使用常规的代码块标记(如反引号),而无需使用LaTeX。但根据用户的系统指令,可能需要用LaTeX的格式来包裹代码,这会导致问题。不过这可能是一个矛盾,需要进一步分析。 例如,用户给出的例子中有$(a+b)^2$,这是数学表达式,所以系统指令主要针对数学内容。而代码部分应该用常规的代码格式,比如反引号。但用户的系统指令第一条提到“所有行内数学表达式(包括变量、不等式、方程等)必须使用$...$格式”,而代码中的变量是否属于这里的“变量”?可能这里的变量是指数学中的变量,而不是编程中的变量名。因此,代码部分应该保持常规的代码格式,使用反引号,而数学变量用$...$。 因此,在回答中,当提到代码中的配置项如toolbarKeys时,应该用反引号包裹,而不是LaTeX。而如果有数学表达式,才用$...$。因此,我需要确保回答中的代码部分正确使用代码块,而数学内容用LaTeX。 现在回到回答的结构,确保每个部分清晰,并包含必要的代码示例,同时符合用户的系统指令。 可能的步骤: 1. 简要介绍wang-editor的自定义工具栏配置的重要性。 2. 基本配置:通过传入toolbarKeys数组来定义显示的按钮和顺序。 3. 示例代码展示如何配置。 4. 自定义按钮:使用注册模块,创建新按钮,定义事件处理。 5. 示例代码展示自定义按钮。 6. 注意事项:版本差异,导入模块的方式,样式覆盖等。 7. 总结和进一步建议。 现在将这些内容用中文组织起来,确保结构清晰,步骤明确,同时提供代码示例。注意用户可能使用的是JavaScript或TypeScript,以及不同的框架,因此示例应尽量通用或注明框架差异。 最后,检查是否有遗漏的重要点,比如如何处理国际化、如何分组工具栏按钮等,但可能这些属于进阶内容,用户可能只需要基础配置和自定义按钮的方法。因此,保持回答简洁,覆盖主要需求。</think>以下是关于wang-editor自定义工具栏配置的详细介绍: --- ### 一、基本工具栏配置 通过`toolbarKeys`数组可控制工具栏显示的按钮及顺序。例如,仅保留常用按钮: ```javascript const editor = createEditor({ toolbarKeys: [ 'bold', 'italic', 'underline', 'color', 'insertLink', '|', 'undo', 'redo' ] }) ``` - **语法说明**: - **字符串**:对应内置按钮的key(如`'bold'`) - **`|`**:竖线分组符,用于视觉分隔 - **`' '`**:空字符串表示占位符(增加间距) --- ### 二、自定义按钮步骤 #### 1. 注册新按钮 使用`registerModule`扩展工具栏: ```javascript import { Boot } from '@wangeditor/editor' Boot.registerModule({ menus: ['myButton'], // 注册菜单key editorPlugin: (editor) => { // 定义按钮行为 editor.menuExtend({ key: 'myButton', factory() { return { title: '自定义按钮', icon: '<svg>...</svg>', // SVG图标 execute() { editor.insertText('Hello World!') // 点击时插入文本 } } } }) } }) ``` #### 2. 添加至工具栏 将注册的`myButton`加入`toolbarKeys`: ```javascript const editor = createEditor({ toolbarKeys: [ 'bold', 'myButton', '|', 'undo' // 显示自定义按钮 ] }) ``` --- ### 三、注意事项 1. **版本兼容性**: - v5+使用`toolbarKeys`,v4及以下可能使用`toolbarConfig.excludeKeys` 2. **图标处理**: - 内置图标可直接用key(如`'headerSelect'`) - 自定义图标需提供SVG字符串或通过CSS名覆盖 3. **框架适配**: - Vue/React需通过对应插件初始化(如`@wangeditor/editor-for-vue`) 4. **样式覆盖**: ```css .w-e-bar-divider { margin: 0 10px; } /* 调整分组符间距 */ ``` --- ### 四、完整配置示例 ```javascript // 注册自定义按钮 Boot.registerModule({ /* 上述注册代码 */ }) // 创建编辑器 const editor = createEditor({ toolbarKeys: [ 'headerSelect', 'bold', 'myButton', '|', { key: 'group-justify', menuKeys: ['justifyLeft', 'justifyCenter'] } ], hoverbarKeys: { /* 悬浮工具栏配置 */ } }) ``` --- 通过以上步骤,可灵活控制工具栏布局与功能扩展。建议查阅[官方文档](https://www.wangeditor.com/)获取最新API细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值