React入门JSX仅仅是为了更好地描述UI并能够有效地提高开发效率的在JavaScript内部实现的React.cre

环境配置

CDN链接（不常用）

可以获得 React 和 ReactDOM 的 UMD 版本
有开发环境和生产环境两种，详情可查阅官网：reactjs.bootcss.com/

注：

指定版本需要更换版本号
CDN引入React建议设置 crossorigin 属性

crossorigin 属性？

create-react-app（常用，基于webpack）

可以创建单页应用程序并提供了⼀个零配置的现代构建设置

安装步骤：

全局安装：npm install -g create-react-app
创建项目：create-react-app my-app
启动项目：npm start 或 yarn start

安装yarn：npm install yarn -g

构建生产：npm run build 或 yarn build （暂时不用）
更改webpack配置（单向，不可恢复）：npm run eject

文件结构：

重构index.js

import React from 'react';	//=>vdom虚拟dom的概念
import ReactDOM from 'react-dom';
//将JSX挂载到名为 root 的节点下,有且仅有一个根节点
ReactDOM.render(<h1>hello world</h1>,document.querySelector('#root'));

JSX

JSX仅仅是为了更好地描述UI并能够有效地提高开发效率的在JavaScript内部实现的React.createElement(component, props, ...children) 函数的语法糖。

JSX实质就是React.createElement的调⽤，最终的结果是React“元素”（JavaScript对象）

JSX使用

通过花括号（所有合法表达式！）

问：函数是不是表达式？React”元素“是不是表达式？

const title = "hello React";
const jsx = <h2>{title}</h2>;

const subTitle = <p>hello, React</p>;
const jsx = <h2>{subTitle}</h2>;

动态渲染

React 元素不可变，被创建后无法改变其内容或属性

React.render更新UI

function Time() {
  const element = (  
    <div>  
      <h2>It is {new Date().toLocaleTimeString()}.</h2>  
    </div>
  );
  ReactDOM.render(    
    element,    
    document.getElementById('root')  
  );
}
setInterval(Time, 1000);

条件渲染

if语句（外部用）

let isShowTitle = true;
if (isShowTitle) {  
  title = <h1>是否显示h1</h1>;
}

逻辑与&&

const jsx = (  
  <div>  
    {isShowTitle && <h1>title1</h1>}  
  </div>
);
ReactDOM.render(
  jsx, 
  document.querySelector("#root")
);

三目运算符（替代if...else）

const showTitle = true;
const title = name ? <h2>{name}</h2> : null;
const jsx = (  
  <div>    
    {title}  
  </div>
);

循环列表 && key

数组会被作为⼀组⼦元素对待，数组中存放⼀组jsx可⽤于显示列表数据

const arr = [1,2,3].map(num => <li key={num}>{num}</li>)
const jsx = (  
  <div>    
    <ul>{arr}</ul>  
  </div>
);

案例

import logo from "./logo.svg";
import "index.css";
const box = {  
  color:"blue",  
  border:"1px blue solid"
}
const jsx = (  
  <div style={box}>    
    {/* 属性：静态值⽤双引号，动态值⽤花括号；class、for等要特殊处理。 */}    
    //className：避开关键字    
    <img src={logo} 
    style={{ width:100,height:100,border:"1px red solid" }} 
    className="widthheight"/>  
  </div>
);