react 之 Hello Horld!_React

上一篇: React手稿之 React-Redux 下一篇:react native学习笔记（二）

react 之 Hello Horld!

发布时间：2019-06-24 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了react 之 Hello Horld!，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。


  Hello world!


其实这是我第一次写文章，好紧张 - -


下载react.js
点这个就是地址了

或者用npm install react

注意找出react.min.js 和JSXTransformer.js

然后各位少侠请先新建一个HTML文件，什么名字无所谓吧



      
      @H_512_21@
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="

  
    react start
  
  
    
    
    
    
  

" tITle="" data-original-title="复制">
      
      
<!DOCTYPE htML>
<html>
  <head>
    <title>react start</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="react.min.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );   
    </script>
  </body>
</html>



很顺利页面就输出了 Hello, world!  我懒得截图了 - -

然后我们开始分析了


      
      
      
      
      
<script type="text/jsx">


为虾米 type = text/jsx

这时候我们把


      
      
      
      
      
<script src="JSXTransformer.js"></script>


注释掉

发现页面里面什么都没有了 - - 这就对了

会想下script标签加上text里面内容就变成了文本了 不执行了~

那刚才怎么输出呢，肯定和JSXTransformer.js有关咯

哼，我可是过了四级呢！！ 一看我就明白了这个是个JSX转换器咯.把jsx类型的文本转换成正常的js

输出 plain javascript对吧  嘿嘿～

这时候把script 的 type去掉  js执行看看

!!报错了   什么鬼


确实js这么写 语法都不通过了

JSX是faceBook自己定的协议 通过JSXTransformer.js转换就正常执行了.
好了着时候开始吐槽了!

我明明是来学react 写一个hello world的  为什么多出来一个JSXTransformer啊？

一点心理准备都没有啊！ 你叫我学我就学？ 这不在我计划之内啊 ，我想一步步来弄啊～。

能不能只用react.jS写一个hello world啊!

能


      
      
      VAR Hello = React.createClass({
            render: function(){
                return (
                    React.createElement('div',{},'Hello world!')
                )
            }
        })
        React.render(
            React.createElement(Hello),
            document.getElementById('example')
        );

    
  

" title="" data-original-title="复制">
      
      
<!DOCTYPE html>
<html>
  <head>
    <title>react start</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="react.min.js"></script>
<!--    <script src="JSXTransformer.js"></script>-->
    <script>

        var Hello = React.createClass({
            render: function(){
                return (
                    React.createElement('div',{},'Hello world!')
                )
            }
        })
        React.render(
            React.createElement(Hello),
            document.getElementById('example')
        );

    </script>
  </body>
</html>


还是用JSX吧  虽然一开始让我用 我是拒绝的，但写了两天发现也习惯了，况且人家是大公司对吧他们这么用一定有他们的道理，以后项目做大，自然会领悟其中的道理。