React基础概念及脚手架创建

MGYXP

已于 2022-06-27 15:13:54 修改

阅读量201

点赞数

文章标签： react.js javascript 前端

于 2022-06-27 15:13:20 首次发布

本文链接：https://blog.csdn.net/weixin_42329632/article/details/123865404

版权

React 用于构建用户界面的JavaScript库。主要用于构建UI。

特点：

1、声明式设计：采用声明范式，可以轻松描述应用。

2、高效：通过对DOM的模拟，最大限度地减少与DOM的交互。

3、灵活：可以与已知的库或框架很好地配合。

4、JSX：JSX是js语法的扩展。建议使用。

5、组件：构建组件，使代码更加容易得到复用，能够很好的应用在大项目的开发中。

6、单向响应的数据流：减少重复代码，比传统数据绑定更简单。

ReactActive框架 ios、Android开发基于原生语法与react一致。

支持服务端渲染。

起源于facebook ins软件。

使用jsx创建组件，函数式的UI编程

react核心：通过diff算法和虚拟dom实现视图的渲染。

声明式、组件化。

虚拟DOM：将DOM抽象为虚拟DOM，只对发生改变的差异部分渲染，提高性能。在内存中克隆出一个真是的dom，操作的是内存中的内容dom。

Diff算法：

相关js包下载地址：

https://github.com/cirsyou/plugins

引入的三个库：react.development.min.js 、react-dom.development.min.js 和 babel.min.js

react.development.min.js - React核心库。

react-dom.development.min.js - 提供与DOM相关的功能。

babel.min,js - 将es6转换为es5，浏览器不支持es6语法。

Demo1：往容器中插入一个span标签，class为：“it-like”，内容为：“hello world”，两种实现方式：（a）典型的js方式；（2）jsx方式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--Demo1：往容器中插入一个span标签，class为：“it-like”，内容为：“hello world”，两种实现方式：（a）典型的js方式；（2）jsx方式；-->

<!--1、创建容器-->
<div id="app1"></div>
<div id="app2"></div>
<!--2、引入需要的js包-->
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/browser.min.js"></script>

<script>
    // a)JS方式：
    // 1、创建变量
    let myClass = 'it-like';
    let myContent = 'hello world';
    // 2、创建DOM
    const vDom = React.createElement('span', {className: myClass}, myContent);
    // 3、将虚拟DOM渲染至页面上
    ReactDOM.render(vDom, document.getElementById('app1'));
</script>
<script type="text/babel">
    // b)JSX方式：
    const vDom1 = <span className={myClass}>{myContent.toUpperCase()}</span>;
    ReactDOM.render(vDom1, document.getElementById('app2'));
</script>
</body>
</html>

Demo2：JSX常见的界面操作方式

a）多重标签嵌套

jsx中添加属性时，className代替class出现。

jsx创建DOM时，所有的节点必须有唯一的根元素进行包裹。

jsx语法中，标签必须成对出现；如果是单标签，必须自闭和。

b）jsx中的变量，表达式要写在{ }内

isx中只能使用表达式，不能出现语句（if等）。

c）内联样式通过对象方式引入

d）数组遍历

jsx语法中注释写法 {/* 注释 */}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Practice</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/browser.min.js"></script>
<script type="text/html">
// a)多重标签嵌套
ReactDOM.render(
    <div>
        <h1>多重标签嵌套</h1>
        <p>有多个标签时，只需要保证一个节点就可以，此示例中div节点为总的节点，里面可以包含很多并列的标签，与html写法一致</p>
        <p>不可以直接在ReactDom.render中并列书写多个节点</p>
        <img src="img/123.JPG" alt="lyj" width="500"/>
    </div>
    , document.getElementById('app')
)
</script>

<script type="text/html">
    // b)js中的变量，表达式要写在{}内
    const str ='hello world';
    ReactDOM.render(
        <div>
            <span>{str}</span>
            <span> 100+25*3 = {100+25*3}</span>
        </div>
        , document.getElementById('app')
    )
</script>

<script type="text/html">
    // c)内联样式通过对象的方式引入
    const myStyle ={
    backgroundColor:'black',
    color:'white',
    fontsize:100
    };

    ReactDOM.render(
    <div>
        <span style={myStyle}>COLOR</span>
    </div>
    , document.getElementById('app')
    )
</script>

<script type="text/babel">
    // d)数组遍历
    //数组数据
    const dataArr = [
        {name: 'AAA', age: 20},
        {name: 'BBB', age: 22},
        {name: 'CCC', age: 24},
        {name: 'DDD', age: 26}
    ];
    //创建虚拟DOM
    const vDom = (
        <ul>
            {
                dataArr.map((data, index) =>
                    <li key={index}> {index + 1} name:{data.name} age:{data.age}</li>
                )
            }
        </ul>
    );
    //渲染
    ReactDOM.render(vDom, document.getElementById('app'));

</script>
</body>
</html>

组件：一个应用、板块、页面中用于实现某个局部的功能。包括html、js、css等。把这些局部功能组装到一起就形成了完整的有一个大的功能。

组件化：如果一个应用是用多组件的方式进行综合开发的，那么这个应用就是一个组件化应用。

模块：多个组件形成模块，或者是一个提供特定功能的js文件。

模块化：一个应用都是用模块的形式来构建的。

react脚手架环境搭建

1、安装node.js

2、安装npm

3、安装cnpm

4、安装yarn

5、创建React开发环境

Ctrl+R进入cmd控制台（仅第一次配置需要，后续则不需要这一步）

npm install -g create-react-app

进入想要创建项目的目录 cd d:

create-react-app reactdemo

至此项目已创建完。

cd 进入项目中 cd reactdemo

npm start //运行项目

会弹出react页面。

目录分析：

index.js：主入口文件

App.js：主组件入口

manifest.json：制定了开始页面index.html

package-lock.json：项目依赖的安装包和版本号的下载地址，此文件一般不用操作。

package.json：是node.js的一个包管理文件。

README.md：说明文档，项目介绍等。

.gitignore：使用git上传文件时配置。

node_modules：下载好的依赖包文件，一般不需要操作，当做运行环境需要的文件。

MGYXP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React基础概念及脚手架创建

React十一用于构建用户界面的JavaScript库。主要用于构建UI。特点：1、声明式设计：采用声明范式，可以轻松描述应用。2、高效：通过对DOM的模拟，最大限度地减少与DOM的交互。3、灵活：可以与已知的库或框架很好地配合。4、JSX：JSX是js语法的扩展。建议使用。5、组件：构建组件，使代码更加容易得到复用，能够很好的应用在大项目的开发中。6、单向响应的数据流：减少重复代码，比传统数据绑定更简单。ReactActive框架 ios、Android开发基于原生
复制链接

扫一扫