圖解：React 項目構建簡單小測試

原創 Monkey_24 2019-08-09 17:55

react 項目構建
（github項目)壓縮包：https://pan.baidu.com/s/1_5LxosvcJCIvGkpt0_yrqg密碼:hkkk
1.找到react項目壓縮包解壓在這裏插入圖片描述
可進入項目目錄，修改項目信息：

在這裏插入圖片描述
使用visual studio code打開項目目錄
在這裏插入圖片描述
查看項目目錄結構:
在這裏插入圖片描述
查看包管理源鏡像路徑是否爲國內
在這裏插入圖片描述
查看轉譯器預設支持配置:.babelrc
在這裏插入圖片描述
查看項目依賴包：package.json(默認已npm init初始化了)
在這裏插入圖片描述
熱加載依賴也在開發者依賴庫安裝：
在這裏插入圖片描述
安裝項目依賴包：npm install
在這裏插入圖片描述
項目支持github版本管理（修改repository元素即可）
在這裏插入圖片描述
格式如下：
在這裏插入圖片描述
支持本地webserver開發環境
配置文件：
在這裏插入圖片描述
本地監聽端口也可以設置代理服務器配置
在這裏插入圖片描述
開啓熱加載
在這裏插入圖片描述
啓動項目：
在這裏插入圖片描述
訪問webserver:
在這裏插入圖片描述
修改index.js然後掛載在id爲root的DOM元素
在這裏插入圖片描述
對應掛載的index.html的Dom元素
在這裏插入圖片描述
驗證：
在這裏插入圖片描述
編輯index.js,增加子元素

import React from 'react';
import ReactDom from 'react-dom'

//要增加的子元素
class SubEle extends React.Component{
  render(){
    return <div>Sub content</div>
    //return <div>{1>2?"ture":"false"}</div>
  }
}

//定義React組件（JSX語法）
class Root extends React.Component {　
  render () {
    return (
    <div>
      <h2>My first test</h2>
      <hr/>
      <SubEle />
    </div>);
  }
}

//使用render渲染函數把React組件關聯至Dom的Element元素
ReactDom.render(<Root />,document.getElementById('root'))


// //另類語法
// class Root extends React.Component {　
//   render () {
//     return React.createElement('div',null,'My first test')
//   }
// }
// ReactDom.render(React.createElement(Root),document.getElementById('root'))

瀏覽器驗證：
在這裏插入圖片描述
動態渲染：

import React from 'react';
import ReactDom from 'react-dom'

//要增加的子元素
class SubEle extends React.Component{
  state = {
    p1:'mozilla',
    p2:'.com'
  }
  render(){
    //this.state.p1 = 'www.mozilla'
    setTimeout(() => this.setState({p1:'http://mozilla'}),3000) //超過３秒重繪內容
    return <div>{this.state.p1 + this.state.p2}</div>
    // return <div>{1>2?"ture":"false"}</div>
  }
}

//定義React組件（JSX語法）
class Root extends React.Component {　
  render () {
    return (
    <div>
      <h2>My first test</h2>
      <hr/>
      <SubEle />
    </div>);
  }
}

//使用render渲染函數把React組件關聯至Dom的Element元素
ReactDom.render(<Root />,document.getElementById('root'))

查看瀏覽器變化：
在這裏插入圖片描述
設置鼠標點擊事件觸發回調函數產生告警：

import React from 'react';
import ReactDom from 'react-dom'


//要增加的子元素
class SubEle extends React.Component{
  handleClick(event){
    let x = event.target
    alert("觸發的元素id是："+ x.id)
  }
  render(){
    return (
    <div id="t1" onClick={this.handleClick.bind(this)}>
      點擊這句話，會觸發一個事件，並彈出一個警示框
    </div>
    )
  }
}

//定義React組件（JSX語法）
class Root extends React.Component {　
  render () {
    return (
    <div>
      <h2>My first test</h2>
      <hr/>
      <SubEle />
    </div>);
  }
}

//使用render渲染函數把React組件關聯至Dom的Element元素
ReactDom.render(<Root />,document.getElementById('root'))

瀏覽器訪問：
在這裏插入圖片描述

上例子對應的html格式：

<html>
    <head>
        <script type="text/javascript">
            function getEventTrigger(event) {
                x = event.target;
                alert("觸發的元素id是："+ x.id)
            }
        </script>
    </head>
    <body>
        <div id="t1" onmousedown="getEventTrigger(event)">
            點擊這句話，會觸發一個事件，並彈出一個警示框
        </div>
        hello world !!!
    </body>
</html>

查看瀏覽器訪問：
在這裏插入圖片描述
改進：

import React from 'react';
import ReactDom from 'react-dom'


//要增加的子元素
class Toggle extends React.Component{
  state = {flag:true}

