React基础：安装、元素渲染、JSX语法

安装

安装react脚手架

npm install -g create-react-app  //全局下载工具
create-react-app my-app        //创建项目my-app
cd my-app     //进入my-app项目
npm start    //启动项目

效果如下：

元素渲染

1、 元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容

const element = <h1>Hello, world!</h1>;

将元素渲染到 DOM 中：首先我们在一个 HTML 页面中添加一个 id=“example” 的 <div>:

<div id="example"></div>

在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DOM 节点。
我们用 React 开发应用时一般只会定义一个根节点

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

2、 React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法

实例： 通过定时器来更新界面

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

我们可以将要展示的部分封装起来，以下实例用一个函数来表示：
props使用来传递参数的，表达式用{}括起来

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

JSX语法

优点：

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

注意：

• 必须有根节点
• 普通HTML元素要小写，大写认为是组件
• 如果写在script标签中,script格式必须是<script type="text/babel"></script> 否则会识别为语法错误

表达式
语法: {表达式或者变量},会自动计算结果

var time=new Date().toLocaleString()
ReactDOM.render(
      <h1>Hello, world!  {time}</h1>,
      document.getElementById('example')
  );

除了表达式或变量之外还可以是jsx对象

var time = new Date().toLocaleString();
  ReactDOM.render(
    <h1>
      {<button>time</button>} {<button>{time}</button>}
    </h1>,
    document.getElementById("example")
  );

表达式是HTML样式类名时要写className,因为Class在js中是关键词

var color = 'redbg'  //背景设为红色
  ReactDOM.render(
    <h1 className={color}>
      HTML样式类名要写className
    </h1>,
    document.getElementById("example")
  );

JSX表达式 :

• 由HTML元素构成
• 中间如果需要插入变量或表达式用{}
• {}中间表达式可以使用JSX对象
• 属性和HTML内容一样都是用{}来插入内容