react实战项目_React 实战项目环境配置--从0开始

一、初始化项目

1.官方推荐脚手架工具：

npm init react-app my-app
或者
yarn create react-app my-app

如果遇到安装报错？？推荐参考

Tina：react 脚手架搭建项目没有 src 文件还报错？​zhuanlan.zhihu.com

2.在项目目录创建工程

react-app my-app

3.进入安装目录

cd my-app

注意：安装什么包或者运行项目的时候，一定注意目录位置（cd 项目名）。

4.启动目录

npm start

如果用 WebStorm 刚刚创建的 react 项目，对 jsx 语法报错提示，请参考

Tina：WebStorm 刚刚创建的 react 项目，对 jsx 语法报错提示​zhuanlan.zhihu.com

二、项目集成 less（webpack）

1.解包脚手架

npm run eject
或者
yarn eject

我们是直接引入使用 less 的，所以需要它解析 less 语法，这就需要去 webpack 里面配置。

这是刚刚用脚手架搭建好的项目 test 目录结构：

注意：解包脚手架的过程是不可逆的！但它不会影响项目

如果出现 npm ERR! missing script：eject 报错！！

解决办法，可以在 package.json：

"scripts": {
    "start": "scripts start",
    "build": "scripts build",
 //增加一个配置
    "eject": "script eject",
  },

解包之后，再次运行，看是否报错

npm start

我的项目是可以正常运行的

这是解包脚手架后的项目 test 目录结构：

但是，可能有的项目解包可能会出现问题，报错等等！！！

解决办法：

• 删除项目下整个 node_modules 文件夹
• 重新下载 node_modules 文件夹：yarn add start
• 运行：yarn start

三、安装 less 环境

注意：安装什么包或者运行项目的时候，一定注意目录位置（cd 项目名）。

1.安装 React 提供的 yarn 包管理工具：

npm i yarn -g

2.安装 less 环境：

yarn add less less-loader -D

3.把 less 加载器配置到 webpack 配置文件中

在 wepack.config.js 文件里面：

// style files regexes

const cssRegex = /.css$/;
const cssModuleRegex = /.module.css$/;

//加入
const lessModuleRegex = /.less$/

const sassRegex = /.(scss|sass)$/;
const sassModuleRegex = /.module.(scss|sass)$/;

然后，找到这个位置

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // 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 (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),

在后面加一个：

  //less 加载器
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    //暂不配置
                  },
                  'less-loader'
              ),
            },

注意：除了必要的配置修改，千万不要随意动配置文件。

4.测试 less 是否配置成功？

在组件里面新建一个 .less 文件，在引入看效果，比如

body{
  color: yellow;
}

安平：LESS基本语法总结​zhuanlan.zhihu.com

四、目录结构

基本结构

五、重置样式、设置页面高度

项目中初始化样式采用：normalize.css 重置工具

Make browsers render all elements more consistently.​necolas.github.io

normalize.css：一种现代的 HTML5 替代 CSS 重置方法。
使浏览器更一致地渲染所有元素，并符合现代标准。它只针对需要规范化的样式。

安装

npm install normalize.css

src 下的 index.js：

//入口文件

//引入核心组件
import "./pages/App";

// 引入初始化样式
import "normalize.css";

// 引入全局样式
import "./assets/styles/core.less";

登录页面：

import React, {Component} from 'react';
import "../assets/styles/loginPage.less";
import Img from "../assets/images/logo.jpg";

class LoginPage extends Component {
    render() {
        return (
            <div className="login-page">
                {/*登录页面*/}
                {/*1.logo*/}
                <img src={Img} alt=""/>
                {/*2.登录框*/}
                <input value="请输入用户名"/>
            </div>
        );
    }
}

export default LoginPage;

两种方式引入图片：

第一种：

import Img from "../assets/images/logo.jpg";

<img src={Img} alt=""/>   //引入图片多，会很麻烦

第二种：

 <img src={require("../assets/images/logo.jpg")} alt=""/>      //方便，不需要引入

写样式，图标

推荐图标库：

Iconfont-阿里巴巴矢量图标库​www.iconfont.cn

需要先登录，然后看图：

还不会？？看教程

iconfont字体图标的使用方法--超简单! - 全堆栈溢出攻城狮 - 博客园​www.cnblogs.com

然后在项目中粘贴需要的：

然后在项目中引入 css 及图标的名字：

import React, {Component} from 'react';
import "../assets/styles/formInput.less";

import "../assets/fonts/iconfont.css";

class FormInput extends Component {
    render() {
        return (
            <div className="input-group">
                <i className="iconfont icon-shouji"></i>
                <i className="iconfont icon-mima"></i>
                <input type="text"/>
            </div>
        );
    }
}

export default FormInput;

效果就出来了！