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

news2024/9/25 21:28:56

第一部分:初识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 = 20
  render() { 
    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 = 20
  render() { 
    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 = 20
  render() { 
    return (
      <div className='LearnJsx'>
        {this.name}
        {this.dv}
        {this.age > 18 ? '成年' : '未成年'}
        <div className='red'>
          红色
        </div>
        // 或者
        <div style={{'color': 'red'}}>
          红色
        </div>
      </div>
    )
  }
}