ReactJS-笔记01

最新推荐文章于 2025-04-08 13:12:42 发布

greenboy1

最新推荐文章于 2025-04-08 13:12:42 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

分类专栏： reactjs 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/greenboy1/article/details/51884908

reactjs 专栏收录该内容

3 篇文章

订阅专栏

ReactJS 特点：
（1）MVC架构中的V层利于组件化小巧复用性高
（2）虚拟DOM
（3）单向数据流减少了重复代码
JSX是什么？
JavaScript的XML语法扩展
React是如何使用JSX的？

<p className = "hello">
    Hello {this.props.name}
</p>

React 会将上面的JSX编译成React构造器的方法：

React.createElement("p",{className:"hello"},"Hello",this.props.name)

Helllo World

(1)首先机器上要安装nodejs 不说安装过程了自己百度下
(2)安装bower (bower介绍）
node install -g bower
(3)创建目录 make dir ReactJS-Study
(4)下载ReactJS 组件 bower install react
(5)创建index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app'),
        function   () {
          console.log("render over");
        }
      );
    </script>
  </body>
</html>

以上代码在浏览器直接打开运行即可

使用JSX语法写

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      var MsgBox = React.createClass({
        render:function(){
          return (<h1>hello lkp</h1>)
        }
      });

      ReactDOM.render(
        <MsgBox/>,
        document.getElementById('app'),
        function   () {
          console.log("render over");
        }
      );
    </script>
  </body>
</html>