React+ES6

最新推荐文章于 2022-02-28 15:56:10 发布

清风飏

最新推荐文章于 2022-02-28 15:56:10 发布

阅读量365

点赞数

React Native 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

转载:http://blog.csdn.net/sunyuan_software/article/details/51206161

下载完之后,应该是有这么多js文件的:
这里写图片描述

第一个React+ES6的页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
  </head>
  <body>
    <h1>Hello React</h1>
    <div id="container">
    </div>
<script src="../../build/react.js"></script>

<script src="../../build/react-dom.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

<script type="text/babel" src="app.js"></script>

 </body>
</html>

我们可以看到,里面应用了browser.min.js,这个是干什么的呢?很简单,这是使浏览器支持ES6写法,下面的script直接应用了text/babel,但这种方法是不推荐的,这只是为了演示方便,所以我们采用这种方法,后续我们会讲React服务端渲染的文章。

接着,我们需要有一个本地的服务器才能访问,这里推荐使用browser-sync，无需手动刷新浏览器,保存的时候,它直接会帮你刷新http://www.browsersync.cn/

在根目录下创建package.json文件(利用npm init 或者直接创建),把下面的内容复制进去,然后执行npm i 或者npm install 把包都下载进来,然后npm run build 即可创建一个本地服务器和监听你的文件变化以自动刷新浏览器。

    {
  "name": "reactdemos",
  "version": "1.0.0",
  "description": "reactdemos",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browser-sync start --server --files *.* "

  },
  "author": "sunyuan",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.12.3"
  }
}

所以,现在我们的目录结构是这样的:
这里写图片描述

最后,我们来创建一下app.js

class WorldMessage extends React.Component{
    render(){
        return (
            <div>
                Hello!{this.props.name}
            </div>
        )
    }
}
   var container = document.getElementById('container');
  ReactDOM.render(<WorldMessage name="world"/>, container);

弄完之后,保存,直接观察浏览器即可看到:

这里写图片描述

构造方法,必须调用super()

class WorldMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            name:"sunyuan"
        }
    }

    render(){
        return (
            <div>
                Hello!{this.state.name}
            </div>
        )
    }
}

   var container = document.getElementById('container');
  ReactDOM.render(<WorldMessage name="world"/>, container);

保存之后,就会变成Hello!sunyuan

组件的嵌套

class HelloMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            name:"hello"
        }
    }

render(){
        return (
            <div>
                {this.state.name}
            </div>  
        )
    }
}

class WorldMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            name:"sunyuan"
        }
    }

render(){
    return (
        <div>
            {this.state.name}
        </div>
    )
}
}

class Message extends React.Component{
    render(){
        return (
            <div>
                <HelloMessage />
                <WorldMessage />
            </div>
        )
    }
}

  var container = document.getElementById('container');
  ReactDOM.render(<Message />, container);

组件之间的嵌套很简单,在render方法里return的时候,外面是一个大容器包括里面的所有组件就行了,所以效果是这样的:
这里写图片描述

给大家推荐一些学习的资源

Facebook官方React网站: http://facebook.github.io/react
React中文社区: http://react-china.org/
React：引领未来的用户界面开发框架：
http://product.dangdang.com/23698383.html
React实战入门:
http://study.163.com/course/courseMain.htm?courseId=1565012

清风飏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React+ES6

转载:http://blog.csdn.net/sunyuan_software/article/details/51206161下载完之后,应该是有这么多js文件的: 第一个React+ES6的页面 Hello React Hello React 我们可以看到,里面应用
复制链接

扫一扫