React入门

发布于：2025-07-31 ⋅ 阅读:(18) ⋅ 点赞:(0)

入门：在js中写html代码，就这个意思
1 nodejs
nodejs 相当于我们java中的包管理工具，如maven、gradle
2.yarn
yarn和npm是一样的功能，主要区别在于性能优化、依赖管理机制、版本控制策略和功能扩展性等方面‌。两者均为 JavaScript 生态系统主流的包管理工具，但 Yarn 通过并行安装、离线缓存和严格的锁定文件机制，在速度和一致性上表现更优；而 npm 作为 Node.js 原生工具，生态兼容性更广泛。‌‌

这里我们使用npm 命令行安装yarn
3.我们的前端代码整体使用 react + antd

react 是用于构建用户界面的JavaScript库，相当于我们的开发语言，antd 是前端组件库，如果需要新增组件我们可以在antd中寻找组件进行开发工作

react 教程 https://www.w3ccoo.com/react/

antd官网 https://ant.design/components/overview-cn

  1. ES6 ：ES6 代表 ECMAScript 6。

ECMAScript 是为了标准化 JavaScript 而创建的，ES6 是 ECMAScript 的第 6 个版本，于 2015 年发布，也称为 ECMAScript 2015。

2.在这里插入图片描述
类，对象初始化时会自动调用构造函数。

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

2.1 类继承
要创建类继承，请使用 extends 关键字。

使用类继承创建的类会继承另一个类的所有方法:

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

2.2 箭头函数：语法糖的简写

hello = function() {
  return "Hello World!";
}
hello = () => {
  return "Hello World!";
}
无参：和有参
hello = () => "Hello World!";
hello = (val) => "Hello " + val;
hello = val => "Hello " + val;

2.4变量：

在 ES6 中，有三种定义变量的方法: var, let 和 const.

如果你在函数外使用var，它属于全局作用域。

如果您在函数内部使用 var，则它属于该函数。

如果您在块内使用 var，即 for 循环，则该变量在该块外仍然可用。

const 是一个变量，一旦创建，它的值就永远不会改变。
2.5重要方法：
.map() 数组方法。

.map() 方法允许您对数组中的每个项目运行一个函数，并返回一个新数组作为结果。

在 React 中，map() 可用于生成列表。

const myArray = ['apple', 'banana', 'orange'];

const myList = myArray.map((item) => <p>{item}</p>)

解构：
const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;
只需要1,3 时，
const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;
变种：
function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);
解构对象：
const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}
解构复杂对象
const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red',
  registration: {
    city: 'Houston',
    state: 'Texas',
    country: 'USA'
  }
}

myVehicle(vehicleOne)

function myVehicle({ model, registration: { state } }) {
  const message = 'My ' + model + ' is registered in ' + state + '.';
}

扩展运算符：
扩展运算符 (…) 允许我们快速将现有数组或对象的全部或部分复制到另一个数组或对象中。
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = […numbersOne, …numbersTwo];

2.6模块导入导出：

const name = "Jesse"
const age = 40

export { name, age }

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

使用：

import { name, age } from "./person.js";
import message from "./message.js";

3.自定义标签和标签的属性：

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

3.1 在 JSX 中使用属性 className 而不是 class:

const myElement = <h1 className="myclass">Hello World</h1>;

const x = 5;

const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

3.2 在组件中使用组件 ：Garage 中使用自定义的 组件

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

3.4 类组件：
如果你的组件中有constructor()函数，该函数会在组件启动时调用。

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

道具
处理组件属性的另一种方法是使用道具 props。

props 道具就像函数参数，你将它们作为属性发送到组件中。

您将在下一章了解更多关于 props 的内容。Props 是传递给 React 组件的参数。

Props 通过 HTML 属性传递给组件。

function Car(props) {
  return <h2>I am a { props.brand.model }!</h2>;
}

function Garage() {
  const carInfo = { name: "Ford", model: "Mustang" };
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carInfo } />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

4，事件

import React from 'react';
import ReactDOM from 'react-dom/client';

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

实际应用：

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

这个会报错，必须有keys

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

5.表单：处理表单是关于在数据更改或提交时如何处理数据。

在 HTML 中，表单数据通常由 DOM 处理。

在 React 中，表单数据通常由组件处理。

当组件处理数据时，所有数据都存储在组件状态中。

您可以通过在 onChange 属性中添加事件处理程序来控制更改。

我们可以使用 useState Hook 来跟踪每个输入值，并为整个应用程序提供"单一数据源"。 

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布