React.js学习初探02

知识点
1、介绍
2、开发环境搭建
3、项目目录介绍
4、react组件
5、react中基础JSX语法

1、介绍

React JS ：用react语法编写网页交互效果
React Native：用react语法编写原生APP应用
React VR（360）：在react基础上开发VR或全景应用

简介：Facebook推出、2013年开源 、函数式编程 、使用人数最多的前端框架 、健全的文档与完善的社区、React Fiber（指React16版本或React16版本的底层实现，因为react底层在事件循环过程中加入了优先级的概念，可以利用时间循环的碎片时间，执行一些高优先级的用户交互，提高用户体验）

ReactJS和VueJS对比
1、react.js的灵活性更大，对于处理一些复杂业务时，技术方案有更多的选择；
2、vue.js拥有更丰富的API，实现功能会更简单，但由于API多，其灵活性会受到限制；

复杂度高优选react.js，面向用户复杂度低选vue.js。

2、开发环境搭建

具体操作内容，查看 react项目搭建和react devtools安装（https://blog.youkuaiyun.com/weixin_36985768/article/details/89355863）

安装node.js — 打开cmd — 输入npm install -g create-react-app 和 create-react-app learn-react — 输入cd learn-react 和 npm start — 打开浏览器http://localhost:3000/可查看项目页面

3、项目目录介绍

package-lock.json：记录项目依赖安装包的版本号限制。
README.md：记录项目的说明，可删除全部代码，自己使用markdown语法进行记录项目的相关信息。
package.json：记录一些项目介绍，包括项目名、版本号、依赖第三方包、可调用命令，该文件使得项目成为一个node包。
.gitignore：使用git管理代码时，对于不需要上传的文件可以定义到此文件上。
node_modules：存放一些第三方模块。
favicon.ico：用于浏览器最顶的标签页的左边小icon。
index.html：项目首页的html模板，其中<noscript>you need to enable JavaScript to run this app.</noscript>标签容错代码，当用户将浏览器的javascript内容禁用了，提示用户开启网页javascript适配项，即允许网页去加载javascript。
src：存放所有源代码。
index.js：

• 所有代码的入口，css文件可以像模块一样被引入js import './index.css';；
• import App from './App';脚手架会自动补全./App.js，优先寻找js文件；
• import * as serviceWorker from './serviceWorker';，先了解一个概念PWA（progressive web application）通过写网页的形式，写一些APP应用。实现效果，假设引用了 serviceWorker，写了一个网页，将网页上线到https协议的服务器上，联网后访问页面可查看，断网后再次访问依然可以查看网页。总之，其作用为：1）网络代理，转发请求，伪造响应；2）离线缓存；3）消息推送；4）后台消息传递。其先决条件，只在 https 环境中运行，防止有人劫持链接。
  具体可参考：https://blog.youkuaiyun.com/xiangzhihong8/article/details/55225829
• serviceWorker.unregister();不注册serviceWorker，可参考serviceWorkerAPI文档。

App.js：组件文件
App.test.js：自动化的测试文件
App.css 、index.css：样式文件
manifest.json：定义网页当作app使用（即使用PWA）时，可以定义桌面快捷方式，可以在icons定义快捷方式的图标样式、网址等。

4、react组件

App.js （App是一个组件，以下是一个组件模板）

import React from 'react'; //写法一
// import React, { Component } from 'react';//写法二
//等价于
//import React from 'react';
//const Component = React.Component;
import logo from './logo.svg';
import './App.css';

//写法一：
function App() {
  return (
  //== JSX语法 ==
    <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>
  );
}

//写法二：
// class App extends Component{
//   render(){
//     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';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//== 将APP组件挂载在到id="root"的dom节点下 ==
//== <App />使用了JSX语法，必须引入react ==
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
serviceWorker.unregister();

5、react中基础JSX语法

 //== JSX语法 ==
    <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>

1. 区别js语法，写在js文件不需要加引号；
2. 使用自定义的组件，标签首字母要大写，比如<App />