阅读 280

React 零基础入坑

1、前提基础

  • 学习react之前需要掌握基本的js、css、html基础知识
  • node.js、git、webpack基础知识
  • 对jsx语法(js的一种语法糖)有一定的了解
  • react官方文档

2、开发环境

  1. 安装node.js(要求版本:node>=6,npm>=5.2),直接去node官网下载安装包即可,安装完成以后可以打开cmd/git,通过node -v/npm -v 查看版本。
  2. 全局安装webpack
npm install -g webpack
复制代码
  1. 安装git(用于代码管理),直接百度下载安装包即可。

3、创建一个新的 React APP

  1. 这里使用官方推荐的脚手架(Create React App)来初始化项目。首先全局安装create-react-app
npm install -g create-react-app
复制代码
  1. 初始化一个项目
npx create-react-app my-app (npxs是npm 5.2+ 附带的包运行工具)
cd my-app
npm start
复制代码

到此我们的react项目就搭建起来了

3. 打开package.json,我们发现很多安装的依赖并没有显示在package.json中

npm run eject
复制代码

将会把所有内建的配置暴露出来。

4、开始开发

  • 规划项目结构,在src下新建pages,layout,components文件夹,将组件划分为页面组件、布局组件、功能组件。
  • 安装react-router, 这里我们使用react-router-dom(react-router-dom会安装自己的依赖,其中就包括react-router)
cnpm i -S react-router-dom
复制代码
  • 现在我们来完成一个简单的布局。如下图所示,它由一个公共的头部、底部组件和主体部分组成:
  1. 在conponents下创建common文件夹,分别建立header和footer组件,在pages下创建home组件。在src下创建router文件夹,创建路由文件。
  2. 启动项目之后,发现页面直接重定向到了‘/home’,和我们效果图看到的一样。
  • less配置,查看webpack.config.js,发现只有scss(sass)的配置,如果你使用的sass,直接安装依赖即可,接下来的部分你可以跳过
const cssRegex = /\.css/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
复制代码
  1. 安装less和less-loader
cnpm i -S less less-loader
复制代码
  1. 修改webpack.config.js
const cssRegex = /\.css/; => const cssRegex = /\.css|less/;
复制代码
在loader配置部分加入:
{
    loader: require.resolve('less-loader')
}
复制代码
  1. 修改我们的css文件为less文件,然后重启项目(这里安装了css处理器,需要重启less样式才能生效)
    审查元素,发现样式已生效。

5、使用ui组件

  • 这里选择使用阿里的:Ant Design
  • 如果你并没有使用yarn run eject命令将内建的配置暴露出来,那么你可以选择按照文档中推荐的方式(config-overrides.js)来扩展配置。
  • 这里我们将介绍暴露出配置文件后如何配置
  1. 安装antd
yarn add antd 或者 npm install -S antd
复制代码
  1. 在页面中使用,如在home组件中使用按钮
    import React, { Component } from 'react';
    import './index.less';
+   import Button from 'antd/lib/button';
    export default class Home extends Component {
      render() {
        return (
          <div className="home_page container">
            <h1 className="home_page_title">this is a home pages</h1>
            <div className="main_content">
        +     <Button type="primary">Login</Button>
        +     <Button>go to console</Button>
            </div>
          </div>
        )
      }
    }
复制代码
  1. 这时发现页面上出现了按钮,但是并没有样式。你可以向下面这样在全局css中引入antd.css。但是这会将所有的css文件全部加载,从性能考虑,所以并不推荐。
@import '~antd/dist/antd.css';
复制代码
  1. 按需引用,在webpack.config.js的plugins中加入如下配置项,并修改引用方式
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
复制代码
import Button from 'antd/lib/button'; => import { Button } from 'antd'
复制代码
  1. 重启项目,发现按钮样式已加载。

随笔

  • 由于自己也是个react初学者,过程中可能会存在诸多问题,欢迎指正。
  • 后续将继续更新api、路由鉴权、redux等相关部分。
关注下面的标签,发现更多相似文章
评论