react之“hello world”

前端之家收集整理的这篇文章主要介绍了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属性需要写成classNamefor属性需要写成htmlFor,这是因为classfor是 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。 原文链接:https://www.f2er.com/react/304729.html

猜你在找的React相关文章