使用React構建簡單專案步驟(Mac 環境)

1.準備安裝環境

2.create-react-app 工具

3.目錄說明

4.增加一個新的 React元件

5.彈出配置檔案

React是一個 JavaScript語言的工具庫，在這個 JavaScript工具鋪天蓋地的時代，沒 有意外，你需要安裝 Node.js, React 本身並不依賴於 Node.js，但是我們開發中用到的諸 多工具需要 Node.js 的支援 。

在 Node.js 的官網(ψ.org/)可以找到合適的安裝方式，安裝 Node.js 的同 時也就安裝了 npm, npm 是 Node.js 的安裝包管理工具，因為我們不可能自己開發所有功 能，會大量使用現有的安裝包，就需要 npm 的幫助 。

整體流程圖

1.準備安裝環境

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS程式碼部署上的很多問題，常見的使用場景有以下幾種：

•  允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。

• 允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。

• 允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。

brew install node
brew install npm

檢視 npm 是否安裝成功

$ npm -v
 
6.7.0

2.create-react-app 工具

React技術依賴於一個很龐大的技術棧,手動建立很麻煩,所幸,react的創立者提供了一個快速開發 React應用的工具，名叫 create-react-app，這個工具的目的是將開發人員從配置工作中解脫出來，無需過早 關注這些技術枝細節，透過建立一個已經完成基本配置的應用，讓開發者快速開始 React 應用的開發 。

 

create-react-app 是一個透過 npm 釋出的安裝包，在確認 Node.js 和 npm 安裝好之後，

命令列中執行下面的命令安裝 create-react-app:

npm install --global create-react-app

安裝介面:

sysadmindeMacBook-Pro:tmp sysadmin$ npm install --global create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.2.0
updated 1 package in 16.068s
sysadmindeMacBook-Pro:tmp sysadmin$

安裝過程結束之後，你的電腦中就會有 create-react-app這樣一個可以執行的命令，

這個命令會在當前目錄下建立指定引數名的應用目錄 。

create-react-app first_react_app

sysadmindeMacBook-Pro:tmp sysadmin$ create-react-app first_react_app
 
Creating a new React app in /a/tmp/first_react_app.
 
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
Initialized a git repository.
 
Success! Created first_react_app at /a/tmp/first_react_app
Inside that directory, you can run several commands:
 
  npm start
    Starts the development server.
 
  npm run build
    Bundles the app into static files for production.
 
  npm test
    Starts the test runner.
 
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
 
We suggest that you begin by typing:
 
  cd first_react_app
  npm start
 
Happy hacking!

 

這個命令會在當前目錄下建立一個名為 first_react_app 的目錄，在這個目錄中會自 動新增一個應用的框架，

隨後我們只需要在這個框架的基礎上修改檔案就可以開發 React應用，避免了大量的手工配置工作:

在 create-react-app命令一大段文字輸出之後，根據提示，輸入下面的命令,啟動服務:

cd first_react_app
npm start

這個命令會啟動一個開發模式的伺服器，同時也會讓你的瀏覽器自動開啟了一個網 頁，

指向本機地址

 

 

3.目錄說明

在create-react-app專案中有目錄,截圖如下:

create-react-app 給我們自動產生的程式碼，在 first-react-app 目錄下主要包含如下檔案和目錄:

• src/                        --原始碼檔案

• package.json         --依賴原始碼包配置檔案 

• node modules/       --依賴原始碼包目錄

• public/

• README.md

 

我們主要關注 src 目錄中的內容，這個目錄中是所有的原始碼 。

create-react-app所建立的應用的入口是 src/index,js檔案，我們看看中間的內容，程式碼如下:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App />, document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

這個應用所做的事情，只是渲染一個名叫 App 的元件， App 元件在同目錄下的 App. js檔案中定義，

渲染出來的效果就是在網頁首頁中看到的介面。

  4.增加一個新的 React元件

在這裡面我們新增一個能夠計算點選陣列件.名叫 ClickCounter. 

修改 index.js, 新增ClickCounter 程式碼

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ClickCounter from './ClickCounter';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(
<ClickCounter />, 
document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

在 index.js 同級目錄下建立檔案ClickCounter.js

import React, { Component } from 'react';
 
class ClickCounter extends Component {
 
  constructor(props) {
    super(props);
    this.onClickButton = this.onClickButton.bind(this);
    this.state = {
      count: 0
    }
  }
 
  onClickButton() {
    this.setState({count: this.state.count + 1});
  }
 
  render() {
    const counterStyle = {
      margin: '16px'
    }
    return (
      <div style={counterStyle}>
        <button onClick={this.onClickButton}>Click Me</button>
        <div>
          Click Count: <span id="clickCount">{this.state.count}</span>
        </div>
      </div>
    );
  }
}
 
export default ClickCounter;

 

如果你之前使用npm start 沒有關閉的話, 會直接顯示介面,如果關閉了,重新啟動一下就 ok.

效果圖如下:

  5.彈出配置檔案

在 react 中會有一些公共的配置檔案,比如請求後臺的 url 地址等配置引數,

這個時候,需要將隱藏的配置檔案彈出,暴露出來.

npm run eject       // 提示框 輸入 y

sysadmindeMacBook-Pro:first_react_app sysadmin$ npm run eject
 
> first_react_app@0.1.0 eject /a/tmp/first_react_app
> react-scripts eject
 
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
 
? Are you sure you want to eject? This action is permanent. Yes
Ejecting...
 
....................
 
Adding Jest configuration
  Adding Babel preset
 
Running npm install...
removed 1 package and audited 904957 packages in 15.062s
found 0 vulnerabilities
 
Ejected successfully!
 
Staged ejected files for commit.
 
Please consider sharing why you ejected in this survey:
  

這時候就會發現新增的兩個目錄 [config , scripts ]: 在裡面修改配置即可.

 

注意:

        1.彈射成功,再也修改回不去了.

        2.程式碼如果沒提交的話,會報錯哦. 記得提交  git commit -m 'add Clickcounter.js'

原文連結： https://blog.csdn.net/zhanglong_4444/article/details/102579142