前言
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。单单脚手架就有传统创建单页面程序的create-react-app，有进行服务器端渲染的Next.js，还有快速创建网站的Gatsby。那就先从create-react-app开始说起。
特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
安装
create-react-app是react中最简单的创建单页面程序的方式。并且Node >= 6 ，npm >= 5.2
# 全局安装create-react-app $ npm install -g create-react-app # OR $ yarn global add create-react-app # 或 临时安装create-react-app $ npx create-react-app my-app
创建项目
注意:如果安装后创建项目显示： D:\Program Files\nodejs\node_global\create-react-app.ps1，因为在此系统上禁止运行脚本。
- 解决办法：
- 1.win+X键，使用管理员身份运行power shell
- 2.输入命令：set-executionpolicy remotesigned
- 3.输入”Y“,回车，问题解决。
# 创建常规项目 create-react-app my-project # 创建ts项目 create-react-app my-ts-project --scripts-version=react-scripts-ts
启动项目
这样，一个react单页面程序项目就创建好了。启动这个项目，启动之后访问http://localhost:3000/就可以打开项目了。
npm start //或者 yarn start
目录结构
my-app │ .gitignore //git免提交文件配置文件 │ package.json //包管理文件 │ README.md //说明文档 │ yarn.lock //yarn锁定版本文件 │ ├─node_modules //项目依赖 ├─public //公共静态资源文件夹 │ favicon.ico │ index.html │ logo192.png │ logo512.png │ manifest.json │ robots.txt │ └─src //react源代码 App.css App.js //根组件 App.test.js index.css //样式文件 index.js //入口文件 logo.svg //logo文件 serviceWorker.js setupTests.js
集成react-router
要想完成单页面程序的开发，需要在页面中进行页面局部刷新，加载各种子页面。这就就离不开路由。
- 安装路由
$ yarn add react-router-dom --save
- 集成到项目
在App.js中引入，并且使用
import React, { Component } from 'react'; import { BrowserRouter as Router,Route ,Link} from 'react-router-dom' import './App.css'; // 加载组件 import List from './List' import About from './About' class App extends Component { render() { return ( <Router> <div> <h1>App</h1> <ul> <li><Link to="/list">List</Link></li> <li><Link to="/about">About</Link></li> </ul> <hr/> <Route path="/list" component={List} /> <Route path="/about" component={About} /> </div> </Router> ); } } export default App;
期待
React会开设[React从出师到挂帅]专题进行讲解，敬请期待！！！
