2018-11-05 创建react项目之后

文件目录

react文件目录.png

最简单的react例子：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.querySelector('#root')
);

当然在这之前，你得import两个依赖库

import React from 'react';
import ReactDOM from 'react-dom';

上面这个例子，它渲染了一个“Hello, world!”的标题，它大量使用了ES6，所以你至少得清楚这些东西：箭头函数， 类， 模板字符串， let， 和 const 声明

关于JSX
JavaScript+XML javascript和xml的综合体， 一种 JavaScript 的语法扩展。

const element = <h1>hello World</h1>

JSX中只允许使用表达式
JSX 本身其实也是一种表达式

JSX 属性
1.类比html来做 不过这里的属性和xml一样可以自定义

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

2.也可以使用大括号来定义以 JavaScript 表达式为值的属性

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

JSX这个东西是可以嵌套的：

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

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

在任何项目中ReactDOM.render只能有一个