一、起步

public目录下的index.html就是整个项目的输出(id名一定要的)

<body>
    <div id="root"></div>
</body>

接着src目录里面的，基本上所有的组件都会写在这里，可以先清空掉之前搭建脚手架的文件，自己新建一个index.js。上面那个index.html，也可以清除多余的注释和标签，只留下div那个。那些英文注释我也是看不懂的。

–src
—-index.js

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

ReactDom.render(<div>Hello word!!!!</div>, document.getElementById('root'))

引入React和ReactDOM，下面用到了ReactDom.render。render函数里面有两个参数，一个是传需要在页面上面渲染的dom，另一个就是public文件下面index.html里的那个div标签，通过id获取的。以上就可以在页面上显示出helloworld了。（不截图不截图，公司的电脑被限制了，解不了图图图）

二、组件之间的传值（props）

–src
—index.js
—app.js

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'

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

在这里是index.js 。ReactDOM里面需要在页面上渲染的元素是以组件的形式传进来的。通过import一个app.js进来，然后把其当做标签传入。下面是被引入的app.js中的代码

import React from 'react'
import Home from './Home'

class App extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            text: '我是要传到子组件的app'
        }
    }
    render () {
        return (<Home text={this.state.text}/>)
    }
}

// 将App暴露出来
export default App

以上引入了一个名为Home的子组件。然后把text传到了Home组件中。home组件中的接收：

import React from 'react'

class Home extends React.Component{
    constructor (props) {
        super(props)
        this.state = {}
    }
    render () {
        return (
            <div>
                {this.props.text}
            </div>
        )
    }
}

export default Home

Home子组件中，通过构造函数把从父组件穿过来的参数通过props引进来，通过this.props.text获取

三、路由

终于到路由部分了。我要下班下班啦啦啦啦啦

react （二）

一、起步

二、组件之间的传值（props）

三、路由

猜你喜欢