  handleClick(event){
    console.log(event.target)
    console.log(this)
    console.log(this.state)
    let x = event.target
    alert("觸發的元素id是："+ x.id)
    this.setState({flag:!this.state.flag})
  }
  render(){
    let text = this.state.flag?"true":"false"
    return (
    <div id="t1" onClick={this.handleClick.bind(this)}>
      點擊這句話，會觸發一個事件，並彈出一個警示框
      flag = {text}
    </div>
    )
  }
}

//定義React組件（JSX語法）
class Root extends React.Component {　
  render () {
    return (
    <div>
      <h2>My first test</h2>
      <hr/>
      <Toggle />
    </div>);
  }
}

//使用render渲染函數把React組件關聯至Dom的Element元素
ReactDom.render(<Root />,document.getElementById('root'))

查看瀏覽器變化：
在這裏插入圖片描述
改進：

import React from 'react';
import ReactDom from 'react-dom'


//要增加的子元素

class Toggle extends React.Component{
  constructor(props){
    super(props)
    this.state = {flag:true}
  }
  handleClick(event){
    let x = event.target
    alert("觸發的元素id是："+ x.id)
    this.setState({flag:!this.state.flag})
  }
  render(){
    let text = this.state.flag?"true":"false"
    return (
    <div id="t1" onClick={this.handleClick.bind(this)}>
      點擊這句話，會觸發一個事件，並彈出一個警示框
      flag = {text}
      <hr />
      {this.props.var1}
      <hr />
      {this.props.var2.student}
      <hr />
      {this.props.children}
    </div>);
  }
}

//定義React組件（JSX語法）
class Root extends React.Component {　
  student = 'yzx'
  render () {
    return (
    <div>
      <h2>My first test</h2>
      <hr/>
      <Toggle var1='abc' var2={this}>
        <div>我是toggle的子元素</div>
      </Toggle>
    </div>);
  }
}

//使用render渲染函數把React組件關聯至Dom的Element元素
ReactDom.render(<Root />,document.getElementById('root'))

查看瀏覽器變化：
在這裏插入圖片描述
案例：

import React from 'react';
import ReactDom from 'react-dom'


class Sub extends React.Component{
  constructor(props){
    console.log('Sub constructor')
    super(props)
    this.state = {count:0}
  }

  hanlerClink(event){
    this.setState({count:this.state.count+1})
  }

  render(){
    console.log('Sub render')
    return (
      <div id='Sub' onClick={this.hanlerClink.bind(this)}>
        sub's count = {this.state.count}
      </div>
    )
  }

  componentWillMount(){
    //constructor之後，第一次render之前
    console.log('Sub componentwillMount')
  }

  componentDidMount(){
    //第一次render之後
    console.log('Sub componentDitMount')
  }

  componentWillUnmount(){
    //清理工作
    console.log('Sub componentWillUnmount')
  }
}

class Root extends React.Component{
  constructor(props){
    console.log('Root constructor')
    super(props)
    this.state = {}
  }
  render(){
    return (
      <div>
        <Sub />
      </div>
    )
  }
}

ReactDom.render(<Root />,document.getElementById('root'))

查看瀏覽器變化：
在這裏插入圖片描述
案例：

import React from 'react';
import ReactDom from 'react-dom'


class Sub extends React.Component{
  constructor(props){
    console.log('Sub constructor')
    super(props)
    this.state = {count:0}
  }
 
  handlerClink(event){
    console.log(event)
    this.setState({count:this.state.count+1})
  }

  render(){
    console.log('Sub render')
    return (
      <div id='Sub' onClick={this.handlerClink.bind(this)}>
        sub's count = {this.state.count}
      </div>
    )
  }

  componentWillMount(){
    //constructor之後，第一次render之前
    console.log('Sub componentwillMount')
  }

  componentDidMount(){
    //第一次render之後
    console.log('Sub componentDitMount')
  }

  componentWillUnmount(){
    //清理工作
    console.log('Sub componentWillUnmount')
  }

  componentWillReceiveProps(nextProps){
    //props變更時，接到新的props了，交給shouldComponentUpdate
    console.log(this.props)
    console.log(nextProps)
    console.log('Sub componentWillReceiveProps',this.state.count)
  }

  shouldComponentUpdate(nextPros,nextState){
    console.log('Sub shouldComponentUpdate',this.state.count,nextState)
    return true　//return false將攔截更新
  }

  componentWillUpdate(nextPros,nextState){
    //同意更新後，真正更新前，之後調用render
    console.log('Sb componentWillUpdate',this.state.count,nextState)
  }

  componentDidUpdate(prevProps,prevState){
    //同意更新後，真正更新前，在render之後調用
    console.log('Sub componentDidUpdate',this.state.count,prevState)
  }
}

class Root extends React.Component{
  constructor(props){
    console.log('Root constructor')
    super(props)
    this.state = {flag:true,name:'root',count:0}
  }

  handlerClink(event){
    this.setState({
      flag:!this.state.flag,
      name:this.state.flag?this.state.name.toLowerCase():this.state.name.toUpperCase(),
      count:this.state.count+1
    })
  }

