初識(shí)react

npx create-react-app "項(xiàng)目名"

react用到的第三方包

  • classnames
  • styled-components 將css獨(dú)立來(lái)寫(xiě)的第三方包
  • prop-types：props的類型檢測(cè)工具
  • axios

在jsx里面寫(xiě)js代碼就加一個(gè){}

創(chuàng)建一個(gè)簡(jiǎn)單的react:

import React from "react"
import ReactDOM from "react-dom"

// const app = <h1>welcome first!</h1>// jsx語(yǔ)法纵诞，不需要加引號(hào)
const createApp = (props) => {
    return (
        <div>
            {/* {只要在jsx里面寫(xiě)js代碼就要加一層花括號(hào)注釋也要用花括號(hào)} */}
            <h1>歡迎來(lái)到{props.title}</h1>
            <p>優(yōu)秀的{props.title}</p>
        </div>
    )
}
const app = createApp({
    title: '德萊聯(lián)盟'
})
ReactDOM.render(
    app,
    document.querySelector("#root")
)

react定義組件的方式：

1舒裤、箭頭函數(shù)烛愧，組件的首字母大寫(xiě)
2构捡、使用類組件，可以嵌套
<1> 箭頭函數(shù)方法：

// react創(chuàng)建組件的第一個(gè)方式：箭頭函數(shù)，這個(gè)名字要大寫(xiě) App
const App = (props) => {
    return (
        <div>
            <h1 title={props.title}>想吃很多{props.title}</h1>
            <p>有很多{props.title}</p>
        </div>
    )
}
ReactDOM.render(
    <App title="炸雞腿"/>,
    document.querySelector("#root")
)

<2>使用類繼承React.Component:

// 定義組件的第二個(gè)方法：使用類繼承React.Component
import React, { Component } from "react"
import { render } from "react-dom"

class App extends Component {
    render () {
        console.log(this.props) //{title: "類組件是繼承React.Component的"}  參數(shù)傳遞就用this.props
        return (
            <div>
                <h1>類組件</h1>
                <p>{this.props.title}</p>
            </div>
        )
    }
}
// render 是ReactDOM提供的方法，這個(gè)方法通常只會(huì)使用一次
render(
    <App title="類組件是繼承React.Component的"/>,
    document.querySelector("#root")
)

// 16版本以前創(chuàng)建組件的方法
// React.createClass({
//     render () {
//         return (
//             <div>{this.props.title}</div>
//         )
//     }
// })

組件嵌套

import React, { Component } from "react"
import { render } from "react-dom"

const Header = () => <h1>組件嵌套</h1>
class App extends Component {
    render () {
        return (
            <div>
                <Header />
                <p>{this.props.title}</p>
            </div>
        )
    }
}

render(
    <App title="react組件可以嵌套"/>,
    document.querySelector("#root")
)

jsx原理,通過(guò)React.createElement的方式創(chuàng)建元素，有無(wú)限個(gè)參數(shù)蝶念，但前兩個(gè)是固定的，第一個(gè)標(biāo)簽名芋绸，第二個(gè)是標(biāo)簽的屬性媒殉，剩下的都是子元素
React.createElement(type,[props],[...children])

import React, { Component } from "react"
import { render } from "react-dom"
class App extends Component {
    render () {
        return (
            React.createElement (
                'div',
                {
                    className: 'app',
                    id: 'appRoot'
                },
                React.createElement (
                    'h1',
                    {
                        className: 'title'
                    },
                    'jsx原理'
                ),
                React.createElement (
                    'p',
                    null,
                    'jax到底怎么寫(xiě)？'
                )
            )
        )
    }
}

// const appVDom = {
//     tag: "div",
//     attrs: {
//         className: "app",
//         id: "appRoot"
//     },
//     children: [
//         {
//             tag: "h1",
//             attrs: {
//                 className: "app"
//             },
//             children: [
//                 "jsx原理"
//             ]
//         }, {
//             tag: "p",
//             attrs: null,
//             children: [
//                 "jsx到底怎么寫(xiě)呢摔敛？"
//             ]
//         }
//     ]

// }

render(
    <App />,
    document.querySelector("#root")
)

react里的css

1廷蓉、使用style標(biāo)簽內(nèi)聯(lián)創(chuàng)建

import React, { Component } from "react"
import { render } from "react-dom"
import classNames from "classnames"
import styled from "styled-components"
import './index.css'

const Title = styled.h2`
    color: #f00
    `

