虽然之前在暑假的时候已经接触了react，但是很久没有写已经有些陌生了，要写东西还是要从最开始熟悉。
一切从 hello world 开始
首先实现在页面上显示hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
实现的效果
hello world
注意点：
-
这一段html代码使用的库有
1.react.js —— React 的核心库
2.react-dom.js —— 提供与 DOM 相关的功能
3.Browser.js—— 将 JSX 语法转为 JavaScript 语法 -
最后一个
<script>标签的type属性为text/babel
这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容
凡是使用JSX的地方，都要加上type="text/babel"
将html文件与javascript文件分离,实现同样的效果
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="context "></div>
<script type="text/babel" src="app.js"></script>
</body>
</html>
js文件:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('context')
);
ReactDOM.render()
- ReactDOM.render 是 React 的最基本方法
用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 - 上面代码将一个 h1标题，插入
example节点,实现同样的效果。
使用组件(component)的 hello world
比如这样:
const App = React.createClass({
render:function () {
return <h1>Hello, world!</h1>
}
});
ReactDOM.render(
<App/>,
document.getElementById('context')
);
- 上面的代码就是React 将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
-
React.createClass方法就用于生成一个组件类 - 上面代码中，变量
App就是一个组件类。
模板插入<App />时，会自动生成App的一个实例 - 所有组件类都必须有自己的
render 方法，用于输出组件。 - 组件类的第一个字母必须大写，否则会报错，比如
App不能写成app。 - 组件类只能包含一个顶层标签，否则也会报错。
网友评论