首页 > 编程知识 正文

前端三大主流框架之一 React,js三大主流框架

时间:2023-05-03 08:09:48 阅读:240185 作者:2534

React

React是Facebook开发的一款JS库,其更注重于视图层。

React不是一个MVC框架,它是一个构造可组合式用户界面的库。它鼓励创建可重用的UI组件显示会随着时间而改变的数据。

如果你是一个新手,你可以选择直接引入方法

安装步骤

1、下载需要引入的文件

       第一步:创建一个文件夹(名字必须是英文),打开cmd  输入全局命令    npm install bower -g

       第二步:输入 bower install react  如果你需要指定的版本 可输入 bower install react #15.6.1

       第三步:输入 bower install babel

2、引入文件

  创建一个html模板如下代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/react-dom.js"></script> <script src="bower_components/babel/browser.js"></script></head><body> <div id="app"> </div> <script type="text/babel"> </script></body></html>

上面代码有两个地方需要注意。

首先,最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。

其次,上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须按顺序依次引入。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法。

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

ReactDOM.render( <div> <h1>i love you !</h1> </div>, document.getElementById("app") ) JSX 语法(以下代码包含jsx语法)

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,它允许 HTML 与 JavaScript 的混写。

JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析

可用let声明代码如下

let tag = <div><div>hollo</div><span>word</span></div> ReactDOM.render( <div> <h2>{tag}</h2> </div>, document.getElementById("app") )

多选框单选框默认选中且可以更改  input框书写默认值可更改

ReactDOM.render( <div> <input type='text' defaultValue='pug'/> <input type='radio' name='s' defaultChecked /> <input type='radio' name='s' defaultChecked /> <input type='checkbox' defaultChecked /> </div>, document.getElementById("app") )

以上代码需注意   在默认选中或更改时需添加default  且后面的属性第一个字母要大写 其遵循小驼峰命名规则

如果想要了解驼峰命名规则,点击我

 

                                     请多多支持小可爱哦!!!

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。