Question

我正在使用ReactJS开展我的第一个项目，我需要在一些专业领域上快速上课（因为我可以将他们的文档用于基础知识）：

添加和删除<head>项（样式表，JavaScript文件）。
反应模板（因为大多数网站都有相同的页眉和页脚）。
路由和处理网址的最佳方式。

欢迎任何好的链接和文档。

我试图做的例子。

我在App.js中有以下内容我试图让<Header />打印出来然后我最终不得不在所有内容中添加<div>以使其工作，我相信这不是正确的方法，我用谷歌搜索了4个小时，没有运气，我看到的文档对于初学者来说是非常无益的。

App.js的一部分（下面的完整代码）

 render() {
            const {checked, disabled, indeterminate, status, changeEventCount} = this.state;
            return (
            <div>
            <Header />
               <main>
                <h1>MDC-Web Checkbox - React Example</h1>
                <FormField>
                  <Checkbox id="my-checkbox"
                            labelId="my-checkbox-label"
                            disabled={disabled}
                            indeterminate={indeterminate}
                            toggleChecked={this.toggleChecked.bind(this)}/>
                  <CheckboxLabel id="my-checkbox-label" for="my-checkbox">
                    The checkbox is currently {this.status()}
                  </CheckboxLabel>
                </FormField>
                <div style={{paddingTop: '12px'}}>
                  <button onClick={() => this.setState({indeterminate: true})}>Make Indeterminate</button>
                  <button onClick={() => this.setState({disabled: !disabled})}>Toggle Disabled</button>
                </div>
                <p>{changeEventCount} change events so far</p>
              </main>
              <script src='material-components-web/dist/material-components-web.min.js'></script>
              <script>window.mdc.autoInit();</script>
                )

Header.js

import React, { Component } from 'react';
import 'material-components-web/dist/material-components-web.css';


export default class Header extends Component {


  render() {
    return ( 
            <header className='mdc-toolbar mdc-toolbar--fixed'>
              <div className='mdc-toolbar__row'>
                <section className='mdc-toolbar__section mdc-toolbar__section--align-start'>
                  <span className='mdc-toolbar__title'>Title</span>
                </section>
              </div>
            </header>

            );
  }
}

app.js

/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* eslint-disable */

import React, {PureComponent, PropTypes} from 'react';
import Header from './Header';
import Checkbox from './Checkbox';
import CheckboxLabel from './CheckboxLabel';
import FormField from './FormField';

export default class App extends PureComponent {
  state = {
    checked: false,
    disabled: false,
    indeterminate: false,
    changeEventCount: 0
  }

  toggleChecked(evt) {
    this.setState({
      changeEventCount: this.state.changeEventCount + 1,
      checked: evt.target.checked,
      indeterminate: false
    });
  }

  render() {
    const {checked, disabled, indeterminate, status, changeEventCount} = this.state;
    return (
    <div>
    <Header />
       <main>
        <h1>MDC-Web Checkbox - React Example</h1>
        <FormField>
          <Checkbox id="my-checkbox"
                    labelId="my-checkbox-label"
                    disabled={disabled}
                    indeterminate={indeterminate}
                    toggleChecked={this.toggleChecked.bind(this)}/>
          <CheckboxLabel id="my-checkbox-label" for="my-checkbox">
            The checkbox is currently {this.status()}
          </CheckboxLabel>
        </FormField>
        <div style={{paddingTop: '12px'}}>
          <button onClick={() => this.setState({indeterminate: true})}>Make Indeterminate</button>
          <button onClick={() => this.setState({disabled: !disabled})}>Toggle Disabled</button>
        </div>
        <p>{changeEventCount} change events so far</p>
      </main>
      <script src='material-components-web/dist/material-components-web.min.js'></script>
      <script>window.mdc.autoInit();</script>
        </div>
    );
  }

  status() {
    if (this.state.indeterminate) {
      return 'indeterminate';
    }
    return this.state.checked ? 'checked' : 'unchecked';
  }
}

index.js

/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* eslint-disable */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

寻求易于理解的ReactJS文档

0 个答案: