美文网首页React
05、React系列之--永不过时的Hello world

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

作者: TigerChain | 来源:发表于2017-01-21 14:04 被阅读351次

    目录:

    1、快速创建工具

    我们可以通过好多种方式来创造react项目,比如官方说的Create React App(要求是Node4或以上版本),可以通过npm工具来安装

    npm install -g create-react-app
    

    然后创建一个项目

    create-react-app my-app
    cd my-app
    

    最后可以通过

    npm start || npm test || mpm run build
    

    等命令来启动服务等,具体请看官方文档

    note: 创建React项目不止这一个工具,有非常多的,比如jspm等这里不一一说明了。

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

    先来看效果

    hello-result.png

    在这里我们不使用任何的快速开发的框架或工具,我们按照官方一步步来做一个Hello World的React Demo

    1、步骤

    • 1、下载Download Starter Kit 15.3.2 包。地址http://reactjs.cn/react/downloads.html
    • 2、把其中的build文件夹copy到自己要写的Hello world项目中
    • 3、手动添加所需要的js

    2、开始Hello World

    代码如下:

    <!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>
    
    hello-world.png

    注意图中的黄色框,就是我们在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,如何打包,如何自动刷新浏览器等等

    相关文章

      网友评论

        本文标题:05、React系列之--永不过时的Hello world

        本文链接:https://www.haomeiwen.com/subject/rrzgbttx.html