react 之 Hello Horld!

时间 2019-11-09

标签 react hello horld 栏目 React 繁體版

原文原文链接

Hello world!javascript

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

下载react.js
点这个就是地址了
或者用npm install react
注意找出react.min.js 和JSXTransformer.jsjava

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

<!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! 我懒得截图了 - -git

而后咱们开始分析了github

<script type="text/jsx">

为虾米 type = text/jsx
这时候咱们把npm

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

注释掉
发现页面里面什么都没有了 - - 这就对了
会想下script标签加上text里面内容就变成了文本了不执行了~
那刚才怎么输出呢，确定和JSXTransformer.js有关咯
哼，我但是过了四级呢！！一看我就明白了这个是个JSX转换器咯.把jsx类型的文本转换成正常的js
输出 plain javascript对吧嘿嘿～spa

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

!!报错了什么鬼orm

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

JSX是facebook本身定的协议经过JSXTransformer.js转换就正常执行了.
好了着时候开始吐槽了!
我明明是来学react 写一个hello world的为何多出来一个JSXTransformer啊？
一点心理准备都没有啊！你叫我学我就学？这不在我计划以内啊，我想一步步来弄啊～。
能不能只用react.js写一个hello world啊!

能

<!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吧虽然一开始让我用我是拒绝的，但写了两天发现也习惯了，何况人家是大公司对吧他们这么用必定有他们的道理，之后项目作大，天然会领悟其中的道理。

1. 【01】react 之 hello world
2. react native 之hello world
3. React-Native之Hello World
4. react-native-----hello word！
5. react Hello World！-----jsx
6. react "hello world!"
7. React 系列一：Hello React
8. react学习系列之Hello Mr World
9. react文档 Hello World
10. React学习Hello World！
更多相关文章...
• Docker Hello World - Docker教程
• Thymeleaf扩展2(Say Hello) - Thymeleaf 教程
• 互联网组织的未来：剖析GitHub员工的任性之源
• JDK13 GA发布：5大特性解读