react基础用法与jsx简单讲解

最新推荐文章于 2024-03-18 18:00:07 发布

晨小庚

最新推荐文章于 2024-03-18 18:00:07 发布

阅读量177

点赞数 1

文章标签： javascript html html5 reactjs es6

本文链接：https://blog.csdn.net/weixin_45936226/article/details/104466536

版权

1.react引用方法

npm config set registry https://registry.npm.taobao.org 使用淘宝镜像在国内速度快
安装脚手架— npm i creat-react-app
创建项目— create-react-app 项目名字
json文件引用可以直接进入分别搜索react react-dom babel 复制链接
- 注意引用顺序

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

2.关于react使用

<div id="box"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, React!</h1>,
    document.getElementById('box')
  );
</script>

这里注意script标签类型改写成<script type=“text/babel”
babel的作用是可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平

可以接下来写一点简单的函数来看一下是否成功

var App = () => {
      return (
        <div>
          <h1>
            hello, react!
          </h1>
          <div>你好，react！</div>
        </div>
      );
    };
    function render() {
      ReactDOM.render(<App></App>, document.querySelector("#app"));
    }
    render();

什么是jsx

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
jsx指定属性
- jsx可以使用引号来定义以字符串为值的属性
  也可以使用大括号来定义以JavaScript表达式为值的属性
  因为JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小驼峰）命名来定义属性的名称，而不是使用HTML的属性名称。例如：class变成了className，而tabindex则对应着tableIndex。
jsx嵌套格式
- JSX标签是闭合式的，像XML/HTML一样在结尾处用/>表示
  JSX标签同样可以相互嵌套：

const element = (
    <div>
        <h1>Hello!</h1>
        <h2>很高兴认识你</h2>
    </div>
);

jsx使用表达式
- 在JSX中可任意使用JavaScript表达式，但要包含在大括号里，例如：2 + 2，user.firstName，以及formatName(user)都是可以使用的

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName: 'Harper',
    lastName: 'Perez'
};
const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);
ReactDOM.render(
    element,
    document.getElementById('root')
);

jsx本身其实也是一种表达式
在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都是允许的

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

防注入攻击
- 在JSX中嵌入用户输入是安全的：

const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危险内容的字符串放入大括号中，这是比较安全的做法
const element = <h1>{title}</h1>;

React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS（跨站脚本攻击）。

表示对象
- Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。
  下面两种代码的作用是完全相同的

const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);
const element = React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world!'
);

React.createElement()这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }
};