class App extends Component {
    render () {
        const style = {color: '#f00'}
        return (
            <div>
                <h1>元素的樣式</h1>
                <Title>styled-components的使用</Title>
                <ol>
                    <li style={style}>使用style方式</li>
                    <li className='redclass'>使用class方式，但在react里要寫(xiě)成className</li>
                    <li className={classNames('a',{'b': true,'c': false})}>要?jiǎng)討B(tài)添加className使用classnames第三方包</li>// 該li的class只有a马昙，b沒(méi)有c
                </ol>
            </div>
        )
    }
}

render(
    <App />,
    document.querySelector("#root")
)

2桃犬、使用class方式，但是要寫(xiě)成className行楞，樣式寫(xiě)在css文件中攒暇，所有要先import引入
第三方的css包：1、classnames子房，可以動(dòng)態(tài)添加不同的className

3形用、styled-components 將css獨(dú)立來(lái)寫(xiě)的第三方包

React項(xiàng)目組件化

快捷鍵：rcc react的class component；rfc react的function component

  1. 整個(gè)單頁(yè)應(yīng)用的入口文件：App.js

  2. 入口文件：index.js

  3. 其余的子組件包在App下面

  4. 在src下新建一個(gè)components目錄证杭，里面包含所有的子組件田度，一個(gè)子組件就是一個(gè)文件夾，用組件名作為文件夾名字解愤；同時(shí)每币，在components的根目錄下還有一個(gè)index.js文件厌处，用來(lái)引入和導(dǎo)出所有的子組件，在App.js里面引入所有的組件旭愧。


    image.png

  5. 在src下創(chuàng)建一個(gè)services文件夾羹与，里面有apis.js和index.js文件像街。apis.js是統(tǒng)一管理接口的文件

組件化開(kāi)發(fā)React todolist筋讨， 項(xiàng)目開(kāi)發(fā)中的組件的基本目錄結(jié)構(gòu)基本上是這樣的：
> /your-project
>
> - src
>   - …
>   - components
>     - YourComponentOne
>       - index.js/YourComponentOne.js
>     - YourComponentTwo
>       - index.js/YourComponentTwo.js
>     - index.js 用于導(dǎo)出組件
注意：一個(gè)組件只干一件事情 谆棺，所以TodoList和TodoItem要做成兩個(gè)組件叹螟，這樣也方便于后期理解shouldComponentUpdate

一個(gè)組件里的return只能有一個(gè)根元素 魄宏，因此react里可以使用Fragment（需要import引入秸侣，是一個(gè)空標(biāo)簽），或者直接使用空標(biāo)簽

import React, { Component, Fragment } from 'react'
import {
    TodoHeader,
    TodoInput,
    TodoList
} from './components'
export default class App extends Component {
  render() {
    return (
      <Fragment>
        <TodoHeader />
        <TodoInput />
        <TodoList />
      </Fragment>

    //   <>
    //     <TodoHeader />
    //     <TodoInput />
    //     <TodoList />
    //   </>
    )
  }
}

兩種導(dǎo)出方式：

//第一種,當(dāng)需要對(duì)這里引入的組件進(jìn)行處理再導(dǎo)出時(shí)使用
// import TodoHeader from './TodoHeader'
// import TodoInput from './TodoInput'
// import TodoList from './TodoList'

// export {
//     TodoHeader,
//     TodoInput,
//     TodoList
// }

//第二種
export { default as TodoHeader} from './TodoHeader'
export { default as TodoInput} from './TodoInput'
export { default as TodoList} from './TodoList'

組件的數(shù)據(jù)掛載方式

1. 通過(guò)props傳遞
function組件直接通過(guò)props.xxx,class組件通過(guò)this.props.xxx傳遞

import React from 'react'

export default function TodoHeader(props) {
  console.log(props)// {title: "待辦事項(xiàng)"}
  return (
    <h1>
      {props.title}
    </h1>
  )
}

屬性（props）

props.children 組件標(biāo)簽內(nèi)的內(nèi)容

