前端开发项目的JavaScript库之React详解--react基本概念、jsx语法and脚手架（一）

开课吧小易
125 阅读5分钟

作者名：木木

一、React是什么？

React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称为”组件”。

二、React特点

  • 1.声明式设计 -React采用声明范式，可以轻松描述应用。
  • 2.高效 -React通过对DOM的模拟，最大限度地减少与DOM的交互。
  • 3.灵活 -React可以与已知的库或框架很好地配合。
  • 4.JSX -JSX是JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。
  • 5.组件 -通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
  • 6.单向响应式的数据流 - React实现了单向相应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

三、引入React.js库

React.js框架本身包含两个部分：

  • 1.react.js：提供了React.js核心功能代码，如：虚拟dom、组件
  • 2.React-dom.js：提供了与浏览器交互的DOM功能，如：dom渲染
    <!DOCTYPE html>
    <html lang="m 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>
    </head>
    <body>

        <div id="app"></div>
        
        <script src="./js/react.production.min.js"></script>
        <script src="./js/react-dom.production.min.js"></script>
        <script type="text/jsx" src="js/app.js"></script>
    </body>
    </html>
    // 需注意：最后一个script标签的type属性为text / jsx。这是因为React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=’text/jsx’。

js/app.js

ReactDOM.render(
    '<h1>Hello,world!</h1>',
    document.getElementById('app')
);

上面代码将一个h1标签插入app节点，运行结果如下：

  • Hello,world!

React.render()

ReactDOM.render(element,container[,callback])

element: 要渲染的内容 container: 要渲染的内容存放容器 callback: 渲染后的回调函数

四、JSX

1.JSX是什么？

  • JSX是一个基于JavaScript + XML 的一个- 扩展语法
  • 它可以作为 值 使用
  • 它并不是 字符串
  • 它也不是 HTML
  • 它可以配合 JavaScript 表达式 一起使用

2.JSX优点：

  • JSX执行更快，因为它在编译为JavaScript代码后进行了优化
  • 它是类型安全的，在编译过程中就能发现错误
  • 使用JSX编写模块更加简单快速

3.JSX语法：

  • 1> 如果输出多行结构，可以使用一对小括号来包含整个结构
const App = (
    <div>
        <h1>开课吧</h1>
        <p>web前端高级工程师</p>
    </div>
)
  • 2> 注意：JSX只能有一个顶级父元素
const App = (
    <div>
        <h1>开课吧</h1>
        <p>web前端高级工程师</p>
    </div>
    <div>第二个</div>
)
//以上代码会出错
  • 3> 在JSX中可以嵌套表达式：
et name = '开课吧';
let title = 'web前端高级工程师';
const App = (
    <div>
        <h1>{name}</h1>
        <p>{title}</p>
    </div>
);
//注意分清楚 表达式 与 语句 的区别
// if、for、while这些都是语句，JSX不支持语句

<h1>{if(true){...}}</h1>//错误
  • 4> JSX中的注释
<div>
    {/*注释*/}
    {/*
            多行注释
    */}
</div>
  • 5> JSX更偏向于JavaScript,所以对于一些特殊的属性，使用的是JavaScript中的属性名风格
// 错误
const App = (
    <div class="box1"></div>
);
// 正确
const App = (
    <div className="box1"></div>
);
  • 6> 为了更加方便的操作元素的style,针对style这个属性有特殊的处理
const App = (
    <div style={{width: '100px', height: '100px', color:'red'}}></div>
);

// 这里的两个 <u>{{}}</u> ，外部的大括号表示的是前面说的表达式语法中的大括号，里面的大括号是表示对象的大括号

let skin = {width: '100px', height: '100px', color:'red'};
const App = (
    <div style={skin}></div>
);
  • 7> JSX中的表达式也可以使用在属性上，但是使用的时候需要注意：不要使用引号包含
let id = 'kaikeba';

// 错误
const App = (
    <div id="{id}"></div>
);

// 正确
const App = (
    <div id={id}></div>
);

4.JSX输出类型：

字符串、数字：原样输出 数组：转成字符串，数组.join(‘’) 使用 空字符串 而不是默认的 逗号 连接 其他对象：不能直接输出 布尔值、空、未定义：会被忽略

