初识React,基础(1), 安装react,jsx文件,类组件和函数组件,css样式

第一部分:初识react

react: 用于构建用户界面的 JavaScript 库
全局安装,win+ r, 命令:

npm install create-react-app -g

在这里插入图片描述
3. 创建一个react应用, 这里我在vscode 里面创建, 创建之后,运行

create-react-app my-app

cd 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 (<div><div>类组件</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 = <div>dv</div>age = 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 = <div>dv</div>age = 20render() { return (<div className='LearnJsx'>{this.name}{this.dv}{this.age > 18 ? '成年' : '未成年'}<A1></A1>/*使用*/<div className='box' >红色</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 = <div>dv</div>age = 20render() { return (<div className='LearnJsx'>{this.name}{this.dv}{this.age > 18 ? '成年' : '未成年'}<div className='red'>红色</div>// 或者<div style={{'color': 'red'}}>红色</div></div>)}
}