// App.js
export default class App extends Component {
  render() {
    return (
      <Fragment>
        <TodoHeader desc="完成今天所有的事">
          待辦事項(xiàng)列表
        </TodoHeader>
        <TodoInput btnText="ADD"/>
        <TodoList />
      </Fragment>

// TodoHeader/index.js
export default function TodoHeader(props) {
  console.log(props) // {desc: "完成今天所有的事", children: "待辦事項(xiàng)列表"}
  return (
    <h1>
      {props.children}
    </h1>
  )
}

prop-types：props的類型檢測(cè)工具

// TodoHeader/index.js
import React from 'react'
import PropTypes from 'prop-types'
export default function TodoHeader(props) {
  console.log(props)
  return (
    <>
      <h1>
        {props.children}
      </h1>
      <h3>{props.desc}</h3>
      <p>{props.x + props.y}</p>
    </>
  )
}
TodoHeader.propTypes = {
  desc: PropTypes.string,
  x: PropTypes.number.isRequired,
  y: PropTypes.number.isRequired
}

class組件寫(xiě)法：

// TodoInput.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class TodoInput extends Component {
  static propTypes = {
    btnText: PropTypes.string
  }
  static defaultProps = {
    btnText: '添加TODO' //組件默認(rèn)值
  }
//TodoHeader.defaultProps = {
//  desc: '如果能重來(lái)'
//}  //funciton組件寫(xiě)法
  render() {
    return (
      <div>
        <input type="text"/><button>{this.props.btnText}</button>
      </div>
    )
  }
}

state

組件內(nèi)部狀態(tài)定義用state宠互，有兩種定義方法 味榛，而props是外部傳入的屬性.只有class組件才有this和state

// App.js
export default class App extends Component {
// 第一張定義方式
//  state = {
//    title: '待辦事項(xiàng)'
//  }
// 第二種定義方法
  constructor () {
    super()
    this.state = {
      title: '待辦事項(xiàng)',
      desc: '完成今天所有的事'
    }
  }
  render() {
    return (
      <Fragment>
        <TodoHeader desc={this.state.desc}>
          {this.state.title}
        </TodoHeader>

組件的分類：

  • class組件和function組件
  • 受控組件、不受控組件予跌、半受控組件(通過(guò)props傳入屬性搏色，在組件內(nèi)部沒(méi)法修改的叫受控組件，通過(guò)state定義的狀態(tài)不是外部傳入的時(shí)不受控組件)
    不能跨組件傳遞props券册，必須一層一層的傳
    組件模板渲染語(yǔ)法 
{/* {this.todos[0].isCompleted && '完成'} */}
{this.state.todos[0].isCompleted ? '完成' : '未完成'}
        {
          this.state.todos.map(todo => {
            return <div key={todo.id}>{todo.title}</div>
          })
        }

{div dangerouslySetInnerHTML={{__html: this.state.article}}} // 渲染不帶HTML標(biāo)簽的內(nèi)容

dangerouslySetInnerHTML频轿，類似于vue的v-html，輸出不帶HTML標(biāo)簽的內(nèi)容


image.png

屬性vs狀態(tài)

相似點(diǎn)：都是純js對(duì)象烁焙，都會(huì)觸發(fā)render更新航邢，都具有確定性（狀態(tài)/屬性相同，結(jié)果相同）

不同點(diǎn)：

  1. 屬性能從父組件獲取骄蝇，狀態(tài)不能
  2. 屬性可以由父組件修改膳殷，狀態(tài)不能
  3. 屬性能在內(nèi)部設(shè)置默認(rèn)值，狀態(tài)也可以
  4. 屬性不在組件內(nèi)部修改九火，狀態(tài)要改
  5. 屬性能設(shè)置子組件初始值赚窃，狀態(tài)不可以
  6. 屬性可以修改子組件的值，狀態(tài)不可以

state 的主要作用是用于組件保存吃既、控制考榨、修改自己的可變狀態(tài)。state 在組件內(nèi)1部初始化鹦倚，可以被組件自身修改河质，而外部不能訪問(wèn)也不能修改。你可以認(rèn)為 state 是一個(gè)局部的震叙、只能被組件自身控制的數(shù)據(jù)源掀鹅。state 中狀態(tài)可以通過(guò) this.setState方法進(jìn)行更新，setState 會(huì)導(dǎo)致組件的重新渲染媒楼。

props 的主要作用是讓使用該組件的父組件可以傳入?yún)?shù)來(lái)配置該組件乐尊。它是外部傳進(jìn)來(lái)的配置參數(shù)，組件內(nèi)部無(wú)法控制也無(wú)法修改划址。除非外部組件主動(dòng)傳入新的 props扔嵌，否則組件的 props 永遠(yuǎn)保持不變限府。

如果搞不清 state 和 props 的使用場(chǎng)景，記住一個(gè)簡(jiǎn)單的規(guī)則：盡量少地用 state痢缎，多用 props胁勺。

沒(méi)有 state 的組件叫無(wú)狀態(tài)組件（stateless component），設(shè)置了 state 的叫做有狀態(tài)組件（stateful component）独旷。因?yàn)闋顟B(tài)會(huì)帶來(lái)管理的復(fù)雜性署穗，我們盡量多地寫(xiě)無(wú)狀態(tài)組件，盡量少地寫(xiě)有狀態(tài)的組件嵌洼。這樣會(huì)降低代碼維護(hù)的難度案疲，也會(huì)在一定程度上增強(qiáng)組件的可復(fù)用性。

更改狀態(tài)(setState)

  • react不能直接通過(guò)this.state.xxx = !this.state.xxx來(lái)直接更改狀態(tài)麻养，要用setSate()方法來(lái)更改褐啡。（能修改數(shù)據(jù)，但是頁(yè)面不會(huì)渲染）
  • setState()有兩個(gè)參數(shù)回溺，第一個(gè)參數(shù)有兩種情況：第一種是一個(gè)對(duì)象春贸；第二種情況是一個(gè)方法。
  • setState的第二個(gè)參數(shù)是一個(gè)回調(diào)在里面return一個(gè)對(duì)象遗遵，由于setState是異步的萍恕，想要獲取最新的state要在第二個(gè)參數(shù)的回調(diào)里獲取
  • react的setState是異步的，setState里的方法要比它外面的方法后執(zhí)行
import React, { Component } from 'react'

export default class Like extends Component {
    constructor () {
        super()
        this.state = {
            isLiked: false
        }
    }
    likedClick = () => {
        // setState的第一種寫(xiě)法
        // this.setState({
        //     isLiked: !this.state.isLiked
        // })
        // 第二種寫(xiě)法是一個(gè)方法车要，可以直接傳上次的狀態(tài)prevState和props
        this.setState((prevState) => {
            console.log(prevState)
            return {
                isLiked: !prevState.isLiked
            }
        }, () => {
            // setState是異步的允粤，想要獲取最新的state要在這個(gè)回調(diào)里獲取
            console.log(this.state)
        })
    }
  render() {
    return (
      <div>
        <span onClick={this.likedClick}>
            {
                this.state.isLiked ? '太菜了！??' : '棒棒噠翼岁！??'
            }
        </span>
      </div>
    )
  }
}
image.png

react事件

  • 如果要修改state里的值需要使用onChange事件(這是采用駝峰命名的)类垫，然后通過(guò)setState方法來(lái)修改值，否則頁(yè)面上不能輸入
// TodoInput/index.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class TodoInput extends Component {
  static propTypes = {
    btnText: PropTypes.string
  }
  static defaultProps = {
    btnText: '添加TODO'
  }
  constructor () {
    super()
    this.state = {
      inputValue: 'xxx'
    }
    // this.addTodo = this.addTodo.bind(this)
  }
  onInputChange = (e) => {
    this.setState({
      inputValue: e.currentTarget.value
    })
  }
addTodo = (id) => {
  console.log(this.state,id)
  }
  render() {
    return (
      <div>
        <input type="text" onChange={this.onInputChange} value={this.state.inputValue}/>
        <button onClick={this.addTodo.bind(this,1234)}>{this.props.btnText}</button>
      </div>
    )
  }
}

// App.js
addItem = (todoTitle) => {
    console.log(todoTitle)
    // this.setState({
    //   // 添加todo的第一個(gè)方法琅坡，這里不能用push悉患，push返回的是數(shù)組的長(zhǎng)度
    //   todos: this.state.todos.concat({
    //     id: Math.random(),
    //     title: todoTitle,
    //     isCompleted: false
    //   })
    // })
    // 第二個(gè)方法,先把數(shù)組復(fù)制一份
    // const newTodos = this.state.todos.slice()
      const newTodos = [...this.state.todos]
    newTodos.push({
        id: Math.random(),
        title: todoTitle,
        isCompleted: false
    })
    this.setState({
      todos: newTodos
    })
  }

react里面通過(guò)ref獲取組件或者dom元素，在使用ref之前要先調(diào)用React.createRef來(lái)創(chuàng)建ref榆俺，要在constructor里創(chuàng)建ref

import React, { Component, createRef } from 'react'
import PropTypes from 'prop-types'
export default class TodoInput extends Component {
  static propTypes = {
    btnText: PropTypes.string
  }
  static defaultProps = {
    btnText: '添加TODO'
  }
  constructor () {
    super()
    this.state = {
      inputValue: ''
    }
    // this.addTodo = this.addTodo.bind(this)
    // 在constructor里創(chuàng)建ref
    this.inputDom = createRef()
  }
  onInputChange = (e) => {
    this.setState({
      inputValue: e.currentTarget.value
    })
  }
  addKeyUp = (e) => {
    if(e.keyCode === 13){
      // console.log(e)
      this.addTodo()
    }
  }
  addTodo = () => {
    if(this.state.inputValue === ''){
      return
    }
    console.log(this.inputDom)
    this.props.addItem(this.state.inputValue)
    this.setState({
      inputValue: ''
    }, () => {
        this.inputDom.current.focus()
    })
  }
  render() {
    return (
      <div>
        <input type="text" onChange={this.onInputChange} onKeyUp={this.addKeyUp} value={this.state.inputValue} ref={this.inputDom}/>
        <button onClick={this.addTodo}>{this.props.btnText}</button>
      </div>
    )
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末售躁，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子茴晋，更是在濱河造成了極大的恐慌陪捷，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,734評(píng)論 6贊 505
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件诺擅，死亡現(xiàn)場(chǎng)離奇詭異市袖，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)烁涌，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門苍碟，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)酒觅，“玉大人，你說(shuō)我怎么就攤上這事微峰〔玻” “怎么了？”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,133評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵县忌，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我继效，道長(zhǎng)症杏，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,532評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任瑞信，我火速辦了婚禮厉颤，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘凡简。我一直安慰自己逼友，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布秤涩。 她就那樣靜靜地躺著帜乞，像睡著了一般。 火紅的嫁衣襯著肌膚如雪筐眷。 梳的紋絲不亂的頭發(fā)上黎烈，一...
    開(kāi)封第一講書(shū)人閱讀 51,462評(píng)論 1贊 302
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音匀谣，去河邊找鬼照棋。 笑死，一個(gè)胖子當(dāng)著我的面吹牛武翎，可吹牛的內(nèi)容都是我干的烈炭。 我是一名探鬼主播，決...
    沈念sama閱讀 40,262評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼宝恶，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼符隙！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起卑惜，我...
    開(kāi)封第一講書(shū)人閱讀 39,153評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤膏执，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后露久，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體更米，經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年毫痕，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了征峦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片迟几。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖栏笆，靈堂內(nèi)的尸體忽然破棺而出类腮，到底是詐尸還是另有隱情，我是刑警寧澤蛉加，帶...
    沈念sama閱讀 35,635評(píng)論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布蚜枢，位于F島的核電站，受9級(jí)特大地震影響针饥，放射性物質(zhì)發(fā)生泄漏厂抽。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3贊 329
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一丁眼、第九天 我趴在偏房一處隱蔽的房頂上張望筷凤。 院中可真熱鬧，春花似錦苞七、人聲如沸藐守。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,855評(píng)論 0贊 22
  • 一樁弒父案蹂风，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)卢厂。三九已至，卻和暖如春硫眨，著一層夾襖步出監(jiān)牢的瞬間足淆，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,983評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工礁阁， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留巧号，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓姥闭，卻偏偏與公主長(zhǎng)得像丹鸿，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子棚品，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2贊 354

