河北企业建站系统信息,保密管理咨询公司,百度搜索引擎原理,企业网站结构第一部分:初识react
react: 用于构建用户界面的 JavaScript 库全局安装,win r, 命令:
npm install create-react-app -g3. 创建一个react应用, 这里我在vscode 里面创建, 创建之后,运行
create-react-app my-appcd my-app npm start
第二部分: redact 组件定义以及使用 rea…第一部分:初识react
react: 用于构建用户界面的 JavaScript 库全局安装,win r, 命令:
npm install create-react-app -g3. 创建一个react应用, 这里我在vscode 里面创建, 创建之后,运行
create-react-app my-appcd my-app npm start
第二部分: redact 组件定义以及使用 react 中组件 分为两种: 类组件 和 函数组件, 一般使用是以jsx结尾的文件,有提示 先使用类组件
// learn-class.jsx 文件
// react 一般结尾是以jsx
// 类组件使用
import React from react;
/*** 类组件必须继承React.compinent 这个类才叫 类组件* 并且要把这个类(或者组件) 导出*/
export default class LearnClass extends React.Component{/*** 必须要有一个方法 render* render 里面必须要有返回值 * 返回值就是 html */render(){ return (divdiv类组件/div/div)}
}在index.js 中使用 import ReactDOM from react-dom/client;
// 导入进来
import LearnClass from ./day-1/learn-class;
const root ReactDOM.createRoot(document.getElementById(root));
root.render(// 注意是 按照标签使用LearnClass/LearnClass
);
最后结果没有问题
函数组件使用
// 函数组件, learn-fnc.jsx
export default function LearnFnc() { return (div函数组件/div)
}在index.js 中使用
import ReactDOM from react-dom/client;
// import LearnClass from ./day-1/learn-class;
import LearnFnc from ./day-1/learn-fnc;
const root ReactDOM.createRoot(document.getElementById(root));
root.render(LearnFnc/LearnFnc
);
然后运行ok
类组件和函数组件的区别 简单理解: 1.类组件有生命周期,函数组件没有 2.类组件需要继承class,函数组件不需要
第三部分 1.初识jsx, 就是js 里面写html和变量 每一个JSX 元素只是调用React.createElement(‘组件或者标签名’,‘组件接收的参数’, 子级)的语法糖
import React from react;class A1 extends React.Component {/*** jsx 核心是createElement* 第一个参数是组件或者标签名* 第二个组件接受的参数* 第三个参数 子级*/render() { return React.createElement(h1,null, A1)}
}export default class LearnJsx extends React.Component { name 张三dv divdv/divage 20render() { return (div{this.name}{this.dv}{this.age 18 ? 成年 : 未成年}A1/A1/div)}
}第四部分
css 样式使用推荐 sass
npm install sass在learn-scss.scss中
.LearnJsx{.box{width: 100px;height: 100px;background-color: pink;}
}在learn-jsx.jsx中引用
import React from react;
/*引用*/
import ./learn-scss.scss
class A1 extends React.Component {/*** jsx 核心是createElement* 第一个参数是组件或者标签名* 第二个组件接受的参数* 第三个参数 子级*/render() { return React.createElement(h1,null, A1)}
}export default class LearnJsx extends React.Component { name 张三dv divdv/divage 20render() { return (div classNameLearnJsx{this.name}{this.dv}{this.age 18 ? 成年 : 未成年}A1/A1/*使用*/div classNamebox 红色/div/div)}
}
用css 引入
// learn.css 中
.red{color: red;
}// ------- 分割线 在 在learn-jsx.jsx中引用, 但是如果index.js引用了组件,没有使用LearnJsx组件,会污染其他组件,所以不推荐,但是要知道这个写法
import React from react;
// import ./learn-scss.scss
import ./learn.css;
export default class LearnJsx extends React.Component { name 张三dv divdv/divage 20render() { return (div classNameLearnJsx{this.name}{this.dv}{this.age 18 ? 成年 : 未成年}div classNamered红色/div// 或者div style{{color: red}}红色/div/div)}
}
