ReactJs实战-让人沮丧的HelloWorld

来源：互联网发布：知乎唯一视觉怎么样编辑：程序博客网时间：2024/05/01 20:12

学习任何一门语言我们写出的第一个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>

<title>Hello React!</title>

</head>

<body>

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 0