参考视频教程资料: React劲爆新特性Hooks 重构旅游电商网站火车票PWA : http://www.notescloud.top/goods/detail/1173 What's React？
React 是 facebook 開發的一個 JS 函式庫，負責產生與管理前端的 UI 。它並不算框架。
Why React？
- 用純 JS 在前端產生 HTML （一般來說是在後端產生 HTML 送到前端）
- 使用 Virtual DOM，重繪時效率高
- 自定義
Component，組件化方式，方便開發 - 父子 Component 閒可透過
props通訊，内部可透過state通訊 - 支援
JSX语法/BabelREPL/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
开始步骤：
- 准备一个干净的工作空间，并cd切换到目录下，例如
cd C:\workspace\React - 命令行输入
create-react-app my-app，创建react应用my-app - 经过漫长的安装，看到
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
然后在浏览器中打开
然后就可以看到
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;
