Reactクイックハンド-03足場作成プロジェクトはすべてコンポーネントです

目次

01前言

02開発環境構築

03足場作成項目すべてコンポーネント

04基礎特性JSX、Props、State、Lifecycle、Event、Style

05コンポーネントレンダリング制御

06容器組立体、展示組立体

07フロントエンドルーティングreact-router

08状態管理react-redux

09データ要求fetch

属性タイプ検査prop-types

Reactクイックハンド-03足場作成プロジェクトはすべてコンポーネントです
ターゲット

足場によるプロジェクト作成

運行項目

締結プロジェクト構造

は、コンポーネント

の作成に着手する.
プロジェクトの作成
最初は足場を使うことをお勧めします.勉強を始めたばかりの頃からWebpack Babelを振り回して自分で運行環境を構成していました.それから、知識を補充しなければならないことに気づきました.それから、私が最初はReactを走るためだったことを忘れました.
本稿ではnpmに基づいて構築された環境について議論し,ブラウザで直接実行する場合はes 5で直接書く必要があり,No者は互換性の問題に直面する.
次は私たちの本題を始めます!
1.足場の取り付け

cnpm install -g create-react-app

npm については、前編をご覧ください
2.足場プログラムの実行

cd ~/Documents/labs
create-react-app reactjs-example

私はlabsディレクトリを建てて、いろいろなプログラムをテストして、このようにあなたのディスクディレクトリを混乱させません.
ビデオ
3.プロジェクトの実行

cd reactjs-example
npm start

ビデオ
ブラウザを開く
このきれいなページを見て、みんなは安心して、環境はすべて正常です
ディレクトリ構造

.
├── README.md                                 |     
├── build                                     |     
├── package.json                              | npm   
├── public                                    |     
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src                                       |   
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js

私たちのほとんどの内容はsrcで完成しました
簡単なことを書き始めますhttp://localhost:3000/ファイルの編集

import React, {Component} from 'react'
const Element1 = () => 
  1 -   
export default Element1

出力:app.js3でいいから、自分でやってみてください.
コンポーネントとして使用できるjsオブジェクトは、次のようになります.
1.定数コンポーネント

const Element1 = () => 
  1 -   

2.変数コンポーネント

let Element2 = () => 
  2 -   

3.es 5関数コンポーネント

function Element3() {
  return 
  3 - es5   
}

4.es 6矢印関数コンポーネント

let Element4 = () => {
  return 
  4 - es6     
}

5. React.Componentクラスコンポーネント

class Element5 extends Component {
  render() {
    return 
  5 - React.Component    
  }
}

Es 6クラスはコンポーネントが重要ではありません!

class Element6 {
  render() {
    return 
  6 - es6 class    
  }
}

運転後にエラーを報告!
codepenデバッグコードの使用
codepen.ioは良いオンラインデバッグコードプラットフォームで、私のcodepenです.io/ducafecat/
本明細書コード 1 - https://codepen.io/ducafecat/...
プロジェクトコンパイル

コンパイル

を実行

cd reactjs-example
npm run build

実行に成功するとcodepenディレクトリが生成され、あなたのサーバに直接置くと表示されます.
ビデオ

ローカルで/buildを開くと、デフォルトではbuild/index.htmlローカル許可

を変更するため、リソースファイルが見つかりません.
まずテンプレートを開けてみましょう

  
    ...
    
    

この/はグローバル変数です
コンパイル命令はこう書きます

- Windows
set PUBLIC_URL=./ && npm run build

- macOS
PUBLIC_URL=./ npm run build

%PUBLIC_URL%を再開

  
  ...
  
  
  
  

置換完了!
本文コード

reactjs-example/1-introducing.js

リファレンス

Create React App

Git create-react-app

react-scripts