React学习1 -- JSX

首先用命令创建项目，再用VS Code 打开。
npm install -g create-react-app 这是用来下载react的命令，前提是已经下载了node.js
创建项目： nmp create-react-app projectname（名称之间不能有空格，否则只有第一个字符串）。
React-JSX-Style
JSX : 为JavaScript xml 的缩写，称为语法糖。不会影响功能，最终都会被转换为JS被浏览器读取（语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·蘭丁发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。 语法糖让程序更加简洁，有更高的可读性）。

下面看官方的一段代码：

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')
);

这段代码其实不难，稍微有点js经验的人都能看得百分之八十。在官方的解释中也有说明要有JS的基础。笔者来大致解读一下。

首先，声明了一个函数，formatName（）；有个参数 user，该函数的作用为格式化名字。 接着声明了一个名为user的对象，里面包括，firstName 和 lastName 两个成员变量。最关键的还是以下的两段代码：

const element = <h1>Hello, {formatName(user)}!</h1>;

ReactDOM.render(element, document.getElementById('root'));

Const是ES6中，用于定义常量的，相当于java中的final。
接着是ReactDOM.render，这是react的语法（可以说是语法吧，词穷了），反正render是渲染的意思嘛。传入两个参数，一个是刚才定义的Element，还有个dom的操作（目前还不知道这能不能用jQuery代替…我觉得可以吧，不是什么大事…）。这里有个需要注意的店，就是element那，如果是要传入参数，则需要{}，这样表示这里是个变量。

这是最后的结果。但是不知道渲染之后的层次是怎么样的，就是html的结构。。。这个之后看到了会解释的。
在官方的文档中说道，JSX也是一种表达式，可以用作循环等操作，看下面代码就会明白了：

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

如果要在标签中加入属性，则可以直接用引号，例如：

const element = <div tabIndex="0"></div>;

也可以用变量代表，如：

const element = <img src={user.avatarUrl}></img>;

在属性中嵌入JavaScript表达式时，不要在花括号周围加上引号。应该使用引号（对于字符串值）或花括号（对于表达式），但不能在同一属性中使用。

由于JSX更接近JavaScript而不是HTML，因此React DOM使用camelCase属性命名约定而不是HTML属性名称。例如 class 属性变为 className tableindex 为 tableIndex。
当然，JSX是可以包含子节点的。

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

理解SQL注入的，可以理解JSX这样的做法也是可以防止注入攻击的：

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

这和JDBC中利用prepareStatement 防止注入攻击是一个道理的。
很关键的一点，JSX可以写成对象的形式，比如说这样的：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这样的写法简洁易读，也不用写标签的收尾了，很是方便。

特别说明：鄙人只是个小白，也是React的初学者，目前没有很深刻的见解，只是当做笔记来写，也是为了自己以后方便看得。如有大神看出我写错的地方也欢迎指正。我发布也没想过会很有用，但是如果能对大家有一些，哪怕就是一点点帮助我也是很开心的。写这篇也是为了赚取积分，下载更多的，见解更深刻的文章来参考。本文章为作者原创，估计也不会有人盗版，我只是想说，不喜勿喷，但欢迎指正不对的地方。