1-使用React的方式
认识 React
React是一个用于构建用户界面的 JAVASCRIPT 库。(JQuery也是)
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。mvvm
React起源于 Facebook 的内部项目。
语法:
React 使用 JSX (js xml)来替代常规的 JavaScript
JSX是javascript的语法糖
我们不需要一定使用 JSX,但它有以下优点:
1,JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
2,它是类型安全的,在编译过程中就能发现错误。
3,使用 JSX 编写模板更加简单快速。
jsx模板 const temp = <h1>hello</h1>; Let a = <div> <h1></h1><h2></h2> 最外头一定要一个根标签包裹住子标签,注意模版中的标签都要闭合 </div>
使用React的两种方式:
1,直接在html端 使用script方式引入 babel,react,reac_dom js文件
效率低,因为要实时转化
2,安装脚手架,以项目的方式使用react
Package.json中 是项目下载包依赖的记录
安装步骤:
安装create-react-app
cnpm instal -g create-react-app //全局安装脚手架
创建项目
create-react-app app(项目名)
启动项目
cd app
npm start //yarn start
安装cnpm
npm install -g cnpm
对于使用别人的项目,一般是不会把nodelmodel(放项目依赖的文件夹)传给你的(因为太大),所以首先先下载好该项目的依赖,通过npm install 会自动根据packge.json文件中的记录下载依赖 ,之后启动项目即可 。
声明组件的方式有两种:
1,函数声明
函数名必须大写,才表示是组件,否则浏览器认为是html元素
组件中return返回的是一个模版。
第一个参数是组件(或者说是react元素),第二个参数是dom节点
2,类声明
1-使用React的方式的更多相关文章
- React.js入门笔记(续):用React的方式来思考
本文主要内容来自React官方文档中的"Thinking React"部分,总结算是又一篇笔记.主要介绍使用React开发组件的官方思路.代码内容经笔者改写为较熟悉的ES5语法. ...
- 将HTML页面自动保存为PDF文件并上传的两种方式(一)-前端(react)方式
一.业务场景 公司的样本检测报告以React页面的形式生成,已调整为A4大小的样式并已实现分页,业务上需要将这个网页生成PDF文件,并上传到服务器,后续会将这个文件发送给客户(这里不考虑). 二.原来 ...
- react引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React,React Native中的es5和es6写法对照
es6用在React中的写法总结: 在es6还没有完全支持到浏览器的阶段里,已经有很多技术人员开始用es6的写法来超前编程了,因为有转义es6语法的工具帮助下,大家才可大量使用.解析看看es6写法用在 ...
- React Native at first sight
what is React Native? 跟据官方的描述, React Native是一套使用 React 构建 Native app 的编程框架. 推出不久便引发了广泛关注, 这也得益于 Java ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- React学习系列一
系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好 ...
- React组件
React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...
随机推荐
- 银行T0理财怎么选
## 从现金管理说开去 现金是资产配置中的基石,买股票需要花掉现金,吃饭消费也要花掉现金.现金和我们的生活息息相关,需要慎重地管理起来,因此现金管理应运而生. 现金管理需要兼顾 *流动性* 和 *收益 ...
- 存储引擎:engine
1.表类型: 默认的服务器表类型,通过my.ini文件可以手动修改配置:default-storage- engine=INNODB 在创建表,或者编辑表时,可以指定表的存储引擎: 语法:engine ...
- API接收数据反序列化失败问题查找
C# API接收到数据后,反序列化后直接返回null,而不会给出错误提示,所以不好排查错误. 通过在api中直接进行反序列化,能够得到错误明细: 没有报错的时候,request会直接为null,不会报 ...
- mybatis - 执行 getById
1. getById 的执行 前面一篇 提到过, Mapper.java 创建的时候, 会通过 jdk 代理的方式来创建, 且代理处理类为: MapperProxy . 所以当执行 UserMappe ...
- 谁说程序员没有时间关心女朋友的,Python 教你如何掌握女神情绪变化
很多人都是在朋友圈装死,微博上蹦迪.微信朋友圈已经不是一个可以随意发表心情的地方了,微博才是! 所以你不要傻傻盯着女神的朋友圈发呆啦!本文教你如何用 Python 自动通知女神微博情绪变化,从今天开始 ...
- jmeter循环读取数据库中的数据
1,添加一个jdbc请求 2,添加一个循环控制器,循环的次数为sql返回的记录数${var_#} 3,添加一个计数器(用来做变量拼接) 4,拼接变量,往目标接口发请求 最后脚本的构造如下:
- pycharm中可以运行的程序,在命令行中运行提示模块不存在的问题
运行模块(包含main函数的模块),在模块开头添加以下代码,原因是pycharm运行python脚本时,会自动添加以下代码,将当前库加入到系统库目录集合中,在命令行中运行需要手动添加import os ...
- JavaScript 对象属性与方法
对象的创建: 1 字面量创建 var obj = {a:1,b:2}; 2 构造函数创建 var obj = new Object(); obj.a = 1; obj.b = 2; 3 Object. ...
- 洛谷P1064 金明的预算方案(01背包)
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NNN元钱就行” ...
- ios 用touchend事件 pc用click touchend击穿
var clickEvent = (function() { if ('ontouchend' in document.documentElement === true) return 'touche ...