react | 易学教程

钻牛角尖似的学习React.萌到发蠢的萌新

阅读更多关于钻牛角尖似的学习React.萌到发蠢的萌新

【推荐阅读】微服务还能火多久？>>> 嗯，，，实习期间一直用的vue,去年为了应付面试，（面试造火箭，工作拧螺丝。。。）但当时react看了一周，简历上都是写的，知道React.笑哭了要。。嗯。。。现在已经忘完了。 1.hello React 要安装三个依赖，具体原因对于只是知道1+1=2的我来说，太难了，不知道，现在，嗯，我的学习方法是温故而知新，等以后“温故”的时候再研究。hahh 1.安装三个必须要安装的（1)react.js 这是核心包，安装方式： npm install react --save (2)react-dom.js 渲染页面中的dom，当前文件依赖react核心文件安装方式： npm install react-dom ---save (3)babel.js ES6转换成ES5 JSX语法换成js 现今浏览器兼容安装方式： npm install babel-standalone --save 2.下载完成，添加引用参照目录，引入对应的引用 3.创建根节点 <div id="demo"></div> 4.小栗子实现 <body>  <div id="demo"></div> <script type="text/babel"> // jsx = js xml

React 中 ref 的使用

阅读更多关于 React 中 ref 的使用

【推荐阅读】微服务还能火多久？>>> 实例：获取button元素离页面顶部的距离 ref写在html元素上 import React,{Component,Fragment} from 'react' ; import Child from './Child' ; class Counter extends Component{ constructor(props){ super(props); this .addCount= this .addCount.bind( this ); this .state= { counter: 1 } } addCount(){ console.log( this .button); console.log( this .button.clientTop); this .setState({ counter: this .state.counter+1 }) } render(){ return ( <Fragment> <button onClick={ this .addCount} ref={button=> this .button=button}>点击</button> <Child num={ this .state.counter}/> </Fragment> ) } } export default Counter;

React Props简单演示

阅读更多关于 React Props简单演示

【推荐阅读】微服务还能火多久？>>> state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。通过组件类的 defaultProps 属性为 props 设置默认值 import React, { Component } from 'react' ; import ReactDOM from 'react-dom' ; import './index.css' ; import App from './App' ; import * as serviceWorker from './serviceWorker' ; class Name extends React.Component{ render(){ return ( <div>{ this .props.name}</div> ) } } Name.defaultProps = { name: 'cyy' } ReactDOM.render( <div> <Name/> </div>, document.getElementById('example' ) ); serviceWorker.unregister(); 如何在应用中组合使用 state 和 props ：可以在父组件中设置 state，并通过 props 将其传递到子组件上 import React,

React 条件渲染简单演示

阅读更多关于 React 条件渲染简单演示

【推荐阅读】微服务还能火多久？>>> 模拟根据登录情况判断要显示的欢迎界面 import React, { Component } from 'react' ; import ReactDOM from 'react-dom' ; import './index.css' ; import App from './App' ; import * as serviceWorker from './serviceWorker' ; import PropTypes from 'prop-types' ; function Greeting(props){ const state = props.state; if (state){ return <UserGreeting /> } else { return <GuestGreeting /> } } function UserGreeting(){ return ( <div>欢迎用户</div> ) } function GuestGreeting(){ return ( <div>欢迎游客</div> ) } ReactDOM.render( <div> <Greeting state={ false } /> </div>, document.getElementById('example' ) );

Taro Next H5 跨框架组件库实践

阅读更多关于 Taro Next H5 跨框架组件库实践

