ReactJs实战-让人沮丧的HelloWorld

悠悠 2022-09-22 01:14 130阅读 0赞

学习任何一门语言我们写出的第一个Demo，应该是Hello world了。相信第一个具有自主思想的智能机器人开口第一句话应该就是：Hello world, Human, Fuck you!

为什么取名为让人沮丧的Hello World？这也是我在学习、使用ReactJs过程中的感受。Hello World程序让我们了解一门新语言的基本结构、框架和运行方式。C、Java、C\#等语言的HelloWorld程序都简单、容易上手。如果编写Control程序，只需写main()，调用一个print()，就能看到黑白屏上的Hello World;如果来个复杂点的Dialog程序，也有成熟的IDE，让你很容易的出现Hello World;然而ReactJs则不然，想写一个Hello World则需要花很多倍的时间。我想这也是ReactJs学习曲线较高的重要原因。

首先ReactJs目前没有配套的IDE，当然你可以使用记事本、Ultr、Sublime或者WebStorm等。其次ReactJs官网的Demo让你头晕，因为不是写一个HelloWorld了事，ReactJs是单页面的应用程序，当出现多个ReactJs文件时，需要编译成一个js文件，你需要使用Webpack等，另外Demo一般还不是那么简单的使用Webpack，可能使用grunt调用，再加上npm生成依赖包，每个辅助小工具又加上各自的配置文件。

好了，要想写一个ReactJs的HelloWorld,你得先了解npm,Webpack,grunt等。另外如果以前是编写C、C++、C\#和Java的程序员，还要适应一个配置文件类型不一样。C、C++一般采用.ini作为配置文件,C\#、Java一般采用xml，到ReactJs时，基本上都是json格式。虽然这在我看来是种进步，但改变了风格，感觉也就不太对。

对于写一个符合ReactJs风格的HelloWorld，我觉得可以考虑分解为几个demo来完成。

一是采用传统的Web网页的HelloWorld写法。

代码如下（只一个文件index1.html）：

<!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://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/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>

二是采用传统Web网页中html与js文件分离（两个文件index2.html,与src/helloworld.js）。

三是采用ReactJs风格，将html与React组件分离，编译React组件成另一js文件（两个文件index3.html与dist/bundle.js，bundle.js是编译helloworld后的Js文件）。这种方式才是符合ReactJs的风格。

通过npm加载依赖包，而不是将依赖js包直接拷贝到lib里，这样最方便的就是依赖包升级方便，只需管理依赖包配置文件即可控制依赖包的版本。如下：

$ npm install --save react react-dom

编译helloworld组件成一个js文件。编译完的js文件并不影响我们调试。如下：

$ webpack helloworld.js bundle.js

在学ReactJs的Helloworld过程中,我们会感到沮丧，因为跟传统的编程方式变化较大。学习语言其实就是学习一种规则，定的规则太多，自然要花更多的时间。如果完成了第三个demo，ReactJs的整体编写框架也就基本了解了。

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactJS入门

目录一：前端开发的演变二：ReactJS简介三：搭建环境四：React快速入门 -------------------- 一：前端开发的演变到目前

淡淡的烟草味﹌/ 2024年03月30日 12:28/ 0 赞/ 41 阅读

相关 reactJs 基础

react不是一个完整的mvc,mvvm框架。 react跟web components 不冲突背景原理：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每

不念不忘少年蓝@/ 2023年08月17日 16:20/ 0 赞/ 95 阅读

相关让人头疼的稀疏数组

稀疏数组基本介绍稀疏数组的处理方法: 案例基本介绍当一个数组中大部分元素为0,或者为同一个值的数组时,可以使用稀疏数组来保

╰半橙微兮°/ 2022年12月03日 08:45/ 0 赞/ 100 阅读

相关 React实战-对比ReactJs与ReactNative中的Flex用法

React实战\-对比ReactJs与ReactNative中的Flex用法无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解

青旅半醒/ 2022年09月26日 03:57/ 0 赞/ 184 阅读

相关 ReactJs实战-让人沮丧的HelloWorld

学习任何一门语言我们写出的第一个Demo，应该是Hello world了。相信第一个具有自主思想的智能机器人开口第一句话应该就是：Hello world, Human, Fuc

悠悠/ 2022年09月22日 01:14/ 0 赞/ 131 阅读

相关 ReactJs实战感悟

写这篇博文之前，不免先自我介绍一下，作为一个在编码一线搬砖多年，涉猎过C、C++、Java、C\、Javascript等多种语言，从前台到后台，从工程到理论，从Coder到Ma

系统管理员/ 2022年09月21日 13:26/ 0 赞/ 149 阅读

相关 React实战-ReactJS+Redux的思考

React实战\-ReactJS+Redux的思考 ReactJs的官方架构是：ReactJs+Flux。然而作为Flux的升级版，ReactJs+Redux越来越流行，已经

妖狐艹你老母/ 2022年07月18日 05:27/ 0 赞/ 138 阅读

相关 React实战-如何在ReactJs中调用Google、Baidu地图

React实战\-如何在ReactJs中调用Google、Baidu地图在这个互联网时代，对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放

喜欢ヅ旅行/ 2022年07月16日 03:43/ 0 赞/ 403 阅读

相关 reactJs入门

本文中的react是老版本的，对于新版本只需要改两个地方： <!DOCTYPE html> <html> <head> <me

淩亂°似流年/ 2022年07月16日 03:14/ 0 赞/ 219 阅读

相关让人激动的设计。

晚上在两岸咖啡完成了1.1版本的首页设计，包括新功能图标，路线，和整合的登录注册。虽然在接近一个月前我就在脑海里准备了Beta版首页，从那时开始我就已经为今天的扩展做了构思

客官°小女子只卖身不卖艺/ 2022年04月01日 12:52/ 0 赞/ 181 阅读