项目起步

官网链接
React官网

一、搭建一个项目

// 1、安装官⽅方脚⼿手架
npm install -g create-react-app

// 2、创建项⽬
create-react-app my-app

// 3、进入项目、启动项目
cd my-app
npm start

// 4、如果需要暴露配置项
npm run eject

二、目录预览

README.md  文档
public 静态资源
    favicon.ico  图标
    index.html  入口文件
    manifest.json   页面配置
src   源码
    App.css  组件样式
    App.js   根组件
    App.test.js    根组件测试
    index.css    全局样式
    index.js  入⼝文件
    logo.svg    LOGO
    serviceWorker.js pwa     ⽀支持
package.json     npm 依赖

三、React和ReactDom

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

// 这⾥里里怎么没有出现React字眼？
// JSX => React.createElement(...)
ReactDOM.render(
    <h1>Hello React</h1>,
    document.getElementById("root")
);

1、React负责逻辑控制，数据 -> VDOM
2、ReactDOM渲染实际DOM，VDOM -> DOM
3、React使⽤用JSX来描述UI

JSX

1、定义

（1）JSX是一种JavaScript的语法扩展，其格式⽐比较像模版语⾔言，但事实上完全是在JavaScript内部实现的。
（2）JSX可以很好地描述UI，能够有效提⾼高开发效率，体验JSX
（3）JSX实质就是React.createElement的调⽤用，最终的结果React“元素”（JavaScript对象）。

2、使用

（1）表达式{}的使⽤用，index.js

const name = "react study";
const jsx = <h2>{name}</h2>;

（2）函数也是合法表达式，index.js

const user = {
    firstName: "tom", 
    lastName: "jerry"
};
function formatName(user) {
    return user.firstName + " " + user.lastName;
}
const jsx = <h2>{formatName(user)}</h2>;

（3）jsx是js对象，也是合法表达式，index.js

const greet = <p>hello, Jerry</p>
const jsx = <h2>{greet}</h2>;

（4）条件语句使用，index.js

const showTitle = true;
const jsx = (
    <div>
        {/* 条件语句句 */}
        { showTitle ? <h2>{showTitle}</h2> : null;}
    </div>
);

（5）数组使用

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

（6）属性使用

import logo from "./logo.svg";
const jsx = (
    <div>
        {/* 属性：静态值用双引号，动态值用花括号；class、for等
要特殊处理理。 */}
        <img src={logo} style={{ width: 100 }}  className="img" />
    </div>
);

（7）CSS使用

import style from "./index.module.css";
<img className={style.img} />