React教程之使用create-react-app构建你的第一个react应用

雨点打透心脏的1/2处 2022-01-14 12:05 909阅读 0赞

## What’s React？ ##

React 是 facebook 開發的一個 JS 函式庫，負責產生與管理前端的 UI 。它並不算框架。

## Why React？ ##

*  用純 JS 在前端產生 HTML （一般來說是在後端產生 HTML 送到前端）
 *  使用 Virtual DOM，重繪時效率高
 *  自定義 `Component`，`組件化`方式，方便開發
 *  父子 Component 閒可透過 `props` 通訊，内部可透過`state`通訊
 *  支援`JSX` 语法/`Babel` REPL/`ES6`等
 *  只負責 MVC 的 `View` 部份，彈性高，可以跟後端分離，達到即時互動、自動更新的效果
 *  輕量JS `函式庫`，豐富且易移植

## 必要的安装 ##

首先当然需要安装react/react-dom/webpack/webpack/babel等依赖，一次就好，一次到位

> npm install --save react react-dom webpack webpack-dev-server html-webpack-plugin  
> npm install --save --dev babel-loader babel-core babel-preset-react babel-preset-env@next

另外`babel-preset-es2015`这个已经过时了，新的应该是`babel-preset-env@next`

淘宝cnpm,这个不是必须的，但是cnpm比npm来讲，速度快很多

> npm install -g cnpm --registry=https://registry.npm.taobao.org

安装`create-react-app`脚手架，记得有`-g`的

> cnpm install -g create-react-app

## create-react-app ##

`create-react-app` 是一个全局的命令行工具，用于简化并创建一个新的项目。react-scripts 是一个生成的项目所需要的开发依赖。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]  
如果出现以下情况，则证明create-react-app没有安装成功，重新执行`npm install -g create-react-app`。

> create-react-app myapp
    create-react-app : 无法将“create-react-app”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包
    括路径，请确保路径正确，然后再试一次。
    所在位置 行:1 字符: 1
    + create-react-app myapp
    + ~~~~~~~~~~~~~~~~
        + CategoryInfo          : ObjectNotFound: (create-react-app:String) [], CommandNotFoundException
        + FullyQualifiedErrorId : CommandNotFoundException

开始步骤：

1.  准备一个干净的工作空间，并cd切换到目录下，例如`cd C:\workspace\React`
2.  命令行输入`create-react-app my-app`，创建react应用my-app
3.  经过漫长的安装，看到`Success! Created my-app at C:\workspace\React\my-app`等字眼

C:\workspace\React> create-react-app my-app
    
    Creating a new React app in C:\workspace\React\my-app.
    
    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts...
    
    [  ................] | fetchMetadata: sill resolveWithNewModule react-is@16.8.6 checkin[ installable status
    > core-js@2.6.9 postinstall C:\workspace\React\my-app\node_modules\babel-runtime\node_modules\core-js
    > node scripts/postinstall || echo "ignore"
    
    
    > core-js-pure@3.1.3 postinstall C:\workspace\React\my-app\node_modules\core-js-pure
    > node scripts/postinstall || echo "ignore"
    
    + react-dom@16.8.6
    + react-scripts@3.0.1
    + react@16.8.6
    added 1402 packages from 727 contributors in 557.619s
    
    Initialized a git repository.
    
    Success! Created my-app at C:\workspace\React\my-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 my-app
      npm start
    
    Happy hacking!
    PS C:\workspace\React> cd .\my-app\
    PS C:\workspace\React\my-app> ls
    
    
        Directory: C:\workspace\React\my-app
    
    
    Mode                LastWriteTime         Length Name
    ----                -------------         ------ ----
    d-----        2019/6/14     11:18                node_modules
    d-----        2019/6/14     11:18                public
    d-----        2019/6/14     11:18                src
    -a----       1985/10/26     16:15            310 .gitignore
    -a----        2019/6/14     11:18         584347 package-lock.json
    -a----        2019/6/14     11:18            613 package.json
    -a----       1985/10/26     16:15           2881 README.md

## 目录结构 ##

可以看到react的目录结构大致如下：

my-app/
      README.md
      node_modules/
      package.json
      .gitignore
      public/
        favicon.ico
        index.html
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

## 运行React ##

输入

> `npm run start`

然后在浏览器中打开

> [http://localhost:3000][http_localhost_3000]

然后就可以看到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]

## index.js ##

这里作为总控制,把控index页面的js,可以看到这里有几个功能点:

*  引入 React/ReactDOM 等`基本库`
 *  引入`css`样式文件
 *  引入`服务器配置`serviceWorker文件
 *  引入独立`模块`Component,例如App

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: https://bit.ly/CRA-PWA https://blog.csdn.net/moshowgame
    serviceWorker.unregister();

## app.js ##

接下来看app.js,里面主要就是一个设置刚才看到的主界面的一些内容,例如:

*  一个`img`图,因为`import logo from './logo.svg'`,所以可以直接使用`src={logo}`来指定图片地址
 *  一段文字"`Edit src/App.js and save to reload.`"
 *  一些样式,`import './App.css'`,之后可以直接使用`className="App-logo"`来获取`App.css`里面的样式

import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() { 
      return (
        <div className="App">
          <header className="App-header">
            <img src={ logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://blog.csdn.net/moshowgame"
              target="_blank"
              rel="by Moshow K ZHENG"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    
    export default App;

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]   开源项目 ##

[https://github.com/moshowgame/react-study][https_github.com_moshowgame_react-study]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20220114/48d2386e60064b0fba799f9f2e6e25f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20220114/718fe33433594bad90a2752b5f7b55ac.png
[http_localhost_3000]: http://localhost:3000
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20220114/b5d806faa8224089b2791470cfb852f8.png
[https_github.com_moshowgame_react-study]: https://github.com/moshowgame/react-study