前端三大主流框架之一 React

最新推荐文章于 2024-06-11 00:00:00 发布

可爱鬼

最新推荐文章于 2024-06-11 00:00:00 发布

阅读量5.4k

点赞数 4

文章标签：三大框架之一

本文链接：https://blog.csdn.net/weixin_42709239/article/details/81070686

版权

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 且后面的属性第一个字母要大写其遵循小驼峰命名规则

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

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

可爱鬼

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端三大主流框架之一 React

ReactReact是Facebook开发的一款JS库，其更注重于视图层。React不是一个MVC框架，它是一个构造可组合式用户界面的库。它鼓励创建可重用的UI组件显示会随着时间而改变的数据。如果你是一个新手，你可以选择直接引入方法安装步骤1、下载需要引入的文件第一步：创建一个文件夹(名字必须是英文)，打开cmd 输入全局命令 npm i...
复制链接

扫一扫