从零开始搭建React项目以及项目文件介绍

本文链接：https://blog.csdn.net/weixin_46393552/article/details/106848640

一、项目搭建

首先，还是需要安装有node.js和npm/cnpm。
React官方网站：https://reactjs.org/
直接在需要搭建项目的文件夹目录打开命令行，输入命令，搭建并打开项目。

npx create-react-app my-app
cd my-app

安装依赖。

npm install

或者安装yarn之后，利用yarn安装依赖

npm install -g yarn
yarn install

打开项目

npm start

可选:安装组件

axios 发起请求

npm install axios --save

antd UI组件库

https://ant.design/index-cn

npm install antd --save
npm add antd

组件内引入antd组件：
例如：引入DataPicker这个组件

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

index.js中引入样式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

react-router-dom

npm install -S react-router-dom

二、项目文件的介绍

package.json
存储各种依赖信息,配置介绍。
.gitignore
上传到github的时候忽略的文件。
public/favicon.ico
网站标签上的图标。可以自己生成ico图标文件替换
public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 移动端配置 不搭建移动项目可以删除-->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
    <!-- 主题颜色 可以删除-->
    <!-- <meta name="theme-color" content="#000000" /> -->
    <!-- <meta
      name="description"
      content="Web site created using create-react-app"
    /> -->
    <!-- 此处为页面标签头部的小图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <!-- 涉及PWA这个新技术 不用可删除-->
    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <!--项目页面的名称-->
    <title>React App</title>
  </head>
  <body>
  	<!-- 浏览器对JavaScript不支持的时候，会出现这一句话 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

public/manifest.json
涉及PWA这个新技术不用可删除
src/index.js

// 整个项目的入口
// 只有引入React才能支持jsx语法
import React from 'react';
import ReactDOM from 'react-dom';
// 在js里可以引入css文件，这是用webpack实现的，create-react-app这个脚手架工具底层是依赖webpack实现的
import './index.css';
// APP是指APP.js这个文件
import App from './App';
// 实现PWA的一些功能，不用PWA可以删除  同时下面对serviceWorker的调用也可以删除  src目录下serviceWorker.js也可以删除
import * as serviceWorker from './serviceWorker';
// 把App.js生成的html文本，挂载到 document.getElementById('root')这个元素下，并进行页面渲染
//  <App />    是JSX语法
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  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();

src/index.css
默认的首页的样式。距离浏览器边框为0，规定了一些字体，代码的样式。可以自行更改

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

src/App.js

import React from 'react';
// 引入svg文件，这是项目首页的那个旋转的logo
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    // 项目默认页面的HTML代码，可以清空。
    // 这里也是JSX的语法，正常情况在js里面写html标签，需要带上引号
    <div className="App">
      <header className="App-header">
      // 引用了logo这个变量，生成图片，并在App.css里面对这个图片设置了样式
        <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>
  );
}

// 之前版本写法
// App这个类继承了Component。 其实Component相当于React.Component
// 我们把继承了Component的类就叫做 React组件
/*
import React from 'react';
import { Component } from 'react';
// 其中{ Component }是解构赋值，相当于
// import React from 'react';
// const { Component } = React;
// 所以不用引入Component，直接 React.Component 替代也可以
class App extends Component{
    render() {
        return (
            <div>
                hello React
            </div>
        );
    }
}
*/
export default App;