react学习

1、安装yarn
NPM（Node Package Manager）作为Node.js的依赖包管理器便应运而生，而YARN则是针对NPM的一些不太优秀的地方设计开发的。

npm install -g yarn --registry=https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
yarn config set disturl https://npm.taobao.org/dist -g

yarn lint 初始化 
yarn install 默认安装依赖
yarn add xxxx 安装某个依赖并保存
yarn global add xxxx  安装某个全局依赖
yarn remove xxxx 移除某个依赖
yarn upgrade xxxx 更新依赖
yarn run 运行指令
yarn serve 开启web服务
yarn build 生成dist文件夹，编译web项目

2、初始化基于ts的项目，可以使用yarn start来启动项目

yarn create react-app react-ts --template=typescript

3、idea中如何启动react项目
点击add configuration->点击±>点击npm->command选择start，点击start就可以启动项目

4、react项目结构

• README：项目的说明文件
  一般看一个陌生的项目先从README入手，里面会详细注明项目需要安装的依赖以及所运行的环境等
• package.json： node包文件，包括项目的一些介绍（如名字、版本号、依赖的第三方包等等）
• node_modules ： 项目依赖的第三方包
• public文件夹：
  index.html：浏览器自动打开的HTML页面
  favico.ico：项目图标
  mainfest.json： wepack打包优化相关
• src文件夹
  index.tsx

// 导入核心模块
import React from 'react';
import ReactDOM from 'react-dom';
// 全局样式
import './index.css';
// 入口组件，组件必须大写
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tsx，这个里面的内容就是浏览器首页显示的内容了

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.tsx</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.tsx ： 整个项目的入口文件，是渲染页面的地方，并且最终渲染的，相当于Vue中的main.js。
registerServiceWorker.ts ： 离线缓存
App.tsx：总组件
App.css：css文件

• yarn.lock：项目依赖的安装包
• .gitignore： 使用 git管理代码的时候，有些文件不希望传到git仓库中，可以定义在这里