  render(){
    return (
      <div id='root' onClick={this.handlerClink.bind(this)}>
        My Name is {this.state.name}
        <br />
        root's count = {this.state.count}
        <hr />
        <Sub parent={this}/> {/*父組件中的點擊會引起子組件的刷新但不觸發子組件的點擊事件。而子組件的點擊會引起父組件的點擊事件 */}
      </div>
    )
  }
}

ReactDom.render(<Root />,document.getElementById('root'))

查看瀏覽器變化：
在這裏插入圖片描述
案例：

import React from 'react';
import ReactDom from 'react-dom'

//無狀態react組件
// function Root(props){
//   return (
//   <div id='root'>
//     My Name is {props.name}
//   </div>)
// }
//上面改造成如下：
let Root = props => <div id='root'>My Name is {props.name}</div>
ReactDom.render(<Root name='yzx' />,document.getElementById('root'))

查看瀏覽器變化：
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

報表：JS實現點擊行改變顏色

在實際項目開發中，有些開發出來的報表的數據量是比較大的，或者是多維度的大數據分析報表，在這個時候，爲了觀察方便，我們一般會對報表進行底色區分，改變每個隔行的顏色，方便用戶對報表數據進行閱讀。 然而，有些應用場景中，隔行區分顏色不一定能滿足

丿潇湘丶书笛 2020-06-22 15:21:29

報表：JS設置控件條件性可用/可見（參數面板）

在報表的使用過程中，有一種應用場景：在使用者的做查詢條件時，根據下拉框或填寫的值，自動顯示/隱藏下一個篩選框，例如選了省份和城市之後，再顯示區縣的篩選框，如下圖： 1、報表界面設計： 其中，“區縣”和對應的下拉框，需要預設置爲不可見。

丿潇湘丶书笛 2020-06-22 14:36:38

報表：JS實現報表多文件批量導出和下載

在報表上線後，用戶在導出報表的過程中，系統有一系列報表需要導出，爲了減輕用戶的工作量，可以在系統中實現一鍵進行多文件的批量導出，以及自定義導出文件名等。 1、JavaScript事件： 在工具欄或報表中，定義一個觸發的超鏈接或JavaSc

丿潇湘丶书笛 2020-06-22 14:36:26

報表：JS獲取/賦值參數面板和展示面板的數據

在日常報表開發中，由於前臺展現的特殊聯動等功能要求，或前後臺數據交互顯示功能要求，經常需要通過JavaScript來獲取單元格或控件中的數據值，對指定單元格或控件進行賦值等等，下面分享一下在報表參數面板、數據展示面板中，如何使用JavaS

丿潇湘丶书笛 2020-06-22 14:36:20

報表：JS獲取複選框選中行數據（適用於批量插入、刪除、修改、查詢）

在日常報表製作中，我們會時長遇到一些需要批量操作的功能，例如數據的批量刪除、批量入庫、批量新增、批量修改、批量查詢等等，而此時也時長跟複選框掛鉤；一般是在報表中，我們可以通過複選框的形式進行勾選，然後通過按鈕或者超鏈接觸發JavaScri

丿潇湘丶书笛 2020-06-22 14:36:20

報表：JS實現多樣式打開網頁

1、新窗口 //方法一： window.location="/mmd/RS?bb=f9976214-fd70-4525-b07c-2de9645f1edf"; //方法二： window.open("/mmd/RS?bb=f997621

丿潇湘丶书笛 2020-06-22 14:36:20

項目實戰：使用React框架搭建一個B/S架構能夠記錄＂任務事務＂完成與否的任務欄

react項目的初始化安裝請參考：https://blog.csdn.net/u012335228/article/details/98884858 下面實驗在瀏覽器將數據永久化 １．安裝local storage js模塊：

Monkey_24 2020-06-15 09:38:16

實用：使用nodejs包管理npm安裝babel解決javascript版本兼容問題

配置npm安裝環境： 1.修改下載的鏡像源，在項目路徑下創建.npmrc內容如下： 2.使用npm init 初始化項目目錄（不會影響目錄下原文件），填寫初始化信息後會自動生成package.json文件 3.驗證一下（查看文

Monkey_24 2020-06-15 09:38:16

報表：JS實現填寫後自動移出光標，解決控件值刷新不及時（實用性更強，適用於所有控件、大小型填報表）

丿潇湘丶书笛 2020-05-31 12:03:58

報表：JS實現填寫後自動移出光標，解決控件值刷新不及時

丿潇湘丶书笛 2020-05-31 12:03:58

報表：JS控制下拉框數據聯動和隱藏/顯示

丿潇湘丶书笛 2020-05-31 12:03:58

報表：JS中獲取控件數據/行號/列號，各控件變量名梳理

丿潇湘丶书笛 2020-05-31 12:03:58

報表：JS實現報表多文件批量導出和下載（解決瀏覽器攔截問題）

丿潇湘丶书笛 2020-05-23 11:50:21

JavaScripts學習總結

末甘 2020-05-01 17:48:14

報表：JS刪除複選框選中行

丿潇湘丶书笛 2020-04-16 05:22:17