前端 react教程(详细版)

这篇具有很好参考价值的文章主要介绍了前端 react教程(详细版)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. React概述

1.1 React是什么

  • React是一个用于构建用户界面的JavaScript库。
  • React的主要特点是组件化、声明式编程以及高效的DOM更新机制。
  • React由Facebook开发并开源,已经成为目前最流行的前端框架之一。

1.2 React的特点

  • 声明式编程:React采用声明式编程模式,使得代码更加易于阅读和理解。
  • 组件化:React将页面分解成多个组件,每个组件都有自己的状态和生命周期,方便复用和维护。
  • 单向数据流:React采用单向数据流的模式,父组件通过props向子组件传递数据,子组件通过回调函数向父组件传递数据。
  • 虚拟DOM:React采用虚拟DOM的技术,通过对比前后两个虚拟DOM的差异,最小化页面的重绘和回流,提高页面的性能和响应速度。
  • 高效:React采用高效的算法和机制,使得页面的渲染速度更快,用户体验更佳。

1.3 React的优点

  • 更好的用户体验:React采用虚拟DOM,能够更快地更新页面,提升用户体验。
  • 组件化开发:React采用组件化开发,使得代码更加模块化、可复用,提高开发效率。
  • 代码可维护性高:React采用单向数据流,使得代码的数据流动清晰可见,方便维护和调试。
  • 社区活跃:React拥有庞大的社区和生态圈,能够提供丰富的插件和组件,方便开发。

1.4 React的缺点- React的缺点:

  • 学习曲线较陡峭,需要一定的JavaScript基础和了解JSX语法;
  • 只关注视图层,不涉及其他方面,需要与其他库或框架配合使用;
  • 代码复杂度较高,需要编写大量的组件和逻辑代码;
  • 不支持IE8及以下版本的浏览器,需要使用polyfill进行兼容。

2. React基础知识

2.1 JSX语法

- JSX语法实例:
const element = <h1>Hello, world!</h1>; // JSX语法
ReactDOM.render(element, document.getElementById('root')); // 渲染到页面
- JSX表达式实例:
function formatName(user) {
 return user.firstName + ' ' + user.lastName;
}

const user = {
 firstName: 'Tony',
 lastName: 'Stark'
};

const element = (
 <h1>
   Hello, {formatName(user)}!
 </h1>
);

ReactDOM.render(element, document.getElementById('root')); // 渲染到页面
- JSX属性实例:
const element = <div tabIndex="0">Hello, world!</div>; // JSX属性
ReactDOM.render(element, document.getElementById('root')); // 渲染到页面

2.2 组件

- 2.2 组件
  • 示例一:Hello World 组件

    import React from 'react';
    
    function HelloWorld() {
      return <h1>Hello, World!</h1>;
    }
    
    export default HelloWorld;
    
  • 示例二:计数器组件

    import React, { useState } from 'react';
    
    function Counter() {
     const [count, setCount] = useState(0);
    
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
         <button onClick={() => setCount(count - 1)}>Decrement</button>
       </div>
     );
    }
    
    export default Counter;
    
  • 示例三:表格组件

    import React from 'react';
    
    function Table(props) {
     const { data } = props;
    
     return (
       <table>
         <thead>
           <tr>
             <th>Name</th>
             <th>Age</th>
             <th>Gender</th>
           </tr>
         </thead>
         <tbody>
           {data.map((item) => (
             <tr key={item.id}>
               <td>{item.name}</td>
               <td>{item.age}</td>
               <td>{item.gender}</td>
             </tr>
           ))}
         </tbody>
       </table>
     );
    }
    
    export default Table;
    

2.2.1 函数式组件

- 函数式组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="John" />,
  document.getElementById('root')
);

2.2.2 类组件

  • 类组件是React中定义组件的一种方式,使用ES6 class语法来声明组件。
  • 类组件必须继承React.Component类,并实现render方法来描述组件的UI。
  • 类组件可以定义自己的状态state,通过setState方法来更新状态并重新渲染组件。
  • 类组件也可以定义自己的方法,用于处理用户交互或其他逻辑。
  • 类组件可以接收props作为输入数据,通过this.props来访问。
  • 类组件的生命周期包括挂载、更新和卸载三个阶段,可以通过重写生命周期方法来实现一些特定的逻辑。

示例:

