react | 易学教程

React学习总结（二）

阅读更多关于 React学习总结（二）

React总结二（一）堆栈溢出错误在react return函数中不能使用setState函数，因为这个函数设置了state后会立即更新组件，更新组件又会重新调用return，形成死循环。（二）父子组件交流父子组件交流过程中，用父组件的 state、props、参数（属性、函数）通过子组件的 props 来传入属性或者函数。（三）ref 在 react 中获得真实DOM节点使用 ref 方法：在节点中添加 ref 属性，例以 myIn 为名称， ref={(myIn) => {this.myIn = myIn;}} 调用时： this.myIn React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点，你可以给某个 JSX 元素加上 ref属性。能不用 ref 就不用（四）状态提升定义：当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。React.js 把这种行为叫做“状态提升”。对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要做提升或者特殊的管理。（五）挂载阶段的组件生命周期定义：我们把 React.js 将组件渲染，并且构造 DOM

React和Vue组件间数据传递demo

阅读更多关于 React和Vue组件间数据传递demo

一、React (一)父组件向子组件传数据简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <div className="App"> <Child msg="来自父元素的问候"/> </div> ); } } /* Child */ class Child extends Component { render() { return <div>{this.props.msg}</div>; } } 在CodeSandbox中打开向更下一级传递参数 /* Child1 */ class Child1 extends Component { render() { return ( <div> <h3>Child1</h3> <p>{this.props.msg}</p> <Child1_Child1 {...this.props} /> </div> ); } } /* Child1_Child1 */ class Child1_Child1 extends Component { render() { return ( <div> <h3>Child1_Child1</h3> <p>{this.props.msg}</p> </div> ); } } 在CodeSandbox中打开

react 入门（三）

阅读更多关于 react 入门（三）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic Example</title>  <script src="./build/react.js" charset="utf-8"></script>  <script src="./build/react-dom.js" charset="utf-8"></script>  <script src="./build/browser.min.js" charset="utf-8"></script>  </head> <body>  <div id="container"> </div> </body> <!

react入门到进阶（三）

阅读更多关于 react入门到进阶（三）

一、react样式 1、内联样式在以前写 html+css 的时候，引入css的时候有一种方法就是内联，而在 react 中又有些不一样，样式是用变量的形式，如下 const styleComponentHeader ={ header: { backgroundColor:'#333333', color:'#ffffff', 'padding-top':'15px', paddingBottom:'15px', fontSize:'15px' } //还可以定义其他样式 } <h1 style={styleComponentHeader.header}>yondu is a good father</h1> 我们用参照 json 的方式定义了一个样式，这个只能定义在 render 里面，然后直接使用它，当然 header 后面还可以继续定义其他样式，而且和 css 写法不同的是，名字要用驼峰命名法，或者你就用引号把名字包起来，而后面的值则必须要用引号包起来。这种方式最后呈现的状态是把样式直接写入了标签里面，这样定义的东西不会影响全局，只对自己负责不会污染其他的。另一种方法是我们直接创立一个 css 文件，这种就直接像以前那种写法了,只不过你在标签里面加类名的时候，要用 className ，例如 <h1 className="smallFontSize">yondu

react入门

阅读更多关于 react入门

react入门 react 入门前端用vue做了一些项目后，有一些疑惑的地方。学习下react对比一下，加深自己对前端框架的了解。学习的时候发现大多网上的教程都不是最新的，例如：react router v4的react-router-dom。所以最好还是到官网上面去看，英文虽然有的看不懂，但是看懂示例代码就行了。react作为目前端最火热的框架，理应学习和掌握。 react技术栈预览推荐看下阮一峰的React 技术栈系列教程，有的写的比较老，可以大致过下概念，有个大致了解，然后去官网看具体写法 1. react react官网 gitbook-react gitbook入门 2. react-router,路由 react-router gitbook(老) react-router(新) 3. Redux状态管理 redux中文文档 Redux是一个JavaScript app的可预测state容器。如果你觉得需要Flux或者相似的解决方案，你应该了解一下redux，并学习Dan Abramov的redux入门指南，来强化你的开发技能。 Rudux发展了Flux的思想，同时降低了其复杂度。 4. Flux 阮一峰Flux 架构入门教程 Flux gitbook Flux 是一种应用架构，或者说是一种思想，它跟 React 本身没什么关系，它可以用在 React 上

React框架（二）React组件

阅读更多关于 React框架（二）React组件

React组件化的思想将项目中的页面按照功能（或者是位置等等）划分为一个个块儿。如果有的块儿是每个页面或者大多数页面共有的部分，比如导航栏、菜单栏、翻页模块之类的，就写在公共组件里面，然后再需要的页面进行渲染。如果是某个页面特有的模块，就给每一个页面单独写一个文件，里面定义该模块的组件并于公共组件结合进行渲染。某个页面内若是有新的弹窗，则在父页面下建立新的文件进行组件的定义，避免一个文件过大。原文链接：https://blog.csdn.net/qq_28304961/article/details/95313525 组件定义在 React框架------开发环境准备、构建第一个React项目文章中，创建了第一个React项目，其中的App.js文件代码（删除不必要的代码，简化后）如下： import React from 'react' ; function App ( ) { /* jsx的语法（在js文件中使用html的标签），也要import React from 'react'才能编译成功。一般的js语法中，要返回标签，需要使用return '<div>hello</div>',而在react中运行不起来，这时需要直接使用return <div>hello</div> */ return ( < div className = "App" > hello

react入门（下）

阅读更多关于 react入门（下）

react生命周期 1. 组件的三个生命周期状态: * Mount：插入真实 DOM * Update：被重新渲染 * Unmount：被移出真实 DOM2. React 为每个状态都提供了两种勾子(hook)函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用 * componentWillMount() * componentDidMount() : 已插入真实DOM, 在render之后才会执行 * componentWillUpdate(object nextProps, object nextState) * componentDidUpdate(object prevProps, object prevState) * componentWillUnmount()3. 生命周期流程: 1). 第一次初始化渲染显示: render() * constructor(): 创建对象初始化state constructor参数接受两个参数props,context 只要组件存在constructor,就必要要写super * componentWillMount() : 将要插入回调组件刚经历constructor,初始完数据组件还未进入render，组件还未渲染完成，dom还未渲染 * render() : 用于插入虚拟DOM回调

