初認識react

reactプロジェクトの作成方法

Facebookのreact作成プロジェクトを参照:Create React Appは少し長い時間待つ可能性があります.

プロジェクトを開始し、npm start.

を使用します.
依存インストールと共通コードセグメント

eslintをインストールしたほうがいいと思います.文法のフォーマットに強制的な要求があります.悪いことに、私は今操作に問題があります.フロントエンドの大神に聞いてから列挙します.

プラグインVS Code ES7 React/Redux/React-Native/JS snippetsをインストールすると、ショートカット//rcc rccp rceなどがたくさんあります.

初探JSX文法
JSX文法は実はとても簡単で、簡単な理解は{}を使って、例を挙げます:

render() {
    //JSX   
    // {}
    let helloWorld = 'yuxi';
    // array
    let arrs = ['a','b','c','d'];
    return (
      
        

             helloWorld,{helloWorld};
        
        

          {arrs.map((e,i) => 
{e}
)}
        
      
    );
  }

{}では、三元演算子、二元演算子を使用することができることに注意してください.ただしif,else,while等は使用できません.
原理単純プローブ
私の理解:

ReactDOM.render(, document.getElementById('root'));

class Appこれが私たちが作成したコンポーネントです

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    //JSX   
    // {}
    let helloWorld = 'yuxi';
    // array
    let arrs = ['a','b','c','d'];
    return (
      
        

             helloWorld,{helloWorld};
        
        

          {arrs.map((e,i) => 
{e}
)}
        
      
    );
  }
}
export default App;

この文の意味は、APPというコンポーネントをrootというノードの下に掛けることです.まず使うことができて、原理についてはゆっくりと時間が長くなってあなたはできて、車を運転することを学ぶように、多くの时あなたはコーチの操作について、先に車を運転して甚だしきに至っては車を作る原理を研究するのではありません.