React一——起源、安裝、jsx

reclay 發(fā)布于2019-08-21 17:54 / 2654人閱讀

摘要：起源官網公司出品，因為對市場上所有框架，都不滿意，就決定自己寫一套，用來架設的網站。而來自的框架正是完全面向此問題的一個解決方案，按官網描述，其出發(fā)點為用于開發(fā)數據不斷變化的大型應用程序。

React 起源

官網：https://doc.react-china.org/d...
Facebook公司出品，因為對市場上所有 JavaScript MVC 框架，都不滿意，
就決定自己寫一套，用來架設 Instagram 的網站。
做出來以后，發(fā)現這套東西很好用，然后13年面世，14年國內引入，
由于 React 的設計思想極其獨特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單，
同時github受到大量的關注，國內各大公司都會分出專門的人力物力去研究使用。

出發(fā)點

基于HTML的前端界面開發(fā)正變得越來越復雜，其本質問題基本都可以歸結于：
如何將來自于服務器端或者用戶輸入的動態(tài)數據高效的反映到復雜的用戶界面上。
而來自Facebook的React框架正是完全面向此問題的一個解決方案，按官網描述，其出發(fā)點為：
用于開發(fā)數據不斷變化的大型應用程序（Building large applications with data that changes over time）。

相比傳統(tǒng)型的前端開發(fā)，React開辟了一個相當另類的途徑，實現了前端界面的高性能高效率開發(fā)。

安裝

a. 腳手架 cnpm i create-react-app -g
b. 創(chuàng)建項目 create-react-app react-app
c. 裝好之后src 里只留index.js入口文件
    react 與 react-dom
        react ： react代碼的構建
        react-dom:將react代碼渲染到頁面上
    //渲染主鍵 掛載點
    ReactDom.render(test,document.getElementById("root"))
d. index.js

    import React from "react"
    import ReactDom from "react-dom"

React概念

React不是一個完整的MVC框架，最多可以認為是MVC中的V（View），甚至React并不非常認可MVC開發(fā)模式；，因為MVC耦合度高，性能也不是很好

適用的項目：數據不斷變化的大型應用程序？Why?
優(yōu)點：高性能高效率
React是一個輕量級視圖層前端JS框架

無狀態(tài)組件和有狀態(tài)組件(高階組件)

1、無狀態(tài)組件：例如

const test = function(){

    //情形一
    return test
    
    //顯示js邏輯
    let x = "test"
    return {x}
    
    //顯示js邏輯2
    let x = "test"
    return (
        
            {x}
            test
        
    )
}
 
ReactDom.render(test(),document.getElementById("root"))

可以看到無狀態(tài)組件沒有定義類 React.createClass 或者class Name extends React.Component 來創(chuàng)建自己的函數組件
直接簡寫成了一個render函數
省掉了將組建類實例化的過程
無法實現組建的生命周期方法
不支持“ref” ，因為在 React 調用到無狀態(tài)組件的方法之前，是沒有一個實例化的過程的，因此也就沒有所謂的 "ref"

2、有狀態(tài)組件(高階組件)
我們正常寫的組件都可稱為有狀態(tài)組件

React 特點和優(yōu)勢

JSX語法糖

全稱為javascript xml，作用，幫助React構建虛擬dom結構，不使用JSX的話，需要使用React.createElement(tagName,options:(id,className),contents..)
例如：

var child1 = React.createElement("li", null, "First Text Content");
var child2 = React.createElement("li", null, "Second Text Content");
var root = React.createElement("ul", { className: "my-list" }, child1, child2);

使用jsx語法會使react開發(fā)更為簡單，xml指的只是借鑒了一些XML的語法，標簽必須閉合，最外層必須有節(jié)點包裹

常用語法：

1、定義屬性及元素

 var node = (
  
    {
       person ? Welcome back, {person.firstName} {person.lastName}!
       : Please log in
    }
  
);

2、事件綁定

3、樣式

Hello World.
或：
    var style = {
      color: "#ff0000",
      fontSize: "14px"
    };
    
    var node = HelloWorld.
;

4、class類名用className

5、遍歷

      
        {  
            arr.map(function(name){  
                return {name}
 //必須要return出來否則在dom中不會顯示  
            })  
        }     
    
,

6、用Babel進行jsx編譯

npm install —save-dev babel-loader

    只需稍微改變一下webpack.config.js的配置，將原來的jsx-loader變?yōu)閎abel-loader：

module: {
  loaders: [
    { test: /.jsx?$/, loaders: ["babel-loader"]}
  ]
}

GPU云服務器云服務器 jsx 起源 jsx 條件 jsx cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/90190.html

用eslint + prettier + pre-commit管理項目(React)

摘要：前言人是很懶惰的，你剛開始建立的一個規(guī)規(guī)整整的項目，可能一段時間過后，就回被你無數次的提交代碼弄得凌亂不堪。前言人是很懶惰的，你剛開始建立的一個規(guī)規(guī)整整的項目，可能一段時間過后，就回被你無數次的提交代碼弄得凌亂不堪。就算你能保證你的編碼風格嚴謹統(tǒng)一，別人又該如何，每個人都有不一樣的編碼風格，要保持統(tǒng)一，就要對項目進行適當的管理正文接下來介紹個React項目簡單管理的一個實踐： ...

endiat 2019-08-23 10:38 評論0 收藏0
React VR 快速入門完全教程

摘要：快速入門什么是是一個開放源代碼的庫，為呈現的數據提供了視圖渲染。最后，項目根組件應該通過來進行注冊，以便能夠進行打包和正常運行?；舅枷胧卿秩疽粋€立方體，并將觀眾置于中心，隨后移動。表示從指定方向平均照亮所有物體的光源。 React VR 快速入門什么是React React是一個開放源代碼的JavaScript庫，為HTML呈現的數據提供了視圖渲染。React視圖通常使用指定的像H...

andot 2019-08-20 17:16 評論0 收藏0
Webpack 和 React 實戰(zhàn)

摘要：首先安裝然后在的里面加入和兩個命令在建立一個服務器為你的代碼創(chuàng)建源地址。更新使用語法編寫修改加載器的配置方法將添加文件改為在中配置加載器的配置方法接下來需要配置，告訴我們使用了和插件。 TL;DR $ git clone https://github.com/nodejh/start-react-with-webpack react-sample $ cd react-sample &...

gxyz 2019-08-22 10:47 評論0 收藏0
使用webpack和babel搭建react開發(fā)環(huán)境

摘要：譯文原文來自寫在前面使用已經蠻長一段時間但是在新項目開始之際都是東拼西湊其他項目的配置來使用如果要自己從零開始寫一個完整項目的配置估計得費死勁所以在發(fā)布版本之際正是時候來認真從零開始學習了是一個出自的庫用于構建用戶交互界面是一個非常厲害的有譯文,原文來自https://scotch.io/tutorials/s...寫在前面,使用webpack已經蠻長一段時間,但是在新項目開始之際,...

AZmake 2019-08-20 15:58 評論0 收藏0
Webpack系列——手把手教你使用Webpack搭建簡易的React開發(fā)環(huán)境

摘要：在這篇文章中我們開始利用我們之前所學搭建一個簡易的開發(fā)環(huán)境，用以鞏固我們之前學習的知識。文章首發(fā)于我的github及個人博客，github請看https://github.com/huruji/blo...，轉載請注明出處。在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發(fā)環(huán)境，用以鞏固我們之前學習的Webpack知識。首先我們需要明確這次開發(fā)環(huán)境需要達到的效果：1、...

cucumber 2019-08-22 11:06 評論0 收藏0