一、使用create-react-app初始化React脚手架

1、react脚手架的介绍

2、创建项目并启动

在这里插入图片描述

3、文件目录说明

在这里插入图片描述

二、简化项目文件

（1）删除public和src文件夹里的内容
（2）在public中新建index.html文件

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%表示public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口，用于做移动端网页的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

（3）安装vscode扩展：ES7+ React/Redux/React-Native snippets

（4）在src文件夹下新建App.jsx或者App.js文件，输入快捷命令：rcc

//App.js
//输入rcc 或者rfc ，快捷生成函数式或类式组件
import React, { Component } from 'react';

export default class APP extends Component {
  render() {
    return <div>Hello React</div>;
  }
}

（5）在src文件夹下新建index.js文件

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

（6）在终端使用npm start运行
在这里插入图片描述

0 条评论