react.js 從零開始（一）

時間 2019-12-02

原文原文鏈接

React 是什麼？

網絡上的解釋不少。。。我這裏把他定義爲經過javascript 的形式組件化 html的框架。。。javascript

React 僅僅是 VIEW 層。css

React 提供了模板語法以及一些函數鉤子用於基本的 HTML 渲染。這就是 React 所有的輸出——HTML。你把 HTML / JavaScript 合到一塊兒，被稱爲「組件」，容許把它們本身內部的狀態存到內存中（好比在一個選項卡中哪一個被選中），不過最後你只是吐出 HTML。html

React 的安裝？

首先是下載 reactjs的文件包。。http://www.reactjs.cn/react/downloads.html 下載react 使用須要的文件包。。java

下載完成後咱們打開壓縮包裏面的bulid文件夾react

JSXTransformer.js這個文件主要用來解析 react 自定義的jsx 語法解析器。網絡

react.js和react.min.js 這2個文件就是react 的核心文件。其中一個是壓縮過的。框架

react-with-addons.js 和 react-with-addons.min.js 這2個文件裏存放了一些react 的插件。函數

第一個React 的示例

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>holle,world</title>
    <link rel="stylesheet" href="../shared/css/base.css" />
  </head>
  <body>
    <div id="container">
      
    </div>
    <script src="../../build/react.js"></script>
    <script src="../../build/JSXTransformer.js"></script>
    <script type="text/jsx">
      var HolleWorld = React.createClass({
        render: function() {
          return <p>holle  world</p>;
        }
      });
        React.render(
          <HolleWorld  />,
          container
        );
    
    </script>
    
  </body>
</html>