腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

进击的君君的前端之路

专栏作者

84

文章

179448

阅读量

28

订阅数

React学习笔记—JSX

react java html

所谓JSX，是JavaScript的语法扩展（eXtension），让我们在JavaScript中可以编写像HTML一样的代码。 JSX中的这几段代码看起来和HTML几乎一摸一样，都可以使用<div><button>之类的元素，所以只要熟悉HTML，学习JSX完全不成问题，但是，我们一定要明白两者的不同之处。首先，在JSX中使用的“元素”不局限于HTML中的元素，可以是任何一个React组件。例如： // Counter组件 import React, { Component } from 'react'

2018-06-28

8070

React学习笔记—React组件

1、Component React的首要思想是通过组件（Component）来开发应用。所谓组件，简单说，指的是能完成某个特功能的独立的、可重用的代码。基于组件的应用开发是广泛使用的软件开发模式，用分而治之的方法把一个大的应用分解成若干小的组件，每个组件只关注于某个小范围的特定功能，但是把组件组合起来，就能够构成一个功能庞大的应用。如果分解功能的过程足够巧妙，那么每个组件可以在不同场景下重用，那样不光可以构建庞大的应用，还可以构建出灵活的应用。打个比方，每个组件是一块砖，而一个应用是一座楼，想要一次锻造就

2018-06-28

9180

1、组件为什么要大写？ 2、props如何声明默认值方法一： class Demo extends React.Component { constructor() { ...... } // static是es6的语法 static defaultProps = { age: 20 } render() { return (<div> the age is { this.props.age } </div>)

2018-06-28

4530

即时通讯系统(一)

1、JSX简介 jsx本质上还是js，因此遵循驼峰命名的方式 1.jsx属性 2.jsx如何防止xss漏洞 React DOM 在渲染之前默认会过虑所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本)攻击。 3.dangerouslySetInnerHTML 4.false/undefined/null/0 像这种特殊的数据类型如何渲染（false/undefined/null不显示，0显示） 2、React组件和prop

2018-06-28

2.5K0

React—表单及事件处理

react html 数据处理

表单提到React中表单及事件处理，就不得不先介绍一下控组件与非受控组件的概念。在HTML中，表单元素与其他元素最大的不同是它自带值或数据，而且在我们的应用中，只要是有表单出现的地方，就会有用户输入，就会有表单事件触发，就会涉及的数据处理。在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到受控组件与非受控组件这两个概念。 React推荐我们在绝大多数情况下都使用受控组件。这样可以保证表单的数据在组件的state管理之下，而不是各自独立保有各自的数

2018-06-28

1.3K0

React官方脚手架create-react-app

为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。 create-react-app所创建的应用入口文件是src/index.js文件。 1、使用的原因以及特性：无需配置；集成了对 React, JSX, ES6 和 Flow 的支持；集成了开发服务器；配置好了浏览器热加载的功能；在 JavaScript 中可以直接 import CSS 和图片；自动处理 CSS 的兼容问题，无需添加 -w

2018-06-28

8450

create-react-app慢的解决方法

在操作官方实例create-react-app时，需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢。解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app指令默认调用npm，于是直接把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别了。 npm c

2018-06-28

1.6K0

create-react-app脚手架中配置sass

首先将你的文件名称改成scss结尾的文件。然后安装依赖： cnpm install sass-loader node-sass --save-dev 找到webpack.config.dev.js文件和webpack.config.prod.js文件，将module配置项的最后一项配置改成如下： { loader: require.resolve('file-loader'), // Exclude `js` files to keep "css" loader working as i

2018-06-27

3210

React简介 React首次被提出是在2014年的f8大会（f8是由facebook组织的一个年度的技术峰会，目标听众是从事web周边产品和服务的开发者和企业）上，当期的主题叫做 Rethinking Web App Development at Facebook，所以可以这样定义React：颠覆式前端UI开发框架。我们都知道基于html的前端界面开发正变得越来越复杂，传统的开发方式在解决将来自于服务器或者用户输入的交互数据，动态反应到复杂界面上的时候，代码量变得越来越大，越来越难以维护，常常力不从心。

2018-06-27

6400

关于es2015箭头函数的大括号代码块部分的一点理解

背景：在react中，遍历一个数组，生成一系列input插入dom 错误代码： {phones.map((phone, index) => { <div key={index}>{index}</div> })} 控制台源码： phones.map(function (phone, index) { _react2.default.createElement( 'div', { key: index }, index ); }) 这里只

2018-06-27

4510

1、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 2、ReactJS的背景和原理在Web开发中，我们总需要将变化的数据实时反应到UI上，这时

2018-06-27

3.8K0

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态