總結(jié)在學(xué)習(xí)過程中遇到的問題和資料

1. 注釋要用 {/* 這是注釋 */} 注意前后的空格

組件篇

1. 純文本組件

const Comment = ({ text }) => text.replace(':)', '[smile]');

class App extends Component {
  render() {
    return (
      <div>
        <Comment text="Text only components are awesome :)" />
      </div>
    );
  }
}

2. 返回?cái)?shù)組的純文本組件
   元素類型可不相同

const Fruits = () => [
  <li key="1">Pear</li>,
  <li key="2">Weater Melon</li>,
];

class App extends Component {
  render() {
   // 注意返回的是個數(shù)組，減少嵌套層級
    return [
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <Fruits />
      </ul>,
      <div>this is a div</div>,
    ];
  }
}

3. ReactDOM.createPortal(child, container)
   他可以將子組件直接渲染到當(dāng)前容器組件 DOM 結(jié)構(gòu)之外的任意 DOM 節(jié)點(diǎn)中，這將使得開發(fā)對話框，浮層，提示信息等需要打破當(dāng)前 DOM 結(jié)構(gòu)的組件更為方便。例子

資料

https://doc.react-china.org/
翻譯后的官方文檔，學(xué)技術(shù)一定要多看幾遍文檔

React小書
強(qiáng)烈推薦，由淺入深，循序漸進(jìn)

http://reactpatterns.com/
由于react本身 API 比較簡單，貼近原生。通過組件變化產(chǎn)生一系列模式

https://github.com/CompuIves/codesandbox-client
react在線編輯器，方便的分享你的react項(xiàng)目

image.png

https://devhints.io/react

image.png

js.coach
找js包的網(wǎng)站

image.png

視頻

基礎(chǔ)的免費(fèi)，高級的收費(fèi)
https://egghead.io

工具

sublime 支持jsx語法高亮。
不要安裝 sublime-react 那個已被棄用了。
安裝 babel，然后按照上面的教程，完美支持

image.png