推薦閱讀更多精彩內(nèi)容

  • 作為一個(gè)合格的開(kāi)發(fā)者靠欢，不要只滿足于編寫(xiě)了可以運(yùn)行的代碼。而要了解代碼背后的工作原理铜跑；不要只滿足于自己的程序...
    六個(gè)周閱讀 8,448評(píng)論 1贊 33
  • 40门怪、React 什么是React？React 是一個(gè)用于構(gòu)建用戶界面的框架（采用的是MVC模式）：集中處理VIE...
    萌妹撒閱讀 1,016評(píng)論 0贊 1
  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中锅纺。 1. Hello world 這段代碼將一個(gè)一級(jí)標(biāo)題插入到指...
    ryanho84閱讀 6,232評(píng)論 0贊 9
  • 【轉(zhuǎn)】react是一個(gè)js框架掷空，類似于jquery，但是他做了很大的變化，它將利用jsx語(yǔ)法坦弟，將結(jié)構(gòu)（html）和...
    悠哈121閱讀 396評(píng)論 0贊 3
  • 1护锤、什么是react React.js 是一個(gè)幫助你構(gòu)建頁(yè)面 UI 的庫(kù)。React.js 將幫助我們將界面分成了...
    谷子多閱讀 2,557評(píng)論 1贊 13