React入门第一天

React入门

创建项目

1. 创建项⽬目： npx create-react-app my-app

2. 打开项⽬目： cd my-app

3. 启动项⽬目： npm start

4. 暴暴露露配置项： npm run eject

CRA文件目录

├── README.md ⽂文档
├── public 静态资源
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src 源码
├── App.css
├── App.js 根组件
├── App.test.js
├── index.css 全局样式
├── index.js ⼊入⼝口⽂文件
├── logo.svg
└── serviceWorker.js pwa⽀支持
├── package.json npm 依赖

tree

webpack.config.js 是webpack配置⽂文件，开头的常量量声明可以看出cra能够⽀支持ts、 sass及css模块化。

React和ReactDom

 React负责逻辑控制，数据 -> VDOM
ReactDom渲染实际DOM， VDOM -> DOM
React使⽤用JSX来描述UI
babel-loader把JSX 编译成相应的 JS 对象， React.createElement再把这个JS对象构造成React需
要的虚拟dom。 

//这里的import ReactDOM不能加{}

JSX语法

JSX是⼀一种JavaScript的语法扩展，其格式⽐比较像模版语⾔言，但事实上完全是在JavaScript内部实现的。 JSX可以很好地描述UI，能够有效提⾼高开发效率，体验JSX。

基本使用

const name = "react study";
const jsx = <div>hello, {name}</div>;

函数

const obj = {
fistName: "Harry",
lastName: "Potter"
};
function formatName(name) {
return name.fistName + " " + name.lastName;
}
const jsx = <div>{formatName(user)}</div>;

对象

const statement=<h1>hello world</h1>;
const context=<div>{statement}</div>;

条件语句

const show=true;
const greet=<div>我有一个家</div>;
const context=<div>{
    show?greet:"不，你没有"
    }
    {show&&greet}</div>;

／／这里两个方式的结果是一样的

数组

const array=[1,2,3,4,5];
const context=<div><ul>
    {array.map(item=>{
       return <li key={item}>{item}</li>
    })}</ul></div>
​

／／这里是ｄｉｆｆ算法挂载组件的，这里时候，所以同级的元素类型，有一个唯一个的ｋｅｙ。

这里ｉｔｅｍ＝＞（）；这里（）是返回值，如果是｛｝则要自己写一个ｒｅｔｕｒｎ

属性的使用

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

 

模块化

css模块化，创建index.module.css， index.js
或者npm install sass -D
import style from "./index.module.css";
<img className={style.logo} />
import style from "./index.module.scss";
<img className={style.logo} />

 

------------恢复内容结束------------