import React, { Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 handleClick = () => {
   this.setState({ count: this.state.count + 1 });
 }

 render() {
   return (
     <div>
       <h1>{this.props.title}</h1>
       <p>Count: {this.state.count}</p>
       <button onClick={this.handleClick}>Click me</button>
     </div>
   );
 }
}

export default MyComponent;

表格示例:

属性/方法 描述
state 组件的状态对象
setState() 更新组件的状态
props 组件的输入属性
render() 描述组件UI的方法
componentDidMount() 组件挂载后调用的方法
componentDidUpdate() 组件更新后调用的方法
componentWillUnmount() 组件卸载前调用的方法

2.3 Props和State

  • Props和State的区别:
区别点 Props State
存放位置 父组件传递给子组件 组件内部初始化
是否可变 不可变,只读 可变,可修改
对应组件类型 函数组件和类组件 只有类组件
触发视图更新 由父组件传递的props改变 由组件自身调用setState()方法
生命周期 不影响组件生命周期 可能会触发shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate等生命周期
- Props的使用:
function ParentComponent() {
 const name = "小明";
 return (
   <ChildComponent name={name} />
 );
}

function ChildComponent(props) {
 return (
   <div>
     <p>我是子组件</p>
     <p>我的名字是:{props.name}</p>
   </div>
 );
}
- State的使用:
class Counter extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 handleClick = () => {
   this.setState({
     count: this.state.count + 1
   });
 }

 render() {
   return (
     <div>
       <p>当前计数:{this.state.count}</p>
       <button onClick={this.handleClick}>增加计数</button>
     </div>
   );
 }
}

2.4 生命周期

  • React组件的生命周期包括:挂载阶段、更新阶段、卸载阶段。
  • 挂载阶段包括constructor、getDerivedStateFromProps、render、componentDidMount。
  • 更新阶段包括getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate。
  • 卸载阶段包括componentWillUnmount。

2.5 事件处理- React中的事件处理与原生DOM事件处理有所不同,它使用了合成事件(SyntheticEvent)来封装浏览器的原生事件,提供了跨浏览器的一致性。

  • 在React中,事件处理函数需要绑定到组件实例上,可以使用箭头函数或在构造函数中使用bind方法来绑定。
  • 事件处理函数中的this默认指向组件实例,而不是触发事件的DOM元素。
  • 事件处理函数的参数e是一个合成事件对象,它包含了与原生事件相同的属性和方法,如e.target, e.stopPropagation()等。
  • React中的事件处理函数不能返回false来阻止事件冒泡,而需要使用e.stopPropagation()或e.preventDefault()来达到相同的效果。
  • 示例代码:
 class MyComponent extends React.Component {
   handleClick = (e) => {
     console.log('Button clicked!');
   }
 
   render() {
     return (
       <button onClick={this.handleClick}>Click me</button>
     );
   }
 }
表格语法示例:
React事件处理 说明
onClick 鼠标点击事件
onDoubleClick 鼠标双击事件
onMouseDown 鼠标按下事件
onMouseUp 鼠标松开事件
onKeyDown 键盘按下事件
onKeyUp 键盘松开事件
onFocus 元素获得焦点事件
onBlur 元素失去焦点事件

3. React进阶知识

3.1 高阶组件

  • 高阶组件是什么?
    • 高阶组件是一个函数,它接收一个组件作为参数并返回一个新的组件。
  • 高阶组件的作用是什么?
    • 高阶组件可以帮助我们实现组件的复用,逻辑的抽象和封装,以及在不改变原组件的情况下增强组件的功能等。
  • 高阶组件的实现方式有哪些?
    • 属性代理:通过包裹原组件并向其传递新的props来增强组件的功能。
    • 反向继承:通过继承原组件并重写其方法来增强组件的功能。
  • 高阶组件的应用场景有哪些?
    • 条件渲染:根据条件渲染不同的组件。
    • 认证与授权:根据用户的认证状态和权限渲染不同的组件。
    • 数据获取与处理:将数据获取和处理的逻辑从组件中抽离出来,使组件更加简洁和可复用。
    • 功能增强:增强组件的功能,如添加日志记录、性能统计等。
  • 高阶组件的注意事项有哪些?
    • 高阶组件不应该修改原组件的props和state。
    • 高阶组件应该透传原组件的props和context。
    • 高阶组件应该遵循函数式编程的原则,不应该有副作用。

