react | 易学教程

1-4、React中form表单下的input框初使用以及列表渲染

阅读更多关于 1-4、React中form表单下的input框初使用以及列表渲染

文章系列 1-1、React环境搭建，以及初识jsx语法。 1-2、React熟悉，jsx语法以及变量绑定和三种渲染语句 1-3、React绑定属性和事件，以及事件的响应。大家好，我是Counterrr 不忘初心，砥砺前行本文目录一、根据input框以及列表渲染做了小项目展示；二、form表单input框初使用；三、列表渲染；四、小项目代码解读； 1、小项目介绍与展示: 1-1、项目初始的时候下面的语言是空的，语言列表是空的时候，那么选择学习语言的按钮就是不能点击的状态； 1-2、当添加语言为空时，会提示你输入语言； 1-3、当语言列表不为空的时候点击选择学习语言时会随机选择列表中的一种语言； 1-4、点击清除按钮会把语言全部清除；完成小项目之前先来试试react中input框的使用吧。 2、form表单input框初使用: 我们把src文件夹下的app.js改成如下代码（运行的命令就不在这本赘述了，可以看这里 1、React环境搭建，以及初识jsx语法。）： let inputFunc = ( e ) => { e . preventDefault ( ) console . log ( e . target . elements . input . value ) ; reactRenderFunc ( ) } const reactRenderFunc = (

react antd Tabs组件如何修改默认样式-友好的解决方法

阅读更多关于 react antd Tabs组件如何修改默认样式-友好的解决方法

　　前言　　当在项目中使用 react antd 各组件时，总有需要自定义 css 样式的时候，那应该怎么修改呢？　　最简单粗暴的方法——覆盖原有样式　　审查元素找到要修改的 tabs 组件类名，然后在 css 文件中重写该类样式使其覆盖原有样式，若无效果，添加 !important 　　　　最直接了当的方法——添加行内样式　　但上述方法会导致全局 tabs 组件样式都被修改，为避免上述情况，直接在引入的 tabs 组件上添加行内样式 style={{}} ，　　而上面方法同样有个问题，如果添加样式较多会影响代码整洁，并且有些组件样式嵌套层级较深，也无法直接添加行内样式　　推荐方法　　在 tabs 组件外面在嵌套一个 div , 给这个 div 添加一个 className , 比如 className="tutu" ，　　修改 tabs 组件默认样式就可直接用 .tutu ant-tabs 这种形式，这样只会作用于当前页面下有添加该类的 tabs 组件，就不会污染全局了　　注：另外，网上铺天盖地的博文大多说借助 :golbal 修改默认样式，但经本人多次测试并无效果来源： oschina 链接： https://my.oschina.net/u/4409765/blog/4254749

Vue.js---MVVM的信仰

阅读更多关于 Vue.js---MVVM的信仰

Vue.js---MVVM的信仰 B站学习视频地址： https://www.bilibili.com/video/BV1e7411M7GQ 一切基于ES6 (let, const, 箭头函数, promise, axios) MVVM模型(React nactive用在APP比较多) 传统的js顶下给你思维，打破手动操作DOM 1. 引入vue.js <script src="vue.js"></script> 2. new一个Vue <script> const myvue = new Vue(); console.log(myvue); </script> console: 3. 传一个对象给Vue, 里面有2个参数，语法如下： <script> const myvue = new Vue({ 界面: xxx, 数据: yyy }); console.log(myvue); </script> 画图理解： 4. 逐渐增加代码界面： < div id ="myView" ></ div > 数据： const myModel = {}; 整合代码： <body> <div id="myView"></div> </body> <script> const myModel = {}; const myvue = new Vue({ el: '#myView' , data:

你知道什么是 GitHub Action 么？

阅读更多关于你知道什么是 GitHub Action 么？

本文是 GitHub Action 的入门教程，如您已有相关使用经验可以直接关掉。 GitHub Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务。之前一直都是 Beta 版本，正式版于 2019 年 11 月正式推出。首先还是先放几个官方的链接： GitHub Action ： https://github.com/features/actions GitHub Action 官方市场： https://github.com/marketplace?type=actions CI\CD CI\CD 其实说的是三件事情：「持续集成（Continuous Integration）」、「持续交付（Continuous Delivery）」、「持续部署（Continuous Deployment）」。因为「持续交付」和「持续部署」的英文缩写是一样的，所以这三件事情缩写成了 CI\CD 。持续集成那么什么是「持续集成」？借用一幅图：从这幅图上可以很清楚的看到「持续集成」的流程：开发人员提交代码到 Source Repository （源代码仓库），并通过 git hook 等触发 CI Server（持续集成服务器）的相关功能。执行编译 -> 测试 -> 输出结果的流程向开发人员反馈结果的 report

如何通过 Github Action 薅腾讯云云开发的羊毛

阅读更多关于如何通过 Github Action 薅腾讯云云开发的羊毛

如何通过 Github Action 薅腾讯云云开发的羊毛印记中文一直致力于为国内前端开发者提供技术文档的翻译服务，比如 React, Webpack, Node.js 等技术文档，都能有看到印记中文参与的影子。为了让文档的加载速度更好，我们都把文档全数部署在腾讯云国内的 CDN 服务上。不过这也带来了比较大的成本压力，做部署服务买的机器、每几个月要买 TB 级别的 CDN 流量包。直到最近，腾讯云云开发推出的静态资源部署服务，对于许多文档站、静态个人官网，无论是在部署上，还是价格上，都非常的友好亲民。经过计算发现，比将站点部署在云服务器以及传统的 CDN 更加实惠。这么好的羊毛，不薅天理难容啊！不过由于印记中文的文档种类多，情况各不相同，经过一番的研究之后，梳理出以下的需求，并且输出了对应的解决方案，希望开放出来给大家针对自身的情况使用。印记中文的部署需求需求一：文档个数多，希望可以统一发布方案由于印记中文的文档不少，至少有 10 个以上，部署的方案需要比较整齐划一才比较好地做维护。之前我们是通过 Node.js 写了一个部署服务，一定程度上减轻了部署的负担，但还是需要在每个文档里，新加入脚本做构建和触发部署。而 Github Action 推出后，完美解决了 Github 项目构建与部署问题，因此基于 Github Action 做一个部署方案是比较好的解决方案。

单页面和多页面应用场景总结

阅读更多关于单页面和多页面应用场景总结

单页面和多页面应用场景总结一、总结一句话总结：多页面应用做官网、电商类这种对SEO和首屏加载速度要求比较高的项目，单页面可以做后台管理系统页面 1、什么是单页面应用？ a、【外壳页面】：在项目应用中，以单个html页面作为外壳页面，并在外壳页面一次性加载项目所依赖的资源（CSS、JS）。 b、【无感切换】：项目中其他页面作为页面片段在外壳页面中进行无感切换（例如：利用H5的History监听到URL的变化，对页面片段进行切换（删除和添加））。 2、单页面形式的传统多页面结构？本质上是将单页面应用拆分成多个单页面应用，多个单页面应用之间的调整通过传统形式来实现 3、单页面原理？利用H5的History监听到URL的变化，对页面片段进行切换（删除和添加） 4、如何选择页面结构？ a、对于官网、电商类这种对SEO和首屏加载速度要求比较高的项目，可以采用多页面应用结构。或者优秀“服务器端渲染方案”。 b、如果是后台管理系统页面，不对外开放的系统，用单页面应用，这样可以利用第三方框架（Vue、React等）对系统进行组件化， c、单页面应用如果系统过大，导致首屏加载缓慢，可以将系统拆分成单页面形式的多页面应用。一般来说登录页面作为后台管理系统的首屏页面。二、单页面和多页面应用场景总结转自或参考：单页面和多页面应用场景总结_javascript_u012475786的专栏

你可能不需要单页面应用

阅读更多关于你可能不需要单页面应用

你可能不需要单页面应用一、总结一句话总结：单页面应用和传统服务端渲染互有优缺：根据实际需求选择合适的方案：也可以根据需求采用混合式的解决方案二、你可能不需要单页面应用转自或参考：你可能不需要单页面应用 - 众成翻译 https://www.zcfy.cc/article/you-probably-don-t-need-a-single-page-application 随着 React、Angular、Vue.js、Elm 等前端框架的迅速崛起，单页面应用在 WEB 中无所不在。对大多数开发者来说，单页应用已经成为他们‘默认’工具集的一部分，在开始一个新的项目时，由于技术选型形成了思维定势，一些开发者往往直接想到：一个提供 REST API 的服务端，和 React、Angular、Vue、Elm 中的一个前端框架。这些工具有什么问题吗？当然没有，实际上我喜欢用这些工具进行开发，然而我只会在实际需求将我推向那个方向时才会选择这种架构。如果没有明确的原因去开发一个单页面应用，我在本周每一个工作日都会使用传统服务端渲染的架构进行开发，这种架构很简单并且开发起来更快：无状态请求传统的 WEB 服务器是无状态的（HTTP协议是无状态的），这意味着每个端点都可以单独进行推理和测试。相比之下，单页面应用必须在整个会话期间精确地定义状态是如何加载，刷新以及销毁的

vue-cli学习笔记 vue-cli学习笔记 MVC、MVP、MVVM

阅读更多关于 vue-cli学习笔记 vue-cli学习笔记 MVC、MVP、MVVM

Vue.js介绍基本概念 Vue.js 是目前最火的一个前端框架 React是最流行的一个前端框架 React除了开发网站，还可以开发手机原生App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架 Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或已有项目整合 Vue有丰富的配套三方类库，可以整合起来做大型项目的开发官网 English Site 中文网站介绍 Vue.js是一个渐进式框架，动态构建用户界面作者：尤雨溪华裔前Google 工程师特点 Vue.js 是基于MVVM架构编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目参考了React的组件化和虚拟DOM技术，借鉴了angular的模板和数据绑定技术 Vue的生态 Vue.js 关注UI层面工具 DevTools vue-cli: vue 脚手架 vue-loader 核心插件 vue-router: 路由,vuex: 状态管理,vue服务器端渲染,vue-resource(axios): ajax 请求 MVC、MVP、MVVM 1. MVC 概念 1.

3、React绑定属性和事件，以及事件的响应。

阅读更多关于 3、React绑定属性和事件，以及事件的响应。

大家好，我是Counterrr 接下来讲讲React的绑定属性和事件，以及事件的响应，这里就不赘述环境的搭建了，环境搭建可以看我前面的文章。( 1、React环境搭建，以及初识jsx语法。 ) 好的，主要分两部分React绑定属性和事件： 1、绑定属性：我们用vscode打开之前在桌面建好的react-demo文件，打开vscode终端命令行输入命令live-server启动服务，再在vscode再开启一个命令行输入 npm run babel -- src / app . js - o public / scripts / app . js - w 在上篇文章（ 2、React熟悉，jsx语法以及变量绑定和三种渲染语句）中，我们最后写了如下代码： // 逻辑运算符进行条件渲染 let product = { favorite : 'React' } const template = ( < div > { product . favorite && < div > 我喜欢的语言有 : { product . favorite } < / div > } < / div > ) ReactDOM . render ( template , document . getElementById ( 'app' ) ) 可以看到此时网页显示的内容：好的

react-native路由总结

阅读更多关于 react-native路由总结

安装 npm install @react - navigation / native npm install @react - navigation / stack npm install @react - navigation / bottom - tabs npm install @react - navigation / material - top - tabs react - native - tab - view npm install react - native - reanimated react - native - gesture - handler react - native - screens react - native - safe - area - context @react - native - community / masked - view 配置把下面两行代码添加到react项目的android/app/build.gradle中的dependencies部分 implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02' 堆栈导航

订阅 react