05、React系列之--永不过时的Hello world

来源：互联网发布：java构造器有什么用编辑：程序博客网时间：2024/06/08 06:33

<!DOCTYPE html><html><head>  <meta charset="UTF-8" />  <title>Hello React!</title>  <script src="../build/react.js"></script>  <script src="../build/react-dom.js"></script>  <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script></head><body>  <div id="example"></div>  <script type="text/babel">    ReactDOM.render(    <h1>hello world</h1>,    document.getElementById('example')    );  </script></body></html>

注意图中的黄色框，就是我们在html中所添加的代码，我们双击index.html就可以看到最初上面的效果图了。

3、解析一下

1、导入需要的js

 <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

首先我们要写react，那么就要引入react.js,react-dom.js不多说这个，那么第三个bable是什么东东，它就是一个js的解释器，把es6的语法(新语法)转化成现在的浏览器中就可以用(而不用等浏览器去支持)

2、ReactDOM.render()方法

ReactDOM.render方法有两个参数，第一个是组件，第二个是组件要显示的位置，调用这个方法就可以把组件渲染到指定的dom节点上了

怎么样，简单吧，就是这么简单，那么下来我们玩点稍微高级一点的

3、单个组件

我们知道React是组件的世界，我们写的Hello World 还没有任没看组件的出现，那么我们把Hello world写成一个组件

在上面的Hello world代码中，我们只修改body中的script,代码如下：

<script type="text/babel">    //使用ES5的写法   /**    var HelloWord = React.createClass({      render:function(){        return(          <div>            <h1>hello world ES5</h1>          </div>        ) ;      }    });    */    //使用ES6的写法    class HelloWord extends React.Component{      render(){        return(          <div>            <h1>hello world  ES6</h1>          </div>        );      }    }    ReactDOM.render(    <HelloWord />,    document.getElementById('example')    );

以上我们把HelloWord写成了一个插件，并且采用两种写法，这两种写法输出是一毛一样的，只不过一个是使用了ES5的写法，一个使用了ES6的写法(建议，先使用ES5，了解了ES5再使用ES6(目前来说好多项目或教程还是采用ES5的居多))

解释一下

1、我们以ES5为例来说，首先是创建一个React类，这样创建了一个组件

var HelloWord = React.createClass({    .....});

2、组件显示什么内容，以及如何显示，组件的render()方法上场了

render(){    return(        <div>            ...        </div>    ) ;}

Note:这里要注意一点就是return()方法只能且必须有一个根节点(比如上面的div)，在根结点中，你可以任意的嵌套。

本篇文单所对应的demo地址

https://github.com/githubchen001/react-lesson/tree/master/lesson01/03-helloworld

下一节，我们看看如何使用browserify管理React，如何打包，如何自动刷新浏览器等等

0 0

05、React系列之--永不过时的Hello world

目录：

1、快速创建工具

2、不使用工具，一步步来写Hello World

3、单个组件

本篇文单所对应的demo地址

下一节