5.JSX列表渲染：

  • 如果需要渲染一组数据，我们可以通过遍历（数组遍历、对象遍历...）等操作，返回一组jsx

数据：

let zMouse = {
  name: '张三',
  gender: '男',
  skills: ['JavaScript', 'Node.js'],
  interests: ['音乐', '足球', '编程']
};

数组：

function getSkills(){
    return (
        <ul>
            {zMouse.skills.map(skill => <li></li>)}
        </ul>
    )
}
const App = (
    <div>{getSkills()}</div>
);
// 或者
const App = (
    <div>
        <ul>
            {zMouse.skills.map(skill => <li>{skill}</li>)}
        </ul>
    </div>
)

对象：

function getKeys(){
    let arr = [];
    for(let k in zMouse){
        arr.push(<li>{k}</li>)
    }
    return arr;
}

const App = (
    <div>
        <ul>{getKeys()}</ul>
    </div>
)

//或者
const App = (
    <div>
        <ul>
            {Object.keys(zMouse).map(key => <li>{key}</li>)}
        </ul>
    </div>
)

Key

  • 默认情况下，React从性能上考虑，会尽可能的复用结构，针对 同组可变列表 结构，为了避免出现某些方面的问题，通常会给每一个列表添加一个 唯一的key
<ul>
  {[{id:1,name:'zs',id:2,name:'ls'}].map(user => <li key={user.id}>{user.name}</li>)}
</ul>

 // 注意：key 的值不推荐使用数组的下标

条件渲染

function moreInterests() {
    if (zMouse.interests.length > 2) {
        return <a href="#">更多</a>
    }
}
const App = (
        <div>
            爱好：{zMouse.interests.map(interest=>{
            return <span style={{marginRight:"10px"}}>{interest}</span>
        })}
        {moreInterests()}
    </div>
);

三目运算符

const App = (
        <div>
            爱好：{zMouse.interests.map(interest=>{
            return <span style={{marginRight:"10px"}}>{interest}</span>
        })}
        {zMouse.interests.length > 2 ? <a href="#">更多</a> : null}
    </div>
);

与或运算符

const App = (
    <div>
        爱好：{zMouse.interests.map(interest=>{
                    <span style={{marginRight:"10px"}}>{interest}</span>
              })}
          {zMouse.interests.length > 2 && <a href="#">更多</a>}
          {zMouse.interests.length < 4 || <a href="#">更多</a>}
    </div>
);

五、React脚手架

  • create-react-app是用于搭建react项目的脚手架。它的优势在于省略了很多涉及配置的地方，能够更加容易上手。

1.安装与使用：

通过 npm、yarn、npx都可以

1>安装 npm

npm i -g create-react-app

yarn

 yarn global add create-react-app

2>使用 安装完成以后，即可使用create-react-app命令

  • create-react-app 项目名称 或者通过npx的方式
  • npx cerate-react-app 项目名称

2.项目目录结构说明：

运行命令以后，就会在运行命令所在的目录下面创建一个以项目名称为名的目录：

my-app/
  README.md        //主要是项目的说明文件，在里面写一些关于本项目的说明
  node_modules/    //里面放的是项目依赖的第三方的包，这些包不是我们自己写的，是脚手架工具要实现自己的功能，需要依赖外部的一些第三方的包文件来实现
  package.json     //脚手架自动生成的一个文件，是一个node的文件，里面有一些项目的脚手架的版本，以及一些npm的命令
  public/        
    index.html     //项目首页的html模板
    favicon.ico    //图标
  src/             //src里面放的是项目所有的源代码
    App.css
    App.js
    App.test.js    //自动化测试的文件
    index.css
    index.js       //项目的入口文件
    logo.svg

3.命令脚本：

create-react-app同时也提供了其它一些命令来帮助我们进行开发 1> npm start 启动一个内置的本地WebServer，根目录映射到 ’./public’目录，默认端口：3000 2> npm test 运行 Jest 测试 3> npm run build 打包应用（准备上线）

avatar
文章
阅读
粉丝