React官网

Posted on | In | | 次阅读

官网共14节
package.json:npm install ;npm start

01-setting-up

只能open http：//localhost:8080
package.json中script:{start: }
webpack-dev-server –inline –content-base…
App.js中：

1
2
3
4
5
export default React.createClass ({
	render(){
		return  <.......>
	}
})

02-rendering-a-route

index.js

1
2
3
4
5
//hashHistory不需要服务器配置，在URL生成一个哈希来跟踪状态，在测试或者发布环境中使用
//可写{browerHistory需要服务器的配置,路径为真实URL（API）}
<Router history={hashHistory}>
  <Route path="/about" component={△}>
//import △ from "/modules/..."

03-Navigating-with-link

（1）< div>标签：块状元素
（2）< nav>标签：定义导航链接的部分
role属性：本意是增强属性，role=”form”告诉赋值设备这个元素扮演的角色
（3）webpack.config.js配置

1
2
3
module.exports = {
	entry: './index.js' //入口文件
}

04-nested-routes-practic

改变现实位置->显示在同一页面下部

05-active-links

大部分links不需是active，通常主要是导航链接需active
定义activeClassName或activeStyle
（1）inline-style
在<Link中定义activeStyle,定义不点击时属性
（2）activeClassName=”active”进入任何一个URL都会激活/的active
导航链接：定义Nav Links，生成NavLink.js <Link active……:始终都是active，并非点击后不active

06-params URL参数

  1. repos/reactjs/react-router
    -> repos/:userName/:repoName (route path)
    (:userName为URL参数)
  2. 解析后作为变量被路由组件使用 this.props.params.userName this.props.params[name]
  3. path属性:指定路由的匹配规则
    访问index/messages/:id
    1
    2
    3
    <Inbox>
      <Message/>
    </Inbox>

(1)

1
2
<Route path="inbox" component={Inbox}>
  <Route path="message/:id" component={Message}

(2)

1
2
<Route 
  <Route path="inbox/message/:id"

08-index-links

<IndexRoute component={Home} 显式指定Home是根路由的子组件，即默认情况下加载的子组件，/是一切的子组件
使用IndexLink，修改问题，在其他界面Index route也被激活（使用onlyActiveOnIndex={true}来标记）

09-brower History

修改hashHistory -> browerHistory
刷新出错：修改package.json
“start”:”webpack-dev-server –inline” –content-base. –history-api-fallback