React入门之路
React入门之路
jsx
- 注释
1、在标签内部的注释需要花括号
2、在标签外的的注释不能使用花括号
ReactDOM.render(
/*注释 */
孙朝阳 {/*注释*/}
,
document.getElementById('example')
);- 多标签
代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它
React 组件
写一个Hello World 组件var HelloMessage = React.createClass({
render: function() {
return Hello World！
;
}
});
ReactDOM.render(
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js">script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js">script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js">script>
head>
<body>
<div id="example">div>
<script type="text/babel">
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
a>
);
}
});
ReactDOM.render(
<WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
document.getElementById('example')
);
script>
body>
html> var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
this.handleClick}>
你{text}我。点我切换状态。
);
}
});
ReactDOM.render(
第01节：构建：create-react-app 快速脚手架
我们可以直接访问它的官网：https://github.com/facebookincubator/create-react-appcreat-react-app优点
- 无需配置：官方的配置堪称完美，几乎不用你再配置任何东西，就可以上手k开发项目。
- 高集成性：集成了对React，JSX，ES6和Flow的支持。
- 自带服务：集成了开发服务器，你可以实现开发预览一体化。
- 热更新：保存自动更新，让你的开发更简单。
- 全兼容性：自动处理CSS的兼容问题，无需添加-webkit前缀。
- 自动发布：集成好了发布成品功能，编译后直接发布，并且包含了sourcemaps功能。
create-react-app的安装
安装需要在命令行中进行,在安装create-react-app前，你需要安装node。然后在命令行中输入下面的命令：
windows系统下：
npm install -g create-react-appLiunx和Mac电脑下：
sudo npm install -g create-react-app 这里的 -g 是全局安装的意思。
创建React项目
我们安装好create-react-app之后，就可以创建我们的React目录了，命令如下：
create-react-app my-app
1
create-react-app my-app
这里是有个小坑的，就是你的目录名不要使用大写，这样作只要是为了严谨性，因为在Linux下是严格区分大小写的。
启动服务
直接在命令行中输入：
npm start
第02节：构建：generator-react-webpack
react的生态圈非常庞大，第三方的构建工具也有很多种，这节课介绍一个在业内比较流行的构建工具generator-react-webpack，它是需要yeoman的支持的。
优点介绍：
- 基于webpack构建，可以很容易的配置自己需要的webpack。
- 支持ES6，集成了Babel-Loader。
- 支持不同风格的CSS（sass，less，stylus）。
- 支持PostCSS转换样式。
- 集成了esLint功能。
- 可以轻松配置单元测试，比如Karma和Mocha安装
安装还是在命令行用npm进行安装，不过在全局安装generator-react-webpack之前，你可以先安装yeoman。命令如下：
npm install -g yo
npm install -g generator-react-webpack创建目录
我们先用命令自行创建一个文件：new-react-demo
mkdir new-react-demo
用生成器生成我们的项目目录
yo react-webpack
用npm start就可以查看效果了。
我们在视频中还讲解了目录结构，让你更好的掌握generator-react-webpack.
总结：generator-react-webpack更容易配置webpack，让你适应你的实际项目，并且有很强的扩展功能。一般我们团队都会使用这个脚手架来生产react的目录结构，但也有缺点，就是要依靠yeoman来生成。
第05节：路由：Hello React路由
Router包安装:
安装包还是要打开命令行工具，使用npm来进行安装。
npm install --save react-router react-router-domreact-router：是基本的router包，里边函的内容较多，但是在网页开发中有很多用不到，现在的市面上的课程讲的基本都是这个包的教程。
react-router-dom：随着react生态环境的壮大，后出现的包，这个包比react-router包轻巧了很多。
注意：其实安装了react-router包就不用安装了react-router-dom包了，这里我们只是为了讲课方便所以安装了两个包。在实际开发中，请根据需要进行安装。安装时使用 - -save，因为这是要在生产环境中使用的。
复习component
以前学习过React的组件如何编写，这里简单复习一下。我们作一个A页面的组件（还是接着上节课的程序继续作），我们在/app文件夹下新建一个jspang.js页面。然后引进React包，并编写一个A页面的组件。请看下面的代码。
jspang.js
import React from 'react';
export default class jspang extends React.Component{
render(){
return(
A默认页面
);
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import Jspang from './jspang';
ReactDOM.render(
引入完成后，预览可以看到我们写的A页面的组件。通过上边基本的练习，我们有了一定经验，那么接下来我们仿照上面的方法制作两个新组件,Jspangb和JSPangc。代码如下：
jspangb.js
import React from 'react';
export default class jspangb extends React.Component{
render(){
return(
<div>B页面div>
);
}
}jspangc.js
import React from 'react';
export default class jspangc extends React.Component{
render(){
return(
<div>C页面div>
);
}
}
````
<div class="se-preview-section-delimiter">div>
import React from ‘react’;
export default class jspangc extends React.Component{
render(){
return(
);
}
}
写完三个页面组件以后，我们把这三个页面都引入到index.js文件里边。
<div class="se-preview-section-delimiter">div>
import Jspang from ‘./jspang’;
import Jspangb from ‘./jspangb’;
import Jspangc from ‘./jspangc’;
引入和书写路由
三个页面都已经作好，现在就需要路由来切换他们了，先用import引入我们的路由包，这里我们用两个模块，一个是Router（我自己叫它路由器），另一个是Route（我自己叫它路由）。
<div class="se-preview-section-delimiter">div>
import {BrowserRouter as Router , Route} from ‘react-router-dom’;
然后我们改写文件，增加路由设置。
<div class="se-preview-section-delimiter">div>
ReactDOM.render(
);
<div class="se-preview-section-delimiter">div>
ReactDOM.render(
);
注意：这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。
我们路由已经设置完毕了，但是我们现在还不能进行切换，那我们就做个切换的组件，命名为
<div class="se-preview-section-delimiter">div>
####制作Nav组件
在app文件夹下新建一个nav.js的文件，先引入React和react-router-dom两个包。
<div class="se-preview-section-delimiter">div>
import React from ‘React’;
import {NavLink} from ‘react-router-dom’;
import React from ‘React’;
import {NavLink} from ‘react-router-dom’;
编写基本的nav组件，具体解说看视频里会进行讲解。
const NavBar = () =>(
<div>
<div>
<NavLink exact to='/'>JspangaNavLink> |
<NavLink to='/Jspangb'>JspangbNavLink> |
<NavLink to='/Jspangc'>JspangcNavLink>
div>
div>
)
export default NavBar;
const NavBar = () =>(
<div>
<div>
<NavLink exact to='/'>JspangaNavLink> |
<NavLink to='/Jspangb'>JspangbNavLink> |
<NavLink to='/Jspangc'>JspangcNavLink>
div>
div>
)
export default NavBar;
组件编写完成后，引入index.js，并添加<Nav/>标签到代码里。
<div class="se-preview-section-delimiter">div>
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {BrowserRouter as Router , Route} from ‘react-router-dom’;
import Jspang from ‘./jspang’;
import Jspangb from ‘./jspangb’;
import Jspangc from ‘./jspangc’;
import Nav from ‘./nav’;
ReactDOM.render(
,
document.getElementById("app")
);
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {BrowserRouter as Router , Route} from ‘react-router-dom’;
import Jspang from ‘./jspang’;
import Jspangb from ‘./jspangb’;
import Jspangc from ‘./jspangc’;
import Nav from ‘./nav’;
ReactDOM.render(
,
document.getElementById("app")
);
“`
现在可以进行预览了，也可以顺利的切换页面内容了，说明路由已经起作用了。当然这只是路由最简单的用法，下节课我们会继续学习路由的知识。
原文链接jspang.com未完待续》》》
jspang.com