react之“hello world”

我相信大家踏入编程语言的第一步就是“哈喽，我的”。恩，学会这一句，世界就会是我们的了。为了降低学习成本，首先避开了“繁琐”的服务器环境搭建，直接依赖浏览器环境，在客户端先熟悉一下React语法和一些基础知识。

虽然不用配置服务器环境，但是要引入相关JS：react.js,react-dom.js,babel.min.js （不能太懒呀！）

我这边打算直接通过例子来总结知识点，下面是一个最简单的 "hello world" 实现程序。

<!DOCTYPE html>
<html lang="en">
<head>
	<Meta charset="UTF-8">
	<title>react-hello-world</title>
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
	ReactDOM.render(<h1>hello world</h1>,document.getElementById('app'));
</script>
</body>
</html>

总结：

1.除了引入react相关的js文件外，还额外引入了babel这个插件，主要是为了对我们的js代码进行编译，把es6语法转换为es5(当然上面这个例子中我们还没用到ES6语法，下面例子会展示)，我们需要将script中的type改成text/babel，这样babel.js才能正确转化。我们还发现了js和html混合使用的方法，这里的方法和我们以前不一样，没加任何引号，这种方法叫做jsx，是react发明的一种写法也需要用babel去转化成我们的js写法。

what!什么是jsx写法？http://www.cnblogs.com/zourong/p/6043914.html

ps: jsx语法中注释代码的话这样： { /* 注释代码 */}

es6就不用我多说了吧，前面也有相关学习笔记：http://www.jb51.cc/article/p-xxgyipvq-bch.html

（主要掌握：import,export,class,const,let,arrow function）

目前react的代码书写规范是:jsx+es6;

2.ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

在这里我们自己创建了一个html节点<h1>hello world</h1>这个节点，不过是个虚拟的dom节点，并没有真正在我们页面上出现，我们出现将其与页面中真正存在的dom节点相关联，就是"挂载"在真正的dom节点旗下。页面加载成功后，你可以打开F12看，这个<h1>节点“挂载”在我们的"app"节点下面。

下面再举一个hello world的例子，变个花样~

<!DOCTYPE html>
<html lang="en">
<head>
	<Meta charset="UTF-8">
	<title>react-hello-world</title>
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
	class HelloMessage extends React.Component { //notice use of React.Component
        constructor() {
			super();
        	}
          render() {
                return (
		  <div>
                	<h1>{this.props.says}</h1>
                  </div>
                );
            }
        };

        ReactDOM.render(<HelloMessage/>,document.getElementById('app'));
</script>
</body>
</html>

上面这个hello world例子就比第一个的“复杂”一些。
总结：

1.React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。这里用到了es6中的新语法class，我们创建了一个HelloMessage的类，继承React.Component类；定义了一个render方法，用来返回我们的html模块。

拓展：

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage says="Hello world"> ，就是 HelloMessage 组件加入一个 says属性，值为 Hello world.组件的属性可以在组件类的 this.props 对象上获取，比如 says 属性就可以通过 this.props.says读取，这样我们又多了一种实现hello world的方法。

注意：

A.添加组件属性，有一个地方需要注意，就是class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是 JavaScript 的保留字。

B.组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错

<!DOCTYPE html>
<html lang="en">
<head>
	<Meta charset="UTF-8">
	<title>react-hello-world</title>
	<script src="react.js"></script>
	<script src="react-dom.js"></script>
	<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
	class HelloMessage extends React.Component { //notice use of React.Component
        constructor() {
		 super();
        	}
          render() {
                return (
		  <div>
                	<h1>{this.props.says}</h1>
                  </div>
                );
            }
        };

        ReactDOM.render(<HelloMessage says="Hello world"/>,document.getElementById('app'));
</script>
</body>
</html>

由于class有一个本身也会有一个属性，我们还可以把这个hello world定义到它的属性里面:

constructor() {
		super();
		this.says="hello world";
        }

<h1>{this.says}</h1>

这样修改也能通过属性来实现hello world。

react之“hello world”

相关文章