一 简介
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。
二 环境安装
1. 网页测试
单网页测试
使用 React 的网页源码，结构大致如下。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2.使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目：
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
执行结果
E:\webstrom>npm install -g create-react-app
C:\Users\Yang\AppData\Roaming\npm\create-react-app -> C:\Users\Yang\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@1.5.2
added 67 packages in 137.745s
E:\webstrom>create-react-app my-app
Creating a new React app in E:\webstrom\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\webstrom\my-app\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
+ react-dom@16.4.0
+ react@16.4.0
+ react-scripts@1.1.4
added 1319 packages in 261.101s
Success! Created my-app at E:\webstrom\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!
E:\webstrom>cd my-app
E:\webstrom\my-app>npm start
> my-app@0.1.0 start E:\webstrom\my-app
> react-scripts start
Starting the development server...
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000/
On Your Network: http://10.22.27.207:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
在浏览器中打开 http://localhost:3000/ ，结果如下图所示：
react
项目目录结构
目录结构
尝试修改 src/App.js 文件代码：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Hello World and React</h1>
</header>
<p className="App-intro">
你可以在<code>src/App.js</code> 文件修改。
</p>
</div>
);
}
}
export default App;
3. 总结
- React 可以在浏览器运行，也可以在服务器运行。
- 运行在浏览器参考方法一，运行服务器参考方法二
- 服务器的用法与浏览器差别不大
网友评论