react知识点汇总

标签：知识点 函数 dom App 汇总 js react 组件

一、react认识

用于构建用户界面的 JavaScript 库

二、创建react项目：react脚手架

1. 创建react项目，创建新的react应用
   

npx create-react-app my-app
cd my-app
npm start

2. 分析react项目

   node_modules：依赖包

   public：公共文件

   src：核心代码

   App.css：根组件的样式

   App.js：更组件

   App.text：根组件的测试文件

   index.css：全局样式

   index.js：入口文件，特点是这个文件中写的代码，都会被执行，在这个项目启动的时候

　　　  reportWebVitals：兼容浏览器

　　　  setTests.js：做测试

3. 分析index.js 入口文件

//入口文件
import React from 'react';  //引入react=》获取到react 提供api
import ReactDOM from 'react-dom/client'; //将 虚拟dom => 真实dom
import './index.css'; //全局样式
import App from './App';  //引入根组件

console.log(ReactDOM);
//将 虚拟dom => 真实dom =挂载到对应的位置
const root = ReactDOM.createRoot(document.getElementById('root'));  //挂载到对应的位置
root.render( //虚拟dom => 真实dom
 
    <App />

);

三、函数式组件

1. 函数式组件就是函数

2. 函数名称必须首字母大写：自己创建的组件

3. 有return：就是自己谢的页面布局（template）

4. 这个函数体，第一层定义的属性，就是这个函数的属性、方法、动态数据

function App() {
  return (
    <div className="App">
       <h2>你好通信</h2>
    </div>
  );
}

export default App;

四、jsx

1. 什么是jsx

   就是JavaScript和html的结合

2. 特点：

   1. 可以js：就是vue指令，

   2. 更加的安全

3. 相对于html的区别

   1. 类名：className

   2. 事件处理：on事件类型

五、指令

1：动态数据

　　语法：{ }

　　在{ }内可以写：1. 动态值，2. 四则运算，3. 三元运算符，4. js语法

　　在react函数体中定义的的数据是不可变数据：

function App(){
  //函数体 => vue3 script  setup
  //定义数据 =》可变  ，不可变
  let name = '张三'
  let age = 30
  let num = 61

  function add(){
    return 1+1
  }
    return(
        <div>
            <h2>你好{name}同学</h2>
            <h2>{age+1}</h2>
            <h2>{num>60?'及格':'不及格'}</h2>
            <h2>{add()}</h2>  
        </div>
    )
}

export default App

2：条件渲染

标签：知识点,函数,dom,App,汇总,js,react,组件
From： https://www.cnblogs.com/chccee/p/17131870.html