React开发-公司内部

最新推荐文章于 2024-02-01 11:44:50 发布
最新推荐文章于 2024-02-01 11:44:50 发布
阅读量2.3k 收藏 4
点赞数 3
分类专栏： react 文章标签： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h8800830/article/details/79541548
版权

React开发

一. Node.js开发环境的搭建及配置

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

  1. 下载安装和配置

    1. 下载安装

      • 下载：http://nodejs.cn/download/

      • 安装成功后，打开CMD窗口，键入

        node -v

      • 如果提示Node命令不存在，请手动修改环境变量，将nodejs安装目录添加至path目录

    2. 包管理工具
      常用的有3种

      • npm Node自带，速度较慢
      • yarn 推荐使用，速度快。
      • cnpm 淘宝弄得

    3. 配置

      • 设置代理（NPM默认代理很卡，需设置为淘宝镜像）

        npm config set registry https://registry.npm.taobao.org

      • 安装yarn模块（强烈推荐）,-g 表示全局模块

        npm install yarn -g

    4. 常用的命令

      • 安装模块

        npm install <模块名> <-g> <–save或者–save-dev>
        yarn add <模块名> <–save或者–save-dev>

      • 卸载模块

        npm uninstall <模块名> <-g>
        yarn remove <模块名>

  2. 开始使用Node

    1. 常见第一个Node项目

      在D盘创建一个文件夹webapp，通过命令行创建webapp项目

      D:\webapp>npm init -y

      项目创建成功后，目录中多出了一个package.json文件

    2. 配置文件package.json

      {
  "name": "webapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
      • name：表示项目名称
      • version：版本号
      • description：描述
      • main：加载时的入口文件,当你把项目分享给别人引用时，就是别人导入的模块。

      • scripts：脚本。

        命令行键入 npm test 等同于键入 echo “Error: no test specified” && exit 1

      • dependencies：依赖的模块

      • devDependencies：开发环境依赖的模块
      • license：开源协议

      更多：http://blog.csdn.net/woxueliuyun/article/details/39294375

二、React开发

React是用于构建用户界面的 JavaScript 库。
官网：https://doc.react-china.org/

  1. 构建第一个React项目

    1. 添加全局模块create-react-app（官方项目模板）

      npm install -g create-react-app

    2. 创建React项目，名为webapp

      D:>create-react-app my-app –scripts-version=react-scripts-ts

    3. 运行

      D:\webapp>yarn start

    运行成功后，浏览器会自动打开该项目。

  2. 简单分析官方的项目模板里的内容

    1. 目录结构
      • node_modules目录：存放的是项目依赖的模块（包括dependencies和devDependencies）
        • @type目录：typescript类型文件（有些模块源码不是用typescript写的，因此需要额外的添加类型文件）
        • script目录：带有script字眼的目录，通常是封装好的命令脚本。
        • 其它：引入的模块
      • public目录：静态文件或者图片。
        • html文件，React会通过Js代码将项目添加到id为root的div下
        • 可以新增一个css文件，进行全局样式的配置
      • src目录：我们的项目
        • 项目入口文件是index.tsx
        • registerServiceWorker.ts是端口服务配置文件（涉及到NodeJs的API）
      • package.json，NodeJs依赖关系配置文件
      • tsconfig.json,typescript配置文件
      • tslint.json,代码规范配置文件（暂时不敢用，要求很严格）

    2. package.json文件分析

      {
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.13.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^22.2.0",
    "@types/node": "^9.4.7",
    "@types/react": "^16.0.40",
    "@types/react-dom": "^16.0.4",
    "typescript": "^2.7.2"
  }
}
      1. dependencies：依赖了三个模块react和react-dom是必须的核心模块，react-scripts-ts是react封装的webpack脚本模块。
      2. devDependencies：主要是依赖了typescript模块，因为React源码是用flow(类似TypeScript)写的，因此需要添加Type类型支持。
      3. scripts：常用的几个脚本。可以通过 npm start执行。

    3. tsconfig.json文件分析

      {
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

      关键的几个配置介绍

      1. outDir编译后的文件路径。
      2. module模块化方式，（commonjs等）
      3. target编译后的js版本
      4. lib开发所有的Js版本
      5. rootDir是ts项目的路径。
      6. exclude和include，包含或不包含的文件夹。
        其它的根据英文字面意思即可。

  3. 开始编写我们自己的代码
    开发一个如下图的网页，点击添加,会将内容追加到下面：
    这里写图片描述

    src目录下添加 APP.tsx ListComponent.tsx AddComponent.tsx

    APP.tsx

    import * as React from 'react';
import AddComponent from "./AddComponent";
import ListComponent from "./ListComponent";

export default class App extends React.Component<any, { data: string[] }> {
    private _styles = {
        container: {
            width: "100%",
            height: "100%",
        }
    };

    constructor(prop:any,context){
        super(prop, context);
        this.state = {
            data:[]
        }
    }

    render() {
        console.log("App render");
        return (
            <div style={this._styles.container}>
                <AddComponent add={(text) => this.setState({data:[...this.state.data,text]})}/>
                <ListComponent data={this.state.data}/>
            </div>
        );
    }
}

    AddComponent.tsx

    import * as React from "react";

export default class AddComponent extends React.Component<{ add(text): void; }, any> {
    private _height = "40px";
    private _currValue = "";

    private _styles= {
        container: {
            width: "300px",
            height: this._height,
            display: "flex",
            flexDirection: "row",
            margin: "100px",
        },
        input: {
            height: "100%",
            flex: 1,
        },
        add: {
            height: "100%",
            padding: "0 10px",
            margin: "5px 10px"
        }
    };

    render() {
        console.log("AddComponent render");
        return (
            <div style={this._styles.container}>
                <input
                    style={this._styles.input}
                    type="text"
                    placeholder="请输入要添加的内容"
                    onChange={(event) => this._currValue = event.target.value}/>
                <input
                    style={this._styles.add}
                    type="button"
                    value="添加"
                    onClick={() => {
                        this.props.add(this._currValue);
                    }}/>
            </div>
        );
    }
}

    ListComponent.tsx

    import * as React from "react";

export default class ListComponent extends React.Component<{ data: string[] }, any> {
    private _styles = {
        container: {
            width: "100%",
            flex: 1,
        },
    };

    render() {
        console.log("ListComponent render");
        return (
            <ul style={this._styles.container}>
                {
                    this.props.data.map((value, index, array) => {
                        return (
                            <li>{"第" + index + "条记录，" + value}</li>
                        );
                    })
                }
            </ul>
        );
    }
}
    1. React实现了 JavaScript 中写 HTML , HTML 中写 JavaScript
      • JavaScript 中写 HTML ,是通过括号包裹的，可以写成如下：

        let element = (<div><div>)
      • HTML 中写 JavaScript ，是通过大括号包裹的，可以写成如下

        let element = (<div>{"你好"+"!"}<div>)
    2. React组件必须继承React.Component，HTML布局通过render方法返回。
    3. React动态的更新组件式通过setState方法执行的。
    4. React可以通过外部传入属性，如：ListComponent组件中的data参数，获取方式是：this.props.data。
    5. 样式文件直接使用JSON来写即可，通过style引入。

    React是单向数据流单页面组件，每次刷新都会调用render方法，手动刷新是通过调用setState方法。
    烦恼：

    1. 由于刷新组件只能通过setState进行，意味着只能在组件内部进行更新页面。
    2. 由于是单向数据流，因此无法修改父组件传过来的属性，但是有时候就是要修改。

    这时候数据绑定模块就出现了,主要有两种mobx和redux,redux虽然是主流，但是使用起来非常繁琐，Mobx是后起之秀，结合了redux的理念，操作简单，容易上手，网上也有相关的对比。

  4. Mobx的使用

    1. 项目引入Mobx模块
      修改package.json文件，在dependencies节点添加

      "mobx": "^3.6.1",
      "mobx-react": "^4.4.2",

      执行命令行安装

      yarn install

    2. 修改App.tsx和ListComponent.tsx文件

      import * as React from 'react';
import AddComponent from "./AddComponent";
import ListComponent, {appState} from "./ListComponent";

export default class App extends React.Component<any, { data: string[] }> {
    private _styles = {
        container: {
            width: "100%",
            height: "100%",
        }
    };

    constructor(prop:any,context){
        super(prop, context);
        this.state = {
            data:[]
        }
    }

    render() {
        console.log("App render");
        return (
            <div style={this._styles.container}>
                <AddComponent add={(text) => appState.add(text)}/>
                <ListComponent/>
            </div>
        );
    }
}
      import * as React from "react";
import {observer} from "mobx-react";
import {observable} from "mobx";

class AppState {
    @observable data: string[] = [];

    add(text:string){
        this.data = [...this.data, text];
    }
}
export const appState = new AppState();

@observer
export default class ListComponent extends React.Component<any, any> {
    private _styles = {
        container: {
            width: "100%",
            flex: 1,
        },
    };

    render() {
        console.log("ListComponent render");
        return (
            <ul style={this._styles.container}>
                {
                    appState.data.map((value, index, array) => {
                        return (
                            <li>{"第" + index + "条记录，" + value}</li>
                        );
                    })
                }
            </ul>
        );
    }
}

      yarn start 运行即可

    3. 原理简单分析

      • observable 被观察者，mobx实时监测被观察者的变化，如果发生变化，就会通知observer更新。
      • observer 观察者，收到observable的更新通知后，observer会检查这个observable自己有没有在使用，如果在使用，就会更新(调用render方法)

  5. 单页面跳转必备-路由器 router
    官网：https://react-guide.github.io/react-router-cn/

    1. 项目引入react-router模块
      修改package.json, 在dependencieshe和节点添加 

        "dependencies": {
    "history": "^4.6.2",
    "react-router-dom": "^4.2.2",
  },
  "devDependencies": {
    "@types/history": "^4.6.2",
    "@types/react-router-dom": "^4.2.2",
  }

      执行命令行安装

      yarn install

    2. 开始编写路由器
      修改APP.tsx

      import React from "react";
import {Route, Router} from "react-router";
import {createBrowserHistory} from "history";

export const browserHistory = createBrowserHistory();

export default class App extends React.Component{
    render(){
        return(
            <div style={{width:"100%",height:"100%",display:"flex",flexDirection:"column"}}>
                <ul>
                    {
                        ["nav1","nav2"].map((value, index, array)=>{
                            return(
                                <li onClick={()=>{
                                    if(index ===0){
                                        browserHistory.push("/first")
                                    }else if(index ===1){
                                        browserHistory.push("/second")
                                    }
                                }}>{value}</li>
                            );
                        })
                    }
                    <Router history={browserHistory}>
                        <div>
                            <Route exact path="/" component={Home}/>
                            <Route path="/first" component={First}/>
                            <Route path="/second" component={Second}/>
                        </div>
                    </Router>
                </ul>
            </div>
        );
    }
}
class Home extends React.Component{
    render(){
        return(
            <div>
                Home界面
            </div>
        );
    }
}
class First extends React.Component{
    render(){
        return(
            <div>
                First界面
            </div>
        );
    }
}
class Second extends React.Component{
    render(){
        return(
            <div>
                Second界面
            </div>
        );
    }
}

      yarn start 运行即可

    3. 原理简单分析

      • 待定，未知。

三、Webpack打包机

官网：http://www.css88.com/doc/webpack/

他可以轻松的处理 JavaScript 依赖关系和加载顺序，并按规则打包或压缩成指定格式。

  1. 原理介绍

    这里写代码片

    有了打包机：

    • 项目可以使用更高级的JS语法（ES6以上）。
    • 项目可以使用更牛逼的TS语法
    • 项目可以轻松的压缩成单js css文件
    • 项目可以编译成指定ES版本的JS语法（目前浏览器完美支持es5）
    • 项目可以把HTML写进JS文件，在根据loader转换成HTML（React）
    • 很多很多。。。。只有你有对应loader。

  2. webpack语法的简单介绍
    可以在根目录新增一个webpack.config.js配置文件，通过webpack –config webpack.config.js 运行。 

    const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
};
    1. entry：入口文件。
    2. output：输出路径
    3. rules：规则配置，上面例子中配置了 当发现css文件时的处理方式。
    4. plugins：插件，使用别人封装好的插件处理，比如发现html文件时使用的HtmlWebpackPlugin

  3. 第一个loader（less）
    该例子背景是重新创建一个react-app

    D:>create-react-app webapp –scripts-version=react-scripts-ts

    1. 修改package.json,增加两个dev依赖

      “less”: “^3.0.1”,
      “less-loader”: “^4.0.6”,

      执行 yarn install 安装

    2. 打开路径node_modules/react-scripts-ts 这是react封装好的webpack

    3. 打开scripts/build看看build过程中，是引用了那个webpack.config配置。

      const webpack = require('webpack');
