您的位置：首页 > Web前端 > React

React入门之路

2018-02-26 18:34 162 查看

React入门之路

jsx

注释

1、在标签内部的注释需要花括号

2、在标签外的的注释不能使用花括号

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功能。

create-react-app的安装

安装需要在命令行中进行,在安装create-react-app前，你需要安装node。然后在命令行中输入下面的命令：

windows系统下：

npm install -g create-react-app

Liunx和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来生成。

未完待续》》》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航