react 入门（一）

阅读更多关于 react 入门（一）

自学前端开发，现在手握大厂offer，我的故事还在继续

阅读更多关于自学前端开发，现在手握大厂offer，我的故事还在继续

简要背景我是一个非科班出身的程序员，而且是连续跨专业者，用一句话总结就是： 16 届本科学完物流，保送研究生转交通，自学前端开发的休学创业者。 17 年休学创业，正式开始学习前端，离开创业公司后，我又回炉深造，期间一直没有放弃前端开发的自主学习，在 19 年秋招（20 年毕业）大战中也收获了一些 offer。列举一部分 SP（Special Offer）：美团（专注吃喝玩乐的 O2O 互联网公司）小米（2019 年世界 500 强中最年轻的公司）顺丰（物流行业中高端市场扛把子）云从（人工智能行业四大明星独角兽之一）一加（中高端手机市场新贵）具体的薪资水平，都是在传统的物流和交通行业之上的，可以上一些平台比较。找到满意得工作后，我现在想通过自己的努力，帮助到有志于从事前端开发工作的各位朋友，收获适合自己的 offer。大学教育赋予了我们的自学能力，只要感兴趣，肯用心，转行吃碗热饭是可以的。下面我将仔细讲述亲身经历得故事，不堆砌词藻，但求真实，也许会给你带来一些启发。经历不可复制，经验却可以流传。在校求学本科专业是物流工程，研究生专业是交通工程。本科期间我只学过 VB（Visual Basic）和 R 语言。研究生没有上过任何计算机课程，全靠自学。当然，也在本科期间参与过大大小小的科技竞赛，数学建模比赛，对物流专业的管理学知识渐渐兴趣不大。于是

react-router-dom路由模块化

阅读更多关于 react-router-dom路由模块化

1、先看一下未模块化的路由配置，有哪些地方是可以提出去的 import React from 'react' import '../css/index.css' import { BrowserRouter as Router, Route, Link} from 'react-router-dom' /********************这一块是可以单独提出去的 start**************************/ import EntryPage from '../components/entryPage' import DownloadPage from '../components/downloadPage' let routes = [ { path: '/', components: EntryPage, exact: true }, { path: '/download', components: DownloadPage } ] /********************这一块是可以单独提出去的 end**************************/ class App extends React.Component{ render() { return ( <Router> <div id="app"> /****************

订阅 react