3.2 Hooks

  • useState
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • useEffect
  import React, { useState, useEffect } from 'react';

  function Example() {
    const [count, setCount] = useState(0);

    // 相当于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {
      // 使用浏览器的 API 更新页面标题
      document.title = `You clicked ${count} times`;
    });

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
  • useContext
    import React, { useContext } from 'react';
    
    const ThemeContext = React.createContext('light');
    
    function App() {
      return (
        <ThemeContext.Provider value="dark">
          <Toolbar />
        </ThemeContext.Provider>
      );
    }
    
    function Toolbar(props) {
      return (
        <div>
          <ThemedButton />
        </div>
      );
    }
    
    function ThemedButton() {
      const theme = useContext(ThemeContext);
      return <button>{theme}</button>;
    }
    
  • useReducer
  import React, { useReducer } from 'react';

  const initialState = { count: 0 };

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <>
        Count: {state.count}
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </>
    );
  }
  • useCallback
    import React, { useState, useCallback } from 'react';
    
    function Example() {
      const [count, setCount] = useState(0);
      const [text, setText] = useState('');
    
      const handleChange = useCallback(e => {
        setText(e.target.value);
      }, []);
    
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
          <input value={text} onChange={handleChange} />
        </div>
      );
    }
    
  • useMemo
  import React, { useState, useMemo } from 'react';

  function Example() {
    const [count, setCount] = useState(0);

    const expensiveCount = useMemo(() => {
      return count ** 2;
    }, [count]);

    return (
      <div>
        <p>You clicked {count} times</p>
        <p>Expensive count: {expensiveCount}</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
3.2.1 useState
  • useState基础用法:
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • useState使用函数更新状态:
 import React, { useState } from 'react';

 function Example() {
   const [count, setCount] = useState(0);

   function handleClick() {
     setCount(prevCount => prevCount + 1);
   }

   return (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={handleClick}>
         Click me
       </button>
     </div>
   );
 }
  • useState可以接受函数作为初始值:

    import React, { useState } from 'react';
    
    function Example() {
    const [count, setCount] = useState(() => {
      const initialCount = 0;
      return initialCount;
    });
    
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
    }
    
  • useState可以使用解构赋值:

    import React, { useState } from 'react';
    
    function Example() {
     const [state, setState] = useState({ count: 0, name: '张三' });
    
     function handleClick() {
       setState(prevState => {
         return { ...prevState, count: prevState.count + 1 };
       });
     }
    
     return (
       <div>
         <p>{state.name} clicked {state.count} times</p>
         <button onClick={handleClick}>
           Click me
         </button>
       </div>
     );
    }
    
3.2.2 useEffect
  • useEffect是React中的一个Hook,用于处理组件中的副作用操作,比如数据获取、DOM操作等。

  • useEffect的基本用法如下:

    import React, { useEffect } from 'react';
    
    function Example() {
      useEffect(() => {
        // 在这里处理副作用操作
        return () => {
          // 在组件卸载时执行清除操作
        };
      }, [/* 依赖项 */]);
    
      return <div>Example</div>;
    }
    
  • useEffect接收两个参数,第一个参数是一个回调函数,用于处理副作用操作;第二个参数是一个数组,用于指定副作用操作的依赖项,只有依赖项发生变化时,才会重新执行副作用操作。

  • useEffect还可以返回一个清除函数,用于在组件卸载时执行清除操作。

3.2.3 useContext
  • 使用useContext进行组件间通信
 import React, { useContext } from 'react';

 // 创建一个context
 const MyContext = React.createContext();

 // 在父组件中设置context的值
 function Parent() {
   return (
     <MyContext.Provider value="hello">
       <Child />
     </MyContext.Provider>
   );
 }

 // 在子组件中使用context的值
 function Child() {
   const value = useContext(MyContext);
   return <div>{value}</div>;
 }

3.3 Redux

  • Redux是一种状态管理工具,它可以帮助我们更好地管理React中的数据流。
  • Redux有三个核心概念:store、action和reducer。
  • store是Redux中保存数据的地方,我们可以通过store.getState()来获取store中的数据。
  • action是Redux中描述事件的对象,它必须包含一个type属性,用来描述事件的类型。
  • reducer是Redux中处理事件的函数,它接收当前的state和action,返回一个新的state。
  • Redux的使用需要安装redux和react-redux两个包,并且需要在应用中创建一个store。
  • 使用Redux时,我们需要定义action和reducer,并将它们注册到store中。
  • 可以使用redux-devtools来方便地调试Redux应用。
  • Redux还可以与React结合使用,通过react-redux提供的connect函数将Redux的状态映射到React组件的props中。
  • 在使用Redux时,需要注意不要滥用Redux,只有在需要管理大量共享状态时才使用它,否则会导致代码变得复杂难以维护。

3.4 React Router- React Router是什么?

  • React Router是一个基于React之上的强大路由库,它可以让你向应用中加入路由功能,以便用户可以通过URL访问不同的页面。
  • React Router的使用方法
    • 安装React Router:npm install react-router-dom
    • 在应用中引入React Router:import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    • 使用<Router>组件包裹整个应用,使用<Route>组件定义路由规则,使用<Link>组件生成链接。
  • React Router的常用API
    • <Route>组件:定义路由规则,包含pathcomponent两个属性。
    • <Link>组件:生成链接,包含to属性。
    • useHistory Hook:获取路由历史记录,可以用来实现页面跳转。
  • React Router的高级用法
    • 嵌套路由:在一个路由规则中嵌套另一个路由规则。
    • 动态路由:使用参数来定义路由规则,例如/users/:id
    • 路由守卫:在路由跳转前进行权限验证或其他操作。可以使用<Route>组件的render属性或者自定义组件来实现。

4. React实战

4.1 创建React应用

  • 使用create-react-app创建React应用
  • 在应用中添加组件并渲染
  • 使用props传递数据给组件
  • 使用state管理组件内部状态
  • 处理组件事件
  • 使用生命周期方法控制组件行为
  • 使用React Router实现页面路由
  • 使用Redux管理应用状态
  • 使用React Hooks优化组件代码
  • 使用React测试工具进行单元测试
  • 使用React Native开发移动应用
  • 使用Next.js实现服务器渲染
  • 使用React与其他技术栈进行集成,如GraphQL、TypeScript等
  • 使用React开发实际项目的经验分享
  • 总结与展望

表格语法:

序号 内容
1 使用create-react-app创建React应用
2 在应用中添加组件并渲染
3 使用props传递数据给组件
4 使用state管理组件内部状态
5 处理组件事件
6 使用生命周期方法控制组件行为
7 使用React Router实现页面路由
8 使用Redux管理应用状态
9 使用React Hooks优化组件代码
10 使用React测试工具进行单元测试
11 使用React Native开发移动应用
12 使用Next.js实现服务器渲染
13 使用React与其他技术栈进行集成,如GraphQL、TypeScript等
14 使用React开发实际项目的经验分享
15 总结与展望

4.2 React与其他框架集成

  • React与Vue.js集成

    示例代码:

    // 在Vue.js组件中使用React组件
    <template>
      <div>
        <my-react-component :prop1="value1" @event1="handleEvent"></my-react-component>
      </div>
    </template>
    
    <script>
      import MyReactComponent from './MyReactComponent';
    
      export default {
        components: {
          'my-react-component': MyReactComponent
        },
        data() {
          return {
            value1: 'some value'
          }
        },
        methods: {
          handleEvent() {
            // 处理React组件触发的事件
          }
        }
      }
    </script>
    
  • React与Angular集成

    示例代码:

    // 在Angular组件中使用React组件
    import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import { MyReactComponent } from './MyReactComponent';
    
    @Component({
      selector: 'app-my-angular-component',
      template: '<div #reactContainer></div>',
    })
    export class MyAngularComponent implements OnInit {
      @ViewChild('reactContainer', { static: true }) reactContainer: ElementRef;
    
      @Input() prop1: string;
    
      ngOnInit() {
        ReactDOM.render(<MyReactComponent prop1={this.prop1} />, this.reactContainer.nativeElement);
      }
    }
    
  • React与jQuery集成

    示例代码:

    // 在jQuery插件中使用React组件
    (function($) {
      $.fn.myJqueryPlugin = function(options) {
        const settings = $.extend({}, options);
    
        return this.each(function() {
          const $this = $(this);
          const props = { prop1: settings.prop1 };
    
          ReactDOM.render(<MyReactComponent {...props} />, $this[0]);
        });
      };
    })(jQuery);
    

4.3 React性能优化

4.4 React测试- 使用Jest和Enzyme进行组件测试

  • 使用React Testing Library进行组件测试
  • 使用Cypress进行端到端测试
  • 使用Sinon进行单元测试
  • 使用Mocha和Chai进行集成测试
  • 使用Jasmine进行全栈测试
  • 表格:
测试框架 优点 缺点
Jest 快速、易用、支持快照测试 集成度高,不易定制
Enzyme 支持浅渲染和深渲染,易于测试组件生命周期 不支持React16的新特性
React Testing Library 与用户行为更贴合,测试更真实 不易测试组件内部状态
Cypress 可以进行端到端测试,支持调试 无法测试多个浏览器
Sinon 可以模拟函数和对象,易于测试异步代码 需要与其他测试框架一起使用
Mocha和Chai 灵活、易用,可以与其他测试框架集成 需要手动安装和配置
Jasmine 可以进行全栈测试,易于测试异步代码 集成度不高,不易定制

5. 参考资料

5.1 React官方文档

  • React官方文档:https://reactjs.org/docs/getting-started.html

    React官方文档是React框架的官方文档,提供了详细的React介绍、快速上手指南、组件API等内容,是学习React的必备资料。在这里,你可以了解到React的基本概念、核心特性、组件生命周期、事件处理等知识点,并且可以通过实例代码进行实践操作,加深对React的理解。同时,React官方文档也提供了React Native、React VR等相关技术的文档,方便开发者进行深入学习和应用。

5.2 React源码解析

  • React源码解析官方文档:https://reactjs.org/docs/codebase-overview.html
  • React源码解析系列博客:https://react.iamkasong.com/
  • React源码解析视频教程:https://www.bilibili.com/video/BV1qE411b7cZ
  • React源码解析Github仓库:https://github.com/facebook/react
  • 表格:React源码解析书籍推荐
书名 作者 出版社 链接
《React源码解析》 陈屹著 机械工业出版社 https://book.douban.com/subject/30374649/

5.3 React实战教程- React官方文档:https://reactjs.org/docs/getting-started.html文章来源地址https://www.toymoban.com/news/detail-659356.html

  • React中文文档:https://zh-hans.reactjs.org/
  • 5.3 React实战教程:
    • React小书:http://huziketang.mangojuice.top/books/react/
    • React Native官方文档:https://reactnative.dev/docs/getting-started
    • React Router官方文档:https://reactrouter.com/web/guides/quick-start
    • Ant Design官方文档:https://ant.design/docs/react/introduce-cn
    • Material-UI官方文档:https://material-ui.com/zh/getting-started/installation/
    • Redux官方文档:https://redux.js.org/introduction/getting-started
    • Mobx官方文档:https://mobx.js.org/README.html
    • TypeScript官方文档:https://www.tslang.cn/docs/home.html
    • Next.js官方文档:https://nextjs.org/docs/getting-started
    • Gatsby官方文档:https://www.gatsbyjs.com/docs/

到了这里,关于前端 react教程(详细版)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从javascript到vue再到react:前端开发框架的演变

    目录 JavaScript: 动态语言的基础 JavaScript:Web开发的起点 Vue.js: 渐进式框架的兴起 Vue.js:简洁、高效的前端框架 React.js: 声明式UI的革新 React.js:强大、灵活的前端框架 演变之路与未来展望 演变过程 当提到前端开发中的框架时,JavaScript、Vue.js和React.js是三个最常见的名词。它

    2024年02月07日
    浏览(53)
  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(58)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(49)
  • jQuery.js - 前端必备的Javascript库

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 jQuery.js 是什么? jQuery是一个快速简洁、免费开源易用的JavaScript框架, 倡导写更少的代码,做更多的事情 。它封装JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,以及我们开发中常用到的操作DOM的API,优化HTML文

    2024年02月05日
    浏览(77)
  • Node.js npm V8 React Express的运行配合关系:构建JavaScript应用的基石

    目录 Node.js 和 V8 引擎 Node.js 和 npm LTS(Long Term Support) React Node.js的作用 Express Node.js 和 V8 引擎 Node.js 使用 Google 的 V8 JavaScript 引擎 来执行 JavaScript 代码。V8 是一个高性能的 JavaScript 和 WebAssembly 引擎,用于在 Google Chrome 浏览器和 Node.js 中运行 JavaScript。 V8 引擎的更新 通常包括

    2024年03月12日
    浏览(64)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(93)
  • React.js前端 + Spring Boot后端员工管理

    该项目是一个员工管理系统,前端使用 React.js 构建,后端使用 Spring Boot 和 Data JPA 和 Lombok 构建。它提供了有效管理员工信息的全面解决方案。 特征 响应式设计:响应式 UI 设计,确保跨各种设备的可用性。 数据验证:验证用户输入以确保数据完整性。 使用的技术 前端:R

    2024年04月28日
    浏览(50)
  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(85)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(64)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包