const config = require('../config/webpack.config.prod');

function build(previousFileSizes) {
  console.log('Creating an optimized production build...');

  let compiler = webpack(config);
  ...省略...
}

      由代码可知，build使用的config路径是”../config/webpack.config.prod”

    4. 打开这个webpack.config.prod文件，找到rules（打包规则）配置中关于css的解析，因为less本身属于css的范畴。

      {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
      Object.assign( { fallback: { loader: require.resolve('style-loader'), options: { hmr: false, }, }, use: [ { loader: require.resolve('css-loader'), }, { loader: require.resolve('postcss-loader'), }, ], }, )
    ),
},

      test：目前只支持css文件，所以需要增加对less文件的支持，

      test: /.(css|less)$/,

      loader：目前只用了postcss-loader–>css-loader–>style-loader 需要增加ls-loader支持

      loader: require.resolve(‘less-loader’)

      修改后的配置

      {
    test: /\.(css|less)$/,
    loader: ExtractTextPlugin.extract(
      Object.assign( { fallback: { loader: require.resolve('style-loader'), options: { hmr: false, }, }, use: [ { loader: require.resolve('css-loader'), }, { loader: require.resolve('postcss-loader'), }, { loader: require.resolve('less-loader'), } ], }, )
    ),
},

      同理，我们修改start脚本的配置(因为start脚本用的是另一个config)。

    测试是否配置成功

    1. 将原来的 App.css 修改为 App.less
    2. 修改App.tsx文件中的 import ‘./App.css’; 修改为 import ‘./App.less’;
      运行即可。