【推荐阅读】微服务还能火多久？>>> 作者：凹凸曼 - JJ Taro 是一款多端开发框架。开发者只需编写一份代码，即可生成各小程序端、H5 以及 React Native 的应用。 Taro Next 近期已发布 beta 版本，全面完善对小程序以及 H5 的支持，欢迎体验！背景 Taro Next 将支持使用多框架开发过去的 Taro 1 与 Taro 2 只能使用 React 语法进行开发，但下一代的 Taro 框架对整体架构进行了升级，支持使用 React、Vue、Nerv 等框架开发多端应用。为了支持使用多框架进行开发，Taro 需要对自身的各端适配能力进行改造。本文将重点介绍对 Taro H5 端组件库的改造工作。 Taro H5 Taro 遵循以微信小程序为主，其他小程序为辅的组件与 API 规范。但浏览器并没有小程序规范的组件与 API 可供使用，例如我们不能在浏览器上使用小程序的 view 组件和 getSystemInfo API。因此我们需要在 H5 端实现一套基于小程序规范的组件库和 API 库。在 Taro 1 和 Taro 2 中，Taro H5 的组件库使用了 React 语法进行开发。但如果开发者在 Taro Next 中使用 Vue 开发 H5 应用，则不能和现有的 H5 组件库兼容。所以本文需要面对的核心问题就是：我们需要在

Taro Next H5 跨框架组件库实践

阅读更多关于 Taro Next H5 跨框架组件库实践

React组件的简单演示

阅读更多关于 React组件的简单演示

【今日推荐】：为什么一到面试就懵逼！>>> src/Test.js import React from 'react' ; function Test() { return ( <div> test </div> ); } export default Test; src/index.js中引入组件Test 页面中效果来源： oschina 链接： https://my.oschina.net/u/4355104/blog/3233358

React.js 模式

阅读更多关于 React.js 模式

前言我想找一个好的前端前端框架，找了很久。这个框架将能够帮助我写出具有可扩展性、可维护性 UI 的代码。通过对 React.js 优势的理解，我认为“我找到了它”。在我大量的使用过程中，我发现了一些模式性的东西。这些技术被一次又一次的用于编程开发之中。此时，我将它写下来、讨论和分享这些我发现的模式。这些所有的代码都是可用的，能够在 https://github.com/krasimir/react-in-patterns 中下载。我可能不会更新我的博客，但是我将一直在 GitHub 中发布一些东西。我也将鼓励你在 GitHub 中讨论这些模式，通过 issue 或者直接 pull request 的方式。一、React 自己的交流方式(Communication) 在使用 React 构建了几个月的情况下，你将能够体会到每一个 React Component 都是一个小系统，它能够自己运作。它有自己的 state、input、output. Input React Component 通过 props 作为 input（之后用输入代替）。下面我们来写一个例子： // Title.jsx class Title extends React.Component { render() { return <h1>{ this.props.text }</h1>; } }; Title

React组件拆分与传值

阅读更多关于 React组件拆分与传值

组件拆分与组件之间的传值父子组件的概念：父组件通过属性的方式，向自组件传值子组件通过this.props的属性，接收传递过来的值父组件 src/TodoList.js import React,{Component,Fragment} from 'react' ; import TodoItem from './TodoItem' ; import './style.css' ; class TodoList extends Component { constructor(props) { super(props); this .state = { inputVal: '' , list:[] }; this .changeVal= this .changeVal.bind( this ); this .addItem= this .addItem.bind( this ); this .deleteItem= this .deleteItem.bind( this ); } changeVal(e){ this .setState({ inputVal: e.target.value }); } addItem(e){ // 按下回车键 if (e.keyCode===13 && e.target.value!=="" ){ const list =[... this

React中的Props, State 与 render 函数

阅读更多关于 React中的Props, State 与 render 函数

React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他框架并存 3、组件化 4、单向数据流（父组件可以直接改变子组件的数据，但是子组件不能直接改变父组件的数据） Props, State 与 render 函数 render函数什么时候执行： 1、组件初次创建的时候，会执行一次 2、当state数据发生变更时，会再次执行 3、当props数据发生变更时，会再次执行 src/Counter.js import React,{Component,Fragment} from 'react' ; class Counter extends Component{ constructor(props){ super(props); this .addCount= this .addCount.bind( this ); this .state= { counter: 1 } } addCount(){ this .setState({ counter: this .state.counter+1 }) } render(){ return ( <Fragment> <button onClick={ this .addCount}>点击</button> <div>{ this .state.counter}</div> <

订阅 react