React框架（一）利用码云构建第一个React项目

简介

1. Facebook推出
2. 函数式编程
3. 官网https://reactjs.org/
4. React16之后的版本称之为React Fiber，因底层在事件循环中加入了优先级等概念，可以利用事件循环的一些碎片时间执行一些高优先级的用户交互，提高用户体验
5. 比较：Vue.js提供更多的API，但灵活度低。React.js的灵活性更大一些，有更多实现选择。

1.直接创建React项目

直接创建项目，通过脚手架工具来编码，自动构建一个前端大型项目的开发流程和目录，方便文件的管理，并需要脚手架的编译，才能在浏览器执行。

官方脚手架工具是Creat-react-app，安装步骤：
1.如果你的npm还未安装，则先安装node（官网https://nodejs.org/en/download/，LTS是稳定版本，current是最新版本）。安装好之后在命令行输入：

npm -v
node -v

来查看你的版本（node安装后npm也会安装好）

2.打开官网https://reactjs.org/docs/create-a-new-react-app.html
会有创建一个新的react app的地方，下面有命令行。

npx用于局部安装脚手架工具（具体说明见https://www.jianshu.com/p/a4d2d14f4c0e），在安装npm的时候自动安装了。上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。
$ npx create-react-app my-app该行代码会局部安装该脚手架，并创建一个名为my-app的项目。（全局安装使用$npm install -g create-react-app）
注意：

• 若安装过程中出现警告或错误，可以尝试将电脑连接手机热点再安装。
• 如果create-react-app不是可用的命令，进行系统环境变量的设置，添加C:\Program Files (x86)\nodejs\和C:\Users\xxx\AppData\Roaming\npm。与vue命令无法使用类似，详见 https://blog.csdn.net/weixin_41986726/article/details/83826528
• 如果全局安装某个脚手架工具，则会在C:\Program Files (x86)\nodejs\node_global文件夹下显示。具体见我的另一篇博客：npm安装脚手架工具报错总结
• 在win10专门的命令行工具Windows PowerShell需要使用create-react-app.cmd my-app来创建项目

2. 利用码云创建项目

个人比较喜欢用码云，管理代码比较方便，总不能把所有代码存到硬盘里面。。。一个个找，麻烦一批。。。

创建仓库

1. 进入码云官网：https://gitee.com
2. 点击新建仓库
3. 输入仓库名称（我就写“hello”），选择开发语言
   
4. 进入仓库，复制地址
   
5. 桌面上打开win10的专门的命令行工具Windows PowerShell，依次输入：
   git clone http://xxxxxxx
cd hello
create-react-app.cmd helloworld
cd helloworld
npm run start
6. 即可直接看到默认浏览器中的react项目默认界面

工程目录文件简介

favicon.ico：网站首页标签的小图标文件
index.html：默认的首页
manifest.json：手机端app的快捷方式定义
index.js：所有代码的入口文件，整个程序从该文件逐行执行
App.test.js：自动化测试的文件
package.json：node的包文件

基础文件代码

App.js

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://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
//css文件也可以像js一样被嵌入到文件
// import './index.css';

//自己定义的组件必须以大写字母开头
import App from './App';

//PWA progressive web application 借助网页写手机app应用的功能
//当第一次访问网页时需要联网，之后在断网状态下也可以使用该而网页
import * as serviceWorker from './serviceWorker';

//jsx语法，必须import React from 'react'，否则无法编译
//ReactDOM是第三方模块， render方法把一个组件挂载到dom结点下
// 这句代码使用了自己定义的App组件，也是使用标签形式，jsx语法
ReactDOM.render(<App />, document.getElementById('root'));