认识 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. jsp+servlet实现的验证登陆

    可以将业务逻辑处理和视图相分离,使用jsp界面表示视图,使用servlet处理业务逻辑 login.jsp <%@ page language="java" contentT ...

  2. Ubuntu系统备份还原教程

    一.备份 很多人有备份系统的习惯,以防系统挂.Windows下可以用DISM创建一个系统镜像,在Ubuntu下,我们可以使用squashfs-tools创建系统镜像. 准备工作 可启动LiveCD一份 ...

  3. 每天进步一点点------如何实现Sobel Edge Detector? (Image Processing) (C/C++)

    使用C與C++/CLI實現Sobel Edge Detector. http://www.cnblogs.com/oomusou/archive/2008/07/23/sobel_edge_detec ...

  4. 关于XShell&XFtp

    今天在开发的时候要打包一个东东到测试服务器去,突然发现xftp用不了,然后各种下载破解.绿色版 结果都是一堆广告,原来这个xshell支持民用版,无需破解就能下载使用,这里小小的记录下 一.  前言 ...

  5. android开发基础(ViewModel)

    今天学习了ViewModel,其是Jetpack的一个类,它可以将界面中的数据独立出来,这样不会造成页面上信息的丢失. 我跟着视频做了一个简单的实例: 首先创建项目的时候它和以往的项目会有些不一样,因 ...

  6. 解决maven项目java中配置文件打包被忽略

    pom.xml中添加以下配置 <build> <!--配置打包时不过滤非java文件开始 --> <!--说明,在进行模块化开发打jar包时,maven会将非java文件 ...

  7. [QT] QT5.12 HTTPS请求 TLS initialization failed

    #前言 接触到了Qt的网络编程 然后尝试对一个http页面请求获取源码 是可以的 但是当对https界面发出请求的时候总是错误 TLC什么的初始化失败 百度也是没有结果 然后网上各种方法 比如说编译O ...

  8. 吴裕雄 PYTHON 神经网络——TENSORFLOW 单隐藏层自编码器设计处理MNIST手写数字数据集并使用TensorBord描绘神经网络数据

    import os import numpy as np import tensorflow as tf import matplotlib.pyplot as plt from tensorflow ...

  9. MTSQL主主同步方案

    ** MySQL主主+Keepalived **MySQL+DRBD+Heartbeat 在企业中,数据库高可用一直是企业的重中之重,中小企业很多都是使用mysql主主方案,一主多从,读写分离等,但是 ...

  10. 05-Docker-Container资源限制

    目录 05-Docker-Container资源限制 参考 可压缩性 MEM限制 选项说明 压测示例 CPU限制 选项说明 压测示例 05-Docker-Container资源限制 Docker Ve ...