国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React.js組件化開發第一步(框架搭建)

Betta / 489人閱讀

摘要：開始前安裝安裝安裝安裝完成后將鏡像替換成國內的安裝查看安裝版本項目初始化命令行切到需要創建項目的目錄內然后執行是項目的名稱也是文件夾的名稱命令行切到剛創建的項目運行項目執行以下命令會自動打開瀏覽器并防問初始化生成

開始前

安裝 node.js;

安裝 cnpm;

安裝 yarn;
安裝完成yarn后, 將鏡像替換成國內的:

$ yarn config set registry "https://registry.npm.taobao.org"

安裝 create-react-app:

$ sudo cnpm install -g create-react-app

// 查看安裝版本
$ create-react-app --version
1.3.3

項目初始化

命令行切到需要創建項目的目錄內, 然后執行:

// my-app 是項目的名稱, 也是文件夾的名稱
$ create-react-app my-app

// 命令行切到剛創建的項目
$ cd my-app

// 運行項目
// 執行以下命令會自動打開瀏覽器, 并防問 http://localhost:3000/
$ yarn run start

初始化生成的文件先不管, 做項目還是得好好的分目錄的喲, 接下來安裝react-router

因為, 是在瀏覽器內運行的, 所以安裝react-router-dom; 命令行切到剛創建的項目目錄內, 然后執行安裝:

$ yarn add react-router-dom
// 我這里安裝的是 ^4.1.2 版本的

好了, 路由也有了, 現在可以開始寫項目啦.

開始上路

在src目錄內創建一個comonents目錄, 用來放組件;

創建我們自己的首頁: 在components目錄內創建一個Home目錄, 然后再Home目錄內創建一個Home.js, 寫入以下內容:

// 組件必須先 import 進 react;
import React from "react";

const Home = () => (
  

    
這是首頁

  

);

export default Home;

創建about頁面: 在components目錄內創建一個About目錄, 然后再About目錄內創建一個About.js, 寫入以下內容:

import About from "react";

const About = () => (
  

    
這是關于頁

  

);

export default About;

現在我們有兩個組件了, 但是還沒辦法在瀏覽器內防問, 接下來創建路由:
先清空src/App.js內的內容, 然后寫入以下內容:

import React from "react";
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";
import Home from "./components/Home/Home";
import About from "./components/About/About";

const App = () => (
  
    

      
      
    

  
);

export default App;

現在命令行切到項目根目錄, 執行yarn run start啟動項目, 會自動在瀏覽器內防問 http://localhost:3000/, 這就是我們的 首頁 組件喲, 可以手動修改url防問 關于頁(http://localhost:3000/about) 組件.

公共組件

我們創建了兩個組件, 并且都有自己的獨立路由, 但是要防問需要手動輸入, 太麻煩啦, 那我們可以創建一個 導航 組件:
在 components 目錄下創建一個 Common 文件夾并創建 NavBar.js 內容如下:

import React from "react";
import {
  Link,
} from "react-router-dom";

const NavBar = (props) => (
  
    
    
  • Home
    • 
    
  • About
    • 
    
  • 來源于: { props.title }
    • 
  

);

export default NavBar;

現在我們有一個公共組件了, 接下來把它放到 Home 和 About 組件內:
Home 內容如下:

import React from "react";
import NavBar from "../Common/NavBar";

const Home = () => (
  

    
    
這是首頁

  

);

export default Home;

About 內容如下:

import React from "react";
import NavBar from "../Common/NavBar";

const About = () => (
  

    
    
這是關于頁

  

);

export default About;

現在命令行切到項目根目錄, 執行yarn run start啟動項目, 在瀏覽器內查看效果;

創建一個列表

雖然, 我們現在有一個組件了, 但是內容都特別單調, 接下來創建一個列表的組件:
在 components 目錄下創建一個 List 文件夾并創建 List.js 內容如下:

import React from "react";
import NavBar from "../Common/NavBar";

const List = () => {
  const data = [{
    name: "小白",
    age: 5
  }, {
    name: "大黃",
    age: 3
  }];

  const dataDom = [
    
  • 1號
    • ,
    
  • 2號
    • 
  ];

  return (
    
    
      
      
      
        {
          data.map((item, index) => (
            
    • 
              名字:
              {item.name}
              大小:
              {item.age}
            
      • 
          ))
        }
        {
          dataDom
        }
      
    
    
    
  );
};

export default List;

    創建完成后, 修改 src/App.js 將我們的列表組件添加到路由中:

    import React from "react";
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";
import Home from "./components/Home/Home";
import About from "./components/About/About";
import List from "./components/List/List";

const App = () => (
  
    
    
      
      
      
    
    
      
);

export default App;

    修改 src/components/Common/NavBar.js:

    import React from "react";
import {
  Link,
} from "react-router-dom";

const NavBar = (props) => (
  
      
    
    • Home
      • 
    
    • About
      • 
    
    • List
      • 
    
    • 來源于: {props.title}
      • 
  
    
);

export default NavBar;

    現在命令行切到項目根目錄, 執行yarn run start啟動項目, 在瀏覽器內查看效果;

    第一步就先到這里啦: 源碼
    React.js組件化開發第二步(添加樣式及數據請求)

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84606.html

    相關文章

    • React.js組件化開發第二步(添加樣式及數據請求)

      摘要：第一步主要說了一下框架的搭建及組件與路由的創建接下來主要是樣式的添加及從后臺獲取數據添加樣式美化頁面化美化一下我們的公共組件在目錄下添加樣式要應用當然還必須得在組件中引用才行的喲修改來源于當然也可以開添加 第一步主要說了一下框架的搭建及組件與路由的創建; 接下來主要是樣式的添加及從后臺獲取數據: 添加樣式美化頁面 化美化一下我們的公共組件: 在 /src/components/Co...

      mengera88 評論0 收藏0

    • 前端每周清單半年盤點之 React 與 ReactNative 篇

      摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

      Barry_Ng 評論0 收藏0

    • React+webpack+Antd從0到1開發一個todoMvc

      摘要：在裝載組件之前調用會組件的構造函數。當實現子類的構造函數時，應該在任何其他語句之前調用設置初始狀態綁定鍵盤回車事件，添加新任務修改狀態值，每次修改以后，自動調用方法，再次渲染組件?？梢酝ㄟ^直接安裝到項目中，使用或進行引用。 首先我們看一下我們完成后的最終形態：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...

      sanyang 評論0 收藏0

    • 大前端2018現在上車還還得及么

      摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。 第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

      stormgens 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <