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

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 是一个生成的项目所需要的开发依赖。

如果出现以下情况，则证明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

运行React

输入

npm run start

然后在浏览器中打开

http://localhost:3000

然后就可以看到

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;

开源项目

https://github.com/moshowgame/react-study