认识 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的方式的更多相关文章

  1. React.js入门笔记(续):用React的方式来思考

    本文主要内容来自React官方文档中的"Thinking React"部分,总结算是又一篇笔记.主要介绍使用React开发组件的官方思路.代码内容经笔者改写为较熟悉的ES5语法. ...

  2. 将HTML页面自动保存为PDF文件并上传的两种方式(一)-前端(react)方式

    一.业务场景 公司的样本检测报告以React页面的形式生成,已调整为A4大小的样式并已实现分页,业务上需要将这个网页生成PDF文件,并上传到服务器,后续会将这个文件发送给客户(这里不考虑). 二.原来 ...

  3. react引入方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  5. React,React Native中的es5和es6写法对照

    es6用在React中的写法总结: 在es6还没有完全支持到浏览器的阶段里,已经有很多技术人员开始用es6的写法来超前编程了,因为有转义es6语法的工具帮助下,大家才可大量使用.解析看看es6写法用在 ...

  6. React Native at first sight

    what is React Native? 跟据官方的描述, React Native是一套使用 React 构建 Native app 的编程框架. 推出不久便引发了广泛关注, 这也得益于 Java ...

  7. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  8. React学习系列一

    系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好 ...

  9. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

随机推荐

  1. Linux挂载(mount,umount及开机自动挂载

    挂载概念简述: 根文件系统之外的其他文件要想能够被访问,都必须通过“关联”至根文件系统上的某个目录来实现,此关联操作即为“挂载”,此目录即为“挂载点”,解除此关联关系的过程称之为“卸载” 1.挂载:根 ...

  2. springboot集成实现秒杀

    springboot集成开发实现商场秒杀 加入主要依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  3. 《实战Java高并发程序设计》读书笔记五

    第五章 并行模式与算法 1.单例模式 是一种对象创建模式,用于产生一个对象的具体实例,它可以确保系统一个类只产生一个实例. 对于频繁创建使用的对象可以省略new 操作花费的时间,可以减少系统开销. 由 ...

  4. cmake 单个目录多个文件的情况

    参考:https://www.hahack.com/codes/cmake/# 源文件一共有三个:main.cpp.MathFunctions.h.MathFunctions.cpp 文件内容分别如下 ...

  5. C语言程序设计(二)

    目录:   1.算法基本概念 2.认识循环语句 3.算法的表示法 4.求素数 5.求闰年 6.判断一个数是否为回文数 算法基本概念: (一)一个程序主要包含的2方面信息: 1.对数据的描述,在程序中要 ...

  6. JSON.parse()处理json字符串时需要处理的特殊字符

    var str= "json字符串"; str=str.replace(/\\/g,"\\\\"); str=str.replace(/\n/g,"\ ...

  7. tomcat 开机自启

    d /usr/lib/systemd/system touch tomcat.service chmod 777 tomcat.service vi tomcat.service [Unit]Desc ...

  8. spark实验(二)--scala实验(3)

    实验1,计算级数: 首先打开安装完scala ide的eclipse,在eclipse 中新建一个scala project. 然后新建一个scala的object对象 导入scala.io.StdI ...

  9. spark实验(二)--eclipse安装scala环境(2)

    此次在eclipse中的安装参考这篇博客https://blog.csdn.net/lzxlfly/article/details/80728772 Help->Eclipse Marketpl ...

  10. 「题解」「2014 NOI模拟赛 Day7」冒泡排序

    目录 题目 考场思考 正解 题目勾起了我对我蒟蒻时代的回忆,虽然我现在也蒟蒻 题目 点这里 可能链接会挂,在网上搜题目就有. 毕竟 \(BZOJ\) 有点老了... 考场思考 本来以为十分友善的一道题 ...