前言
- 创建 react项目不用像创建Vue项目那么麻烦;- 我目前也是React刚起步,可能有些创建项目的方式还没接触到,等接触到了再补充上;
 
- 我们直接创建运行命令即可;
一、创建项目
脚手架
create-react-app是一个 创建 React 开发环境的工具,底层由Webpack构建,封装了配置细节,开箱即用;
创建项目命令
            
            
              js
              
              
            
          
          npx create-react-app 项目名称- 运行命令,等待成功,之后按照提示,cd进入项目目录,使用npm start运行项目;
- npx:- NodeJS工具包命令,查找并执行后续的包命令;
 
- create-react-app:- 核心包(固定写法),用于创建 React 项目;
 
二、项目介绍
2.1 清除无用文件
- 
第一次创建的项目,在 src下有很多文件,对目前的我们来说,有用的只有App.js、index.js,其他的文件都可以删除;
- 
删除其他文件之后,项目就会报错,按照报错信息,清除无效引用; 
- 
清除无用文件及无效代码之后,就剩下面两个文件; 
- 
App.js:jsfunction App() { return <div className="App">this is App</div>; } export default App;
- 
index.js:jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
2.2 文件介绍
2.2.1 index 文件
- 项目的入口文件,从这里开始运行;
            
            
              js
              
              
            
          
          // 导入React必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入项目的根组件
import App from './App';
// 把 App 根组件渲染到 id 为 root 的dom节点上
// 哪里有 id=root 的节点?  ===>   public/index.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);2.2.2 App 文件
- 项目的根组件;
            
            
              js
              
              
            
          
          function App() {
    return <div className="App">this is App</div>;
}
export default App;