react学习4-脚手架create-react-app的基本使用

脚手架create-react-app 的基本使用

使用脚手架 create-react-app 可以快速生成一个项目，并且提供友好的开发调试环境。

脚手架用法一 ：

• 安装脚手架包 create-react-app (全局安装)

  npm install create-react-app -g
  

• 使用命令创建项目

  • --use-npm 的作用是使用npm管理依赖包
  • 默认情况，如果本地安装了yarn，那么会默认采用yarn进行依赖包管理
  • 如果默认没有安装yarn，那么默认使用npm管理依赖包

  create-react-app mydemo --use-npm
  

• 进入到项目的根路径

  cd mydemo
  

• 运行项目

  npm start
  

• 淘宝镜像配置

  • 安装nrm包（全局安装）
  • nrm ls 查看当前的镜像（*号所在位置就是当前使用的镜像）
  • nrm use taobao 切换镜像

脚手架用法二：

• 使用npx命令创建项目

• npx是Node.js特定版本之后自动安装的一个工具，方便执行本地npm命令

• npx 默认会在当前项目下的 node_modules下面查找要执行的命令

• 如果没有找到，就自动帮你下载好，然后执行，执行完成后将其删除

  .\node_modules\.bin\webpack --version
  # 等效于
  npx webpack --version
  

• 基于npx创建项目的步骤

  npx create-react-app my-app --use-npm
  

脚手架项目结构分析

• 入口文件：index.js

// 导入核心模块
import React from 'react';
import ReactDOM from 'react-dom';

// 全局样式
import './index.css';

// 入口组件（组件的首字母必须大写）
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

• 入口组件

// 必须导入React模块：JSX依赖于该模块
import React from 'react';

// 局部样式
import './App.css';
// 组件的定义
function App() {
  return (
    <div>
      测试
    </div>
  );
}

export default App;

• 注意：样式需要导入

import './App.css'