最近开始重新学习React，以此记录自己的历程
React是啥？这些话就不扯了，直接进入正题
引入js
首先要说明的是我学习的是第15个版本的，目前官方最新版本是16.8
之所以学习15个版本是因为更多的学习api的使用，16版本增加的很多功能从学习上来说用处不是很大
https://github.com/facebook/react 可以了解一下更新内容，此处我使用15版本的进行学习
我使用的js下载
https://github.com/facebook/react/releases?after=16.0.0-beta.5
下载react.js react-dom.js即可
OK！ 现在我们打开编译器（我使用的是vscode），新建HTML 并引入JS
React与Vue类似，同样是渲染div，因此后面的路由学习相当重要
第一个HelloWorld
我先直接打出代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div">
</div>
</body>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script>
var HelloComponent = React.createClass({
render:function(){
return React.createElement('h1',null,'Hello world')
}
})
ReactDOM.render(React.createElement(HelloComponent,null),document.getElementById('div'))
</script>
</html>
直接打开本地的HTML 即可看到效果
我们先不管格式这些等等，看过官网的肯定见过这串代码
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('div')
);
我们来试一下
<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('div')
);
</script>
打开页面会发现是没有内容并报错的，这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容
JSX
JSX即Javascript XML，它使用XML标记来创建虚拟DOM和声明组件
使用注意
script：type类型必须为text/babel
语法支持，使用Babel来进行转换，但是为了方便我们这里直接引入Babel的核心文件 browser.min.js
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
实际当中不建议如此使用，转换相当慢 只是为了学习方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div">
</div>
</body>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('div')
);
</script>
</html>
此时效果就可以出来了
两种写法相同但是一般使用第二种JSX写法，但是习惯还是建议使用第一种习惯，组件化开发
<script type="text/babel">
var HelloComponent = React.createClass({
render:function(){
return <h1>Hello World!</h1>
}
})
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
</script>
JSX是支持表达式的，你只要使用{}括号，就可以使用表达式了
var HelloComponent = React.createClass({
render:function(){
return <h1>Hello {this.props.name?this.props.name:'World!'}</h1>
}
})
ReactDOM.render(<HelloComponent name="React"/>,document.getElementById('div'))
那这串代码也很容易理解，在模板使用变量 vue称之为插值，这里叫表达式，可以使用三元二元（|| &&）但是不支持if else
网友评论