初次使用create-react-app
最近玩了一下React，感觉还挺好玩的，说实话对后端的来说比vue好多了，记得刚学vue的时候是一头雾水； 基础知识暂时后面慢慢说，其实感觉还是挺容易的吧，今天就简单使用一下react脚手架，后续的用这个脚手架写点东西1.准备node版本 使用create-react-app这个官方脚手架，对node版本有要求...
2024-01-10
create-react-app中分环境打包
npm run build不同环境打包区分，:dev,:test,:prod区分。推荐工具：npm install dotenv-cli --save-dev在根目录src下添加文件：//.env.devREACT_APP_FAVICON=./development_favicon.pngREACT_APP_TITLE=[Dev]项目的titleREACT_APP_DEVELOPMENT_BASE_URL='https://test.jaagro.com:9030'//.env.testREACT_APP_...
2024-01-10
create-react-app 编译进度条配置
安装：yarn add webpackbar修改webpack.config.js文件：const WebpackBar = require('webpackbar')plugins: [ // ... new webpack.ProgressPlugin(), new WebpackBar()]webpack.ProgressPlugin() 是webpack内置插件，webpack.ProgressPlugin，WebpackBar用来显示编译时长...
2024-01-10
从create-react-app开始，构建项目架构
1.生成项目命令行执行：create-react-app myapp，生成如下结构： 2.安装sass依赖，让你在项目中可以使用scss模块化，index.module.scss：npm i node-sass sass-loader -D之后就能用了，rules配置脚手架已经处理了,使用：/*index.module.scss*/.test{ background-color: pink; min-height: 100vh;}// index.jsx中import React from...
2024-01-10
Create-react-app脚手架工程目录简介
1、README.md是一些简单的项目介绍，自己也可以将内容去修改2、pack-lock.json为项目安装包版本号3、package.json：任何一个脚手架工具里面都有这个文件，代表这个脚手架是node的一个包文件，有项目的一些简单介绍，一些react的依赖和指令4、gitignore文件 为一些不想上传到git的文件5、node_modules 为项目依...
2024-01-10
让create-react-app支持sass，less
用create-react-app 创建的项目不支持sass和less，需要手动配置npm install node-sass sass-loader --save然后在config/webpack.config.js中添加以下代码，红色框的是新添加的代码：项目是采用create-react-app 搭建的脚手架工程如何应用CSS Module 1.在命令行运行 npm run eject 命令2.运行完成之后，打开 config 目录下的 webpack.config...
2024-01-10
create-react-app脚手架的安装和目录结构介绍
1.对脚手架的初步了解编程领域中的“脚手架”指的是能够快速搭建项目“骨架”的一类工具，例如大多数的React项目都有src，public，webpack配置文件等等，而src目录中又包含components目录等等。每次在新建项目时，手动创建这些固定的文件目录。脚手架的作用就是帮助你完成这些重复性的工作，包括一...
2024-01-10
create-react-app下的@修饰器正确的使用方式记录
在create-react-app下使用es7的@修饰器会报错''Support for the experimental syntax 'decorators-legacy' isn't currently enable"原文地址https://www.jianshu.com/p/b841aee4745f需要做以下几步,首先正确安装babel"devDependencies": { "@babel/core": "^7.1.6", "@babel/plugin-proposal-class-p...
2024-01-10
使用react脚手架create-react-app遇到的问题
1.使用 npm install -g create-react-app 时，页面报错：如下：此时查看错误日志：大概意思猜测是npm的问题 就把命令改成cnpm install -g create-react-app，此时第一步可以顺利执行2. 输入create-react-app my-app，创建名为my-app的项目，如下图：又报之前的错了，原因是因为这个命令执行的时候，会安装一些包，但...
2024-01-10
Ubuntu create-react-app失败，权限被拒绝
我收到一个奇怪的错误：Unhandled rejection Error: EACCES: permission denied, mkdir '/home/ubuntu/.npm/_cacache/index-v5/14/36'atus我只是在AWS实例上安装了npm（6.4.1）和节点（11.2.0），没有任何问题。我在全球范围内安装了create-react-app。错误说Thisis an error with npm itself.我有点茫然。我创建了目录/home/ubuntu/.npm/_cac...
2024-01-10无法将“ create-react-app”识别为内部或外部命令
我正在尝试在Windows PC上使用create-react-app命令设置reactapp。我已经在Mac计算机上使用过它，并且效果很好。但是我遇到了一个问题。这是我在命令行上的步骤。我想念什么吗？C:\Windows\system32>cd C:\Users\ugur\Desktop\denemeC:\Users\ugur\Desktop\deneme>npm initThis utility will walk you through creating a package.json file.It ...
2024-01-10
react-snippets
rcjcclass componentName extends Component { render() { return ( <div> </div> ); }}conconstructor(props) { super(props); }方法cwm→ componentWillMount methodcdm→ componentDidMount methodcwr→ componentWillReceiveProps method...
2024-01-10
react中关于create-react-app2里css相关配置
先看 webpack.config.dev.js 里的相关代码：// style files regexesconst cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass)$/;const sassModuleRegex = /\.module\.(scss|sass)$/; // common function to get style loadersconst getSty...
2024-01-10
react-React深入-一等公民-props-onChange
title: '[react]深入 - 一等公民 props & onChange'date: 2017-08-23 10:05:07tags:reactreactjspropsonChange框架reduxcategories:技术写在前面这篇博客的前身是 《React 新手必须知道的10件事》，结果写着写着，「每件事」都远远超过了预计的300～500字的限制。给读者的阅读造成了极大的困扰。故将《10件事》拆开成若...
2024-01-10
create-react-app创建react项目 css模块化处理
用的css预处理器用sass，其他大同小异。用create-react-app创建项目，执行npm run eject弹出配置文件（此操作不可逆）；配置sass，用的最新的CRA，webpack4；webpack.config.dev.js （webpack.config.prod.js需相同配置一份）:module下的rules 中 oneOf 修改&增加 { // Exclude `js` files to keep "css" loader working as it injec...
2024-01-10
查看安装的react-native和react版本
转：http://blog.csdn.net/miss_ok/article/details/52777115npm info React-native(目前是0.34.1)知道最新版本后，通过以下命令来安装：npm install --save react-native@0.34.1同样，npm info react(目前是15.3.2)知道最新版本后，通过以下命令来安装：npm install --save react@15.3.2...
2024-01-10如何在create-react-app中将`src`文件夹更改为其他内容
我想知道是否可以使用react-script重命名src为app文件夹之类的其他名称回答：您可以使用react-app-rewired覆盖反应路径配置。就我而言，我可以更改 文件中的路径const path = require('path');module.exports = { paths: function (paths, env) { paths.appIndexJs = path.resolve(__dirname, 'mysrc/client.js'); ...
2024-01-10
【React】antd中按需加载使用react-app-rewired报错
运行yarn start 报错injectBabelPlugin is not a function代码和antd官网一样报错信息回答错误原因：react-app-rewired删除所有方法的新版本injectBabelPlugin，这些方法被移动到一个名为'customize-cra'的新包中修改方法：1.确保已经下载customize-cra，less-loader2.修改config-overrides文件为const { override, fixBabelImports, // ...
2024-01-10
react数据之dispatch,reducer
1.之前写了一篇fetch的简单用法，实际项目中数据比那个要复杂，下面看一下通过dispatch和reducer来控制数据的更新；2.还是以上一个添加分组的组件为例：首先我们写一个MoveGroupReducer.js文件，里面我们模拟一个数据，并且写一个方法点击选中的方法；2.最上面引用的defination文件如下：3.在fetchData文件...
2024-01-10
react-native学习---react-native布局
学而时习之,不亦乐乎react-native中布局采用的是FlexBox(弹性框)进行布局在react-native 布局中需要注意的是：1.在react-native中的尺寸是没有单位的（android设备中尺寸单位解释为sp,ios中解释为pt,代表设备独立像素）2.在react-native中css 与web端css基本相同，但有少许不同之处#flexDirectionflecDirection ：定义父视图...
2024-01-10
react篇章-React 组件-复合组件
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>菜鸟教程 React 实例</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></...
2024-01-10
react-1 react需要的环境配置
一、nodeJs简介和安装 1、 官网 https://nodejs.org/en/ NPM https://www.npmjs.com/ 2、检查安装成功的命令 node -v npm -v二、使用npm配置react开发环境http://reactjs.cn/react/docs/package-management.html1、新建一个文件夹 如：newfiles2、cd newfiles3、npm init4、npm install --save rea...
2024-01-10
【巷子】---react-redux---【react】
一、Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件，connect的意思就是将两种组件连起来 参考文章：https://github.com/reduxjs/react-redux 二、react-redux的基本用法(1)、引入import {Provider} from "react-redux"; 在根...
2024-01-10
初识react（4）——在react-app中如何实现md5加密
当我们用react-app做项目时，会有对用户密码加密的操作，下面给大家分享：在react-app中如何实现md5加密。 如果你不知道如何用react-app搭建脚手架项目，可去看我的博客 初识react（1）——使用脚手架创建项目 下面步入正题，1. 首先npm下载md5：npm install --save js-md5 如下图所示： 2. ...
2024-01-10
【JS】一篇文章搞定 create react app 核心思路
主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green贡献主题：https://github.com/xitu/jueji...theme: juejinhighlight:create re...
2024-01-10