四、TypeScript简单介绍

官网：https://www.tslang.cn/
TypeScript是JavaScript的超集，它的存在并不是为了取代JavaScript，而是辅助JavaScript实现类型检查，直到ES支持强类型，TypeScript就是可以光荣退休了。
未来：TypeScript不存在淘汰的问题，因为它采用的是JavaScript语法，他所做的仅仅是增加了强类型。
比如：

let a:string = “test”;

编译成ES6

let a = “test”;

编译成ES5

var a = “test”;

所有的强类型在编译成JavaScript后都会消失。

TypeScript类型的定义

基础数据类型
* string 字符串
* number 数字
* object 对象
* undefined 未定义
* {} 对象 可以指定成员
* any 任意对象，懒人专用，定义后，typescript下岗了。

组合使用
* {[key:string]:number} key为string value为number的对象

第一种：

interface IPerson{
    name:string;
}

interface IStudent extends IPerson{
    score?:string;
}

let student:Iprop;

第二种

type IStudent = {
    name:string;
    score?:string;
} 

let student:Iprop;

第三种

let student:{name:string;score?:string;};

? 表示这个属性可有可无 student.score===undefined || string

五、辅助工具

  1. cmder（推荐）
    一款支持复制粘贴，支持linux命令的windows命令行工具，选用。
    相关文章 http://blog.csdn.net/wnma3mz/article/details/78268463

  2. WebStorm

    1. WebStorm 的破解
      下载地址：https://www.jetbrains.com/webstorm/
      license server http://idea.ibdyr.com
      其它激活方式：

      1. copy JetbrainsCrack-2.6.10-release-enc文件到Webstorm安装目录，点击下载JetbrainsCrack

      2. 修改 /bin/webstorm.exe.vmoptions 和 /bin/webstorm64.exe.vmoptions 文件，在最后面添加一行（注意修改路径）

        -javaagent:D:/WebStorm 2017.3.5/JetbrainsCrack-2.6.10-release-enc.jar

      3. 获取注册码：http://idea.lanyus.com/

      4. 打开webstorm激活
        这里写图片描述

    2. WebStorm配置
      开发语言的选择 File | Settings | Languages & Frameworks | JavaScript 默认的开发语言是ES6 修改为React JSX即可。

  3. 其它开发工具

    • VSCode(免费) VS的压缩版本
    • VS
    • Notepad+ 或 记事本
    • Xcode

