<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > react框架菜鳥教程,前端小白必看

React簡介

React 是一個比較流行的前端開發框架。

React是一個用于構建用戶界面的 JAVASCRIPT 庫。

React主要用于構建UI,很多人認為 React 是 MVC 中的 V(視圖)。

React 起源于 Facebook 的內部項目,用來架設 Instagram 的網站,并于 2013 年 5 月開源。

React 擁有較高的性能,代碼邏輯非常簡單,越來越多的人已開始關注和使用它。

React 特點

聲明式設計 ? React采用聲明范式,可以輕松描述應用。

高效 ? React通過對DOM的模擬,最大限度地減少與DOM的交互。

靈活 ? React可以與已知的庫或框架很好地配合。

JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ,但我們建議使用它。

組件 ? 通過 React 構建組件,使得代碼更加容易得到復用,能夠很好的應用在大項目的開發中。

單向響應的數據流 ? React 實現了單向響應的數據流,從而減少了重復代碼,這也是它為什么比傳統數據綁定更簡單。

React 安裝

1 引包

react.min.js 、react-dom.min.js 和 babel.min.js:

* react.min.js - React 的核心庫

* react-dom.min.js - 提供與 DOM 相關的功能

* babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個全新的水平。


ReactDOM.render(

    <h1>Hello, world!</h1>,

    document.getElementById('example')

);


以上代碼將一個 h1 標題,插入 id=”example” 節點中。


2 通過 npm 使用 React

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ npm config set registry https://registry.npm.taobao.org

$ cnpm install [name]


3 使用 create-react-app 快速構建 React 開發環境

$ cnpm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start


React JSX

我們不需要一定使用 JSX,但它有以下優點:

* JSX 執行更快,因為它在編譯為 JavaScript 代碼后進行了優化。

* 它是類型安全的,在編譯過程中就能發現錯誤。

* 使用 JSX 編寫模板更加簡單快速。


使用 JSX

ReactDOM.render(

    <h1>Hello, world!</h1>,

    document.getElementById('example')

);

可以在以上代碼中嵌套多個 HTML 標簽,需要使用一個 div 元素包裹它;

ReactDOM.render(

    <div>

    <h1>菜鳥教程</h1>

    <h2>歡迎學習 React</h2>

    </div>

    ,

    document.getElementById('example')

);


獨立文件

你的 React JSX 代碼可以放在一個獨立文件上,例如我們創建一個 helloworld_react.js 文件,然后在 HTML 文件中引入該 JS 文件:


<body>

    <div id="example"></div>

    <script type="text/babel" src="helloworld_react.js"></script>

</body>


JavaScript 表達式

我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {};

在 JSX 中不能使用 if else 語句,但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變量 i 等于 1 瀏覽器將輸出 true, 如果修改 i 的值,則會輸出 false.

ReactDOM.render(

    <div>

      <h1>{1+1}</h1>

      <h1>{i == 1 ? 'True!' : 'False'}</h1>

    </div>

    ,

    document.getElementById('example')

);


樣式

React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式.

React 會在指定元素數字后自動添加 px


var myStyle = {

    fontSize: 100,

    color: '#FF0000'

};

ReactDOM.render(

    <h1 style = {myStyle}>菜鳥教程</h1>,

    document.getElementById('example')

);


注釋

注釋需要寫在花括號中

ReactDOM.render(

    <div>

    <h1>菜鳥教程</h1>

    {/*注釋...*/}

     </div>,

    document.getElementById('example')

);


數組

JSX 允許在模板中插入數組,數組會自動展開所有成員:


var arr = [

  <h1>菜鳥教程</h1>,

  <h2>學的不僅是技術,更是夢想!</h2>,

];

ReactDOM.render(

  <div>{arr}</div>,

  document.getElementById('example')

);

React 組件

我們封裝一個輸出 “Hello World!” 的組件,組件名為 HelloMessage:


var HelloMessage = React.createClass({

    render:function(){

        return <h1>Hello World</h1>;

    }

});


ReactDOM.render(

    <HelloMessage/>,

    document.getElementById('example')

    )


注意,原生 HTML 元素名以小寫字母開頭,而自定義的 React 類名以大寫字母開頭,

比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標簽,否則也會報錯.


如果我們需要向組件傳遞參數,可以使用 this.props 對象,


var HelloMessage = React.createClass({

    render:function(){

        return <h1>Hello {this.props.name}</h1>;

    }

})

ReactDOM.render(

    <HelloMessage name="hhh"/>,

    document.getElementById('example')

    )


注意,在添加屬性時, class 屬性需要寫成 className ,for 屬性需要寫成 htmlFor ,這是因為 class 和 for 是 JavaScript 的保留字。


我們可以通過創建多個組件來合成一個組件,即把組件的不同功能點進行分離。


var WebSite = React.createClass({

    render:function(){

        <div>

            <Name name={this.props.name} />

            <Link site={this.props.site} />

        </div>

    }

})


var Name = React.createClass({

  render: function() {

    return (

      <h1>{this.props.name}</h1>

    );

  }

});


var Link = React.createClass({

  render: function() {

    return (

      <a href={this.props.site}>

        {this.props.site}

      </a>

    );

  }

});


ReactDOM.render(

  <WebSite name="菜鳥教程" site=" http://www.runoob.com" />,

  document.getElementById('example')

);


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产