react

create-react-app 文档 来源： https://www.cnblogs.com/Running00/p/12268820.html

一、admin页面布局及路由创建 0）cmd批量创建目录及子目录 //创建各个目录，及charts和子目录bar md home category product role user charts\bar charts\line charts\pie 或 mkdir home category product role user charts\bar charts\line charts\pie 目录结构 │ admin . jsx │ ├─category ├─charts │ ├─bar │ ├─line │ └─pie ├─header │ header . less │ index . jsx │ ├─home ├─left │ index . jsx │ left . less │ ├─product ├─role └─user 0.2 写基础文件，分别如下 F : admin - client\src\pages\admin > tree / f 卷 工作 的文件夹 PATH 列表 卷序列号为 284 A - 4 B0E F : . │ admin . jsx │ ├─category │ header . less │ index . jsx │ ├─charts │ ├─bar │ │ header . less │ │ index . jsx │ │ │ ├

先举个例子： import React from 'react' import ReactDOM from 'react-dom' let myRender = ( ) => { let el = ( < div > < h1 > 虚拟 DOM < / h1 > < p > { new Date ( ) . toLocaleString ( ) } < / p > < / div > ) ReactDOM . render ( el , document . getElementById ( 'root' ) ) } // 定时器每 1 秒执行一次 setInterval ( myRender , 1000 ) 打开浏览器控制台，在 Elements 中会发现，只有数据改变的部分 DOM 才会进行更新；是因为在 react 中，数据发生改变时是通过虚拟 DOM 更新的；当数据发生改变时，会用最新的数据去修改模板形成新的虚拟 DOM，新的虚拟 DOM 和旧的 虚拟DOM 通过 diff 算法进行比较找到需要更新的地方进行更新 Diff 算法 在 React 中有两种假设： 两个不同类型的元素会产生不同的树 开发者可以通过 key 属性指定不同树中没有发生改变的子元素 Diff 算法说明 如果两棵 DOM 树的根元素类型不同，React 会销毁旧树，创建新的 DOM 树。

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test-app@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the test-app@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 这个问题一般是依赖包有问题，而且在这个报错之前上面必然有一堆的信息输出，可以根据上面的信息提示进行bug修复。 这是在使用react脚手架创建项目时报的错，出现该错误的原因是： 全局安装的babel-eslint的版本太低为7.x，但是react需要的版本为10.x，笔者在更新全局babel-eslint的版本时无效，便删除了全局下的这个包文件，项目可正常启动。 来源： CSDN 作者： 西瓜皮儿的皮儿 链接： https://blog.csdn.net/Hulu_IT/article/details/104192011

简介: 这是用react制作的硅谷直聘项目的静态页面，记录一下写静态页面的时候遇到的问题。 注意: ①state的两种写法和区别： 在组件的constructor中 constructor(props) { // 必须在这里通过super调用父类的constructor super(props); // 给state赋值，可以使用props this.state = { } } 使用prop来初始化state 直接在Class中定义 参考这篇文章: React基础11 React中初始化state的两种方法 ②可控组件和非可控组件: 参考这篇文章: react之 可控组件与不可控组件 ③radio默认选择:checked属性 <input type='radio' name='userType' value='boss' onChange={this.typeChange} checked/> ④跳转用的代码： toLogin=()=>{ this.props.history.replace('./login') } <button className='btn btn-lg btn-success btn-block' id='font20' onClick={this.toLogin}>已拥有用户</button> 代码: registers.jsx: /* 注册路由组件 */

前言 感悟 这几天撸React代码，在撸之前没有仔仔细细阅读官方文档，拿着功能需求按照以往其他语言编程经验及随用随查的API进行开发。发现这个过程是痛苦的，每百度一个简单的功能实现，都会耗费巨大的尽力和筛选有效信息时间，其实静下心来花费一定时间完整阅读官方文档很有必要，因为官方文档能够涵盖大部分开发场景。 场景 在理解了(我以为自己理解了)sate&props后，需要实现一个如下功能组件：输入框，外部可以设置初始值及修改输入框内容，且外部需要感知输入框改变。于是我就撸了下边代码： import React from 'react' export default function TemperatureInput ( props ) { const onChanged = ( e ) => { console . log ( "e:" , e . target . value ) if ( props . onChanged != null ) { props . onChanged ( e . target . value ) } } React . useEffect ( ( ) => { console . log ( "Temperature" ) } ) ; return < div > < input value = { props . initvalue }

create-react-app+webpack配置 1.进入桌面运行命令：cd Desktop 2…创建项目，安装从reate-react-APP：npx create-react-app easymerchant 3.webpack隐藏的配置项进行展示：npm run eject 4.自动化测试的内容暂时用不到：删除config下的jest文件，还有script文件下的test.js package.json下的“script”下的test:node scripts/test.js"删除（是自动化测试的内容） 5.运行npm run start发现报错，删除yarn.lock,删除node_modules 如图文件目录 配置mobx状态管理 （moobx:是一个独立的库，mobx-react用于连接state状态和react视图） 安装依赖，配置mobx运行命令:yarn add mobx mobx-react -S 配置babel ** package.json文件修改 ** "babel": { "presets": [ "react-app" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] }, "devDependencies": { "@babel/plugin

什么是JSX?——浏览器是如何识别它的？ JSX是facebook普及的一种标记语言，通过babel/TSC等工具会编译为 React.createElement function。所以在React每个组件中，虽然没有显式用到React，但都需要 import React from 'react' 。 JSX是如何区分React Component和HTML元素的？ 通过元素首字母的大小写，如果首字母大写，则认为是React组件，小写的话则会被认为是HTML元素。可以在 online Babel compiler 中试一下。 123456789101112 function () { return <div>Hello world!</div>;}function () { return React.createElement( "div", null, "Hello world!" );} 123456789101112 function () { return <div>Hello world!</div>;}function () { return React.createElement( Div, null, "Hello world!" );} 此外，把一个组件赋给 this.component 并且写 <this.component /> 也会起作用。

16.12.0版本React中的webpack如何配置less 其中"scripts"帮你自动下载需要的 webpack-dev-server 依赖,包括开始start，打包build，测试test，配置都放在eject中，所以如果想要配置自带的依赖外的less的东西需要暴露出eject依赖文件 yarn add less - loader或者npm install less - loader //先安装依赖 yarn eject 或者npm run eject //解构目录 执行上面操作之后，自动会生成config文件夹，需要修改webpack.config.js,打开config目录下的webpack.config.js，修改webpack配置，如下图 第一处是找到 cssRegex 和 cssModuleRegex 在他们得我下面新建 lessRegex 和 lessModuleRegex 变量 第二处是增加 less-loader 的配置 具体修改如下 //第一大块大概在47行左右 const lessRegex = /\.less$/ ; const lessModuleRegex = /\.module\.less$/ ; //第二大块大概在493行左右 //配置less { test : lessRegex , exclude : lessModuleRegex ,

父组件： import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ this.setState({ txt0:"哈哈哈哈" }) } sonToPar(e){ this.setState({ txt1:e }) } render(){ const style={ paddingLeft:"150px" } return( <div style={style}> <button onClick={this.parToson.bind(this)}>传值给子组件</button> <div>接受子组件的传值为：{this.state.txt1}</div> <br/> <Child message={this.state.txt0} getsonToPar={this.sonToPar.bind(this)}/> </div> ) } } 子组件： import React, { Component } from