react小白搭建项目

react项目搭建

1.在命令行全局安装react：

npm i -g create-react-app

2.打开你想要放项目的文件夹，在地址栏打cmd，回车打开cmd命令行，运行以下命令：

create-react-app XXX

注意，上面的XXX是你要新建的项目的项目名。这里等待的时间可能比较长，耐心等待构建成功就好。

3.新建项目成功后，你可以cd到新建的目录中，然后运行项目：

cd XXX
npm run start

4.在XXX目录下右击空白地方，选择vscode打开vscode。然后来到src目录下，删除多余的文件和代码（这里的文件全部都是可以删除的，react官方也建议我们全部删除，然后自己新建自己要的文件）。这里有一点要注意的，index.js这是js的入口文件，名字是固定的如果你删除了index.js，你就要重新在新增一个index.js ，不然程序找不到入口。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

我这里是保留了index.js，然后代码只保留这些。业务代码全部放到了App根组件去了，index.js可以引入一些全局样式和路由的根节点。其他的尽量别放这里，保持主入口文件的清爽。

项目中踩过的坑

1.react路由问题：

• react浏览器一般用react-router-dom，react-router包含了react-native的路由代码在里面。我一开始安装的是react-router，后来看别人的文章才发现这两个用法不一样。

• react-router-dom的6.x和6.x以前的版本用法也不一样，网上很多文章其实是6.x以前的版本。6.x以后的用法是这样的：

  /**  app.js  */
  import React from "react";
  import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
  import Home from "./views/home/home";
  import Search from "./views/search/search"
  import Add from "./views/add/add"
  import Me from "./views/me/me"
  import GoodsList from "./views/goodsList/goodsList";
  import NavBar from "./components/navBar/index";
   
  class App extends React.Component{
    render () {
      return (
        <Router>
          <Routes>
            <Route path="/" element={<Home></Home>}></Route>
            <Route path="/search" element={<Search />}></Route>
            <Route path="/add" element={<Add />}></Route>
            <Route path="/goodsList" element={<GoodsList />}></Route>
            <Route path="/me" element={<Me />}></Route>
          </Routes>
          <NavBar></NavBar>
        </Router>
      )
    }
  }
  
  export default App;
  
  
  /**  NavBar  */
  import React from "react";
  import { Link } from "react-router-dom";
  import "./navBar.less";
  
  class NavBar extends React.Component {
    state = {
      navList: [{
        navName: "主页",
        path: "/",
        icon: "assets/images/icon/home.png"
      }, {
        navName: "查找",
        path: "/search",
        icon: "assets/images/icon/search.png"
      }, {
        navName: "上传食谱",
        path: "/add",
        icon: "assets/images/icon/addto.png"
      }, {
        navName: "购物单",
        path: "/goodsList",
        icon: "assets/images/icon/goods-list.png"
      }, {
        navName: "我的主页",
        path: "/me",
        icon: "assets/images/icon/me.png"
      }]
    }
    
    // history = useNavigate();
  
    linkTo = (path) => {
      // this.history.push(path);
    }
  
    render() {
      return (
        <div className="nav-bar">
          {this.state.navList.map(item => {
            return (
              <div 
                className="nav-item" 
                key={item.navName}>
                  <Link to={item.path}>
                  <img src={require("../../" + item.icon)} alt="" />
                  <p>{item.navName}</p>
                  </Link>
                
              </div>
            )
          })}
          
        </div>
      )
    }
  }
  
  export default NavBar;
  

  在这里遇到几个坑，我查文档的时候，查的是v5的版本，但我安装的是v6.3.0的版本。v6版本的使用上，Route必须要用Routes包裹起来，而且Routes里面必须要是Route；Route的组件由“component”改为“element”；“useHistory”改成了“useNavigate”，useNavigate在class组件中不能执行，否则会报错，这个问题对于react小白来说太高深，我也没有深究是什么原因。

• react是支持sass的，但不知道less。在一开始我是用sass作为项目的预编译语言的，但在我用ant design的时候，ant design好像只能使用less，所以我趁着scss文件没几个的时候，赶紧改成了用less。react不支持less，所以只能自己配置。

  /**  安装less  */
  npm install less-loader less --save
  
  /**  显示react配置，该步骤不可逆  */
  npm run eject
  
  /**  配置less  */
  /**  找到根目录下的config/webpack.config.js, 在该文件中找到下面这几行代码  */
  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  
  /**  在这几行代码下面添加下面这两行代码  */
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  
  /**  在文件中找到下面这段配置sass的代码  */
  {
      test: sassModuleRegex,
          use: getStyleLoaders(
              {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                  modules: {
                      mode: 'local',
                      getLocalIdent: getCSSModuleLocalIdent,
                  },
              },
              'sass-loader'
          ),
  },
  
  /**  在这段代码下面添加下面这段代码  */
  {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
          {
              importLoaders: 2,
              sourceMap: isEnvProduction && shouldUseSourceMap,
          },
          'less-loader'
      ),
      // Don't consider CSS imports dead code even if the
      // containing package claims to have no side effects.
      // Remove this when webpack adds a warning or an error for this.
      // See https://github.com/webpack/webpack/issues/6571
      sideEffects: true,
  },
  // Adds support for CSS Modules, but using SASS
  // using the extension .module.scss or .module.sass
  {
      test: lessModuleRegex,
      use: getStyleLoaders(
          {
              importLoaders: 2,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: true,
              getLocalIdent: getCSSModuleLocalIdent,
          },
          'less-loader'
      ),
  },
  

  好了，配置到这里就大功告成了。不过我在import ant design css样式的时候报错了，一开始还以为是less没安装成功，百度了一下才知道要引入“antd/dist/antd.min.css”而不是“antd/dist/antd.css”

• react使用图片一般有3种方法：import、require、src放http路径。我用require方法的时候遇到一个问题。我在require方法里面放一个变量，图片没有显示出来。

  <img src={require(item.icon)} alt="" />
  

  一查才知道，原来react中，require里只能放字符串，不能用变量。不过可以用个取巧的办法，就是在require里把变量和字符串拼接一下。用空字符和变量直接拼接也是不行的。

  {/** 这种方法可以 */}
  <img src={require("../../" + item.icon)} alt="" />
  {/** 这种方法不行 */}
  <img src={require("" + item.icon)} alt="" />
  

• a标签没有href属性或者href属性的值是空的和img标签没有alt属性都会报警告，但不影响执行。

以上是本人----一个react小白的一些磕磕碰碰的经历，如果有什么不对，欢迎各位大佬指正！