六、其它

  1. 我的tsconfig配置文件

    {
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["esnext","dom"],
    "jsx": "react",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "sourceMap": true,
    "allowJs": false,
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "checkJs": false,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "include": [
    "src"
  ],
  "compileOnSave": true
}

    outDir：编译后 build/dist目录下会出现编译后的文件。
    module：模块化规范（commonjs等），好几种。
    target：编译后的es版本，通常就是es5,浏览器支持es5，es6没有普及。
    lib：开发过程中使用的es版本，看心情。
    jsx：react或者react-native，native是移动端混合APP开发用的。
    rootDir：项目所在位置。
    sourceMap:如果没有souceMap，浏览器出现的一堆压缩过后的Js文件，很难受。没法调试。
    其它有道词典走一波即可。

  2. React的编程思想

    • 响应式
    • 组件化

  3. React更新组件的算法
    倘若git采用的算法叫做逐行算法，那么React采用的算法是同行算法。

捡破烂致富
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-native-modal-datetime-picker：适用于Android和iOS的React-Native datetime-picker
01-30
该库公开了一个跨平台的界面，用于显示模式内部的本机日期选择器和时间选择器，从而提供统一的用户和开发人员体验。 在后台，该库使用 。 设置（适用于非EXPO项目） 如果您的项目未使用 ，请使用npm或yarn安装库...
【React】项目依赖包
Rand Tsui
07-24 995
"dependencies": { "@babel/polyfill": "^7.4.4", "axios": "^0.19.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-redux": "^7.1.0", "redux": "^4.0.4" }, "devDependen...
React基础
dubass的博客
10-10 853
reducer：是一个函数，作用是用于同步更新状态。前端路由：在 SPA 应用中，当路由导航切换时，不会向服务器发送新的请求，而是通过 JavaScript 来处理导航的切换效果。JSX 所表示的 React 元素必须使用单个根节点包裹，如果在渲染的 DOM 树中不想有多余的包裹节点，可以使用。useState() 调用后返回一个数组，数组的第一个元素是状态数据，第二个元素是修改状态数据的方法。Action creator 函数中，可返回普通的 action 对象，也可以返回一个函数。
react-scripts实现原理
最新发布
weixin_36857831的博客
02-01 374
// package.json { // coding "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scr...
React 介绍
qq_27494201的博客
12-29 566
文章目录一丶React 背景介绍二丶React 特点三丶React 学习准备四丶React和ReactNative的关系 一丶React 背景介绍 在Web应用开发的早期，构建Web应用的唯一方案就是向服务器发送请求，然后服务端响应请求并返回一个完整的页面。从开发角度上讲这种方式非常简单，但是这种开发方式会造成很不好的用户体验，用户的很多行为都需要向服务器进行请求，等待服务端的响应。因此，开发者开始开发各种类库，使用JavaScript在浏览器端渲染应用。 React起源于Facebook公司，起初用于ln
native react 常用指令_分享《TypeScript总结及与React配合使用》
weixin_39620535的博客
12-08 146
引言TypeScript 优势：静态类型检查与代码提示适用大型项目开发，如代码重构等更好的协作更强的生产力TypeScript 类型系统类型兼容性TypeScript 里的类型兼容性是基于结构化类型的。结构化类型是一种只使用其成员来描述类型的方式。interface Named { name: string; } let x: Named; // y 推断的类型是 { name: strin...
从零开始搭建React+TypeScript项目
熊小露的博客
03-04 1318
主要的依赖： React16.12+ TypeScript3+ tslint5+ react-router5+ react-redux7+ axios0.19+ element-ui1.4+ SCSS4.13+ 环境版本要求： Node >= 8.10 npm >= 5.6 首先安装 React 框架和类型库，有两种方式： 方法1： npx create-react-app my-app --typescript 方法2： npx create-react-
lowcode:React Lowcode-原型，开发维护内部应用程序
03-19
开箱即用的创建React Application样板文件（开发模式通过__source属性丰富了React组件包，其中__source属性包含源代码路径，行和列） React源代码操作和代码生成器。 import { codegen } from '@iteria-app/react-...
create-react-app-esbuild:在您的create-react-app中使用esbuild进行更快的编译，开发和测试
05-13
在内部create-react-app使用babel编译应用程序的javascript /打字稿文件。 通过使用craco-esbuild，可以使用编译器而不是babel来编译应用程序。 esbuild是用Go语言编写的超快速javascript /打字稿捆绑程序和压缩...
react-lightweight-charts
03-28
在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。...
react-native-fagkveld:内部专业晚会Itera
05-15
React本机fagkveld 有所作为，使不同的应用程序开始吧在 >版本8上并安装 遵循React Native的入门指南单击“使用本机代码构建项目” 选择正确的“开发操作系统”和“目标操作系统” 按照需要执行的步骤进行操作，直到...
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
热门推荐
蒋川@卡拉云
05-25 1万+
优秀的 React UI 移动端组件库和模版框架，帮我们节省开发时间，提高开发效率，统一设计语言。更棒的是内置的功能复杂，我们自己很难处理的常用组件，比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等，再进一步，还有帮我们把组件的轮子装好的 React admin 后台管理系统。本文推荐 7 款适用于中文使用者习惯的开源 React 移动端 UI 库，特别针对国内使用场景推荐。
react-scripts的工作原理
zxl1990_ok的博客
09-28 5104
使用react脚手架工具create-react-app初始化react项目时，打开package.json : 在命令行中执行npm run start/yarn start时，相当于执行react-scripts start， 我们去node_modules/中去找 react-scripts.js文件会根据参数去判断执行哪种构建脚本，比如当前参数是start，那么就会去执行scripts目前下的start.js 在start.js中引入了webpack-dev-server，该模块是
（React+TypeScript实战篇）一.项目构建
er_ba的专栏
06-29 3674
一.项目创建（搭建带有typescript的） 1.安装命令 >npx create-react-app ts-with-react--typescript 2.npx是什么（优点，npm5.2版本以上有）？ 1）避免安装全局模块 2）调用项目安装的内部模块 3.启动项目 >cnpm start 二.体验组件 1.在项目src目录下创建components目录然后新建Hello.tsx 2.在src目录下的App.tsx下引入使用 3.效果展示 ..
React项目案例-影视资源网站
前端高薪进击手记
03-15 720
项目地址：https://github.com/denghuiquan/aimovie
React的简介
u013553807的博客
08-17 405
一.React是什么？ React是一个将数据渲染为HTML视图的开源JavaScript库。 二.谁开发的？ 由Facebook开发，且开源。 1.起初由Facebook的软件工程师Jordan Walke创建。 2.于2011年部署于Facebook的newsfeed。 3.随后在2012年部署于Instagram。 4.2013年5月发布开源。 三.为什么要使用React？ 1.原生JavaScript操作DOM频繁、效率低（DOM-API操作UI）。 2.使用JavaScript
【初级】创建react一步步带你安装
m0_51062476的博客
06-02 552
没有安装node.js的小伙伴们，你需要先安装node环境，否则后面的安装你将无法进行。 这里分享一个node.js多版本下载地址http://nodejs.cn/download
react+tsx+webpack
pzmyg的博客
01-11 7606
1、创建tsx初始化工程： create-react-app app-demo-ts --scripts-version=react-scripts-ts 2、编写组件类Hello，渲染至页面 3、npm build、npm start,运行正常 4、安装webpack npm install -g webpack 5、安装ts与webpack整合依赖 npm install --save-dev...
react-scripts 不是内部或外部命令,也不是可运行的程序 或批处理文件。
09-09
当在TRUFFLE框架下运行React app时出现"'react-scripts' ...2. 在TRUFFLE盒子react开发中，结束卡顿的下载过程，并在client目录下重新执行npm install react-scripts命令。 希望以上解决方法能帮助到您解决该问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值