React入门
创建项目
-
创建项⽬目: npx create-react-app my-app
-
打开项⽬目: cd my-app
-
启动项⽬目: npm start
-
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>
//这里是diff算法挂载组件的,这里时候,所以同级的元素类型,有一个唯一个的key。
这里item=>();这里()是返回值,如果是{}则要自己写一个return
属性的使用
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} />
------------恢复内容结束------------