React入门之路
jsx
注释
ReactDOM.render(
/*注释 */
<h1>孙朝阳 {/*注释*/ }</h1>,
document .getElementById('example' )
);
多标签
代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它
React 组件
写一个Hello World 组件
var HelloMessage = React.createClass({
render: function () {return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example' )
);<!DOCTYPE html>
<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 (
<p onClick={this .handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example' )
);第01节：构建：create-react-app 快速脚手架
我们可以直接访问它的官网：https://github.com/facebookincubator/create-react-app
creat-react-app优点
无需配置：官方的配置堪称完美，几乎不用你再配置任何东西，就可以上手k开发项目。
高集成性：集成了对React，JSX，ES6和Flow的支持。
自带服务：集成了开发服务器，你可以实现开发预览一体化。
热更新：保存自动更新，让你的开发更简单。
全兼容性：自动处理CSS的兼容问题，无需添加-webkit前缀。
自动发布：集成好了发布成品功能，编译后直接发布，并且包含了sourcemaps功能。
windows系统下：
npm install -g create-react -app
Liunx和Mac电脑下：
sudo npm install -g create-react -app 这里的 -g 是全局安装的意思。
创建React项目
create-react-app my-app
启动服务
直接在命令行中输入：
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 install -g yo
npm install -g generator-react -webpack 创建目录
mkdir new-react-demo
用生成器生成我们的项目目录
yo react-webpack
我们在视频中还讲解了目录结构，让你更好的掌握generator-react-webpack.
总结：generator-react-webpack更容易配置webpack，让你适应你的实际项目，并且有很强的扩展功能。一般我们团队都会使用这个脚手架来生产react的目录结构，但也有缺点，就是要依靠yeoman来生成。
第05节：路由：Hello React路由
Router包安装:
安装包还是要打开命令行工具，使用npm来进行安装。
npm install -- save react-router react-router -dom react-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 {return (
<div>A默认页面</div>
);
}
}
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import Jspang from './jspang' ;
ReactDOM.render(
<Jspang/>,
document.getElementById("app" )
);引入完成后，预览可以看到我们写的A页面的组件。通过上边基本的练习，我们有了一定经验，那么接下来我们仿照上面的方法制作两个新组件,Jspangb和JSPangc。代码如下：
import React from 'react' ;
export default class jspangb extends React .Component {return (
<div >B页面</div >
);
}
}jspangc.js
import React from 'react' ;
export default class jspangc extends React .Component {return (
<div >C页面</div >
);
}
}
````
<div class ="se -preview -section -delimiter "></div >
import React from ‘react’;
C页面
写完三个页面组件以后，我们把这三个页面都引入到index.js文件里边。
<div class ="se-preview-section-delimiter" ></div >
import Jspang from ‘./jspang’;
引入和书写路由
三个页面都已经作好，现在就需要路由来切换他们了，先用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(
<Route exact path="/" component={Jspang} />
<Route path="/Jspangb" component={Jspangb} />
<Route path="/Jspangc" component={Jspangc} />
</div>
</Router>,
document.getElementById("app")
);
<div class ="se-preview-section-delimiter" ></div >
ReactDOM.render(
<Route exact path="/" component={Jspang} />
<Route path="/Jspangb" component={Jspangb} />
<Route path="/Jspangc" component={Jspangc} />
</div>
</Router>,
document.getElementById("app")
);
注意：这里的exact是精确匹配的意思，比如我们有多层路由进行嵌套时，exact可以帮助我们精确匹配到你想跳转的路由。
我们路由已经设置完毕了，但是我们现在还不能进行切换，那我们就做个切换的组件，命名为<nav/>
<div class ="se-preview-section-delimiter" ></div >
在app文件夹下新建一个nav.js的文件，先引入React和react-router-dom两个包。
<div class ="se-preview-section-delimiter" ></div >
import React from ‘React’;
编写基本的nav组件，具体解说看视频里会进行讲解。
const NavBar = () =>(
<div >
<div >
<NavLink exact to ='/' > Jspanga</NavLink > |
<NavLink to ='/Jspangb' > Jspangb</NavLink > |
<NavLink to ='/Jspangc' > Jspangc</NavLink >
</div >
</div >
)
export default NavBar;
const NavBar = () =>(
<div >
<div >
<NavLink exact to ='/' > Jspanga</NavLink > |
<NavLink to ='/Jspangb' > Jspangb</NavLink > |
<NavLink to ='/Jspangc' > Jspangc</NavLink >
</div >
</div >
)
export default NavBar;
组件编写完成后，引入index.js，并添加<Nav /> 标签到代码里。
<div class ="se-preview-section-delimiter" > </div >
import React from ‘react’;
ReactDOM.render(
<Router>
<div>
<Nav/>
<Route exact path="/" component={Jspang} />
<Route path="/Jspangb" component={Jspangb} />
<Route path="/Jspangc" component={Jspangc} />
</div>
</Router>,
document.getElementById("app")
);
import React from ‘react’;
ReactDOM.render(
<Router>
<div>
<Nav/>
<Route exact path="/" component={Jspang} />
<Route path="/Jspangb" component={Jspangb} />
<Route path="/Jspangc" component={Jspangc} />
</div>
</Router>,
document.getElementById("app")
);
原文链接jspang.com未完待续》》》
jspang.com
转播
