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

第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{
    render(){
        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。代码如下：
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(

C页面

);
}
}

写完三个页面组件以后，我们把这三个页面都引入到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(

        <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>

####制作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='/'>Jspanga</NavLink> |&nbsp;
        <NavLink to='/Jspangb'>Jspangb</NavLink> |&nbsp;
        <NavLink to='/Jspangc'>Jspangc</NavLink>
    </div>
</div>
)

export default NavBar;

const NavBar = () =>(
<div>
    <div>
        <NavLink exact to='/'>Jspanga</NavLink> |&nbsp;
        <NavLink to='/Jspangb'>Jspangb</NavLink> |&nbsp;
        <NavLink to='/Jspangc'>Jspangc</NavLink>
    </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(

<Router>
    <div>
     <Nav/>
        <Route exact path="/" component={Jspang} />
        <Route  path="/Jspangb" component={Jspangb} />
        <Route  path="/Jspangc" component={Jspangc} />
    </div>
</Router>,
document.getElementById("app")

);

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