【前端】react的基础认识

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

 

【前端】react的基础认识,前端,react.js,前端框架

人不走空

                                                                      

      🌈个人主页:人不走空      

💖系列专栏:算法专题

⏰诗词歌赋:斯是陋室,惟吾德馨

 文章来源地址https://www.toymoban.com/news/detail-815377.html

【前端】react的基础认识,前端,react.js,前端框架

【前端】react的基础认识,前端,react.js,前端框架 

React,由Facebook开发,是一种用于构建用户界面的JavaScript库。它以其简单、灵活和高性能的特性而受到广泛欢迎,成为现代前端开发的主流选择。在本博客中,我们将深入了解React的基础知识,带您一步步走进React的世界。

1. React的起步:

安装React:

首先,确保您的项目中已经安装了Node.js和npm。然后使用以下命令安装React:

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

JSX语法:

React使用JSX(JavaScript XML)语法,它是一种在JavaScript中嵌入XML/HTML的语法糖。以下是一个简单的JSX示例:

const element = <h1>Hello, React!</h1>;

 

2. 组件和Props:

创建组件:

在React中,一切都是组件。组件是可重用的、独立的代码单元。创建一个简单的函数组件:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

使用组件:

const element = <Welcome name="John" />;

 

3. 状态和生命周期:

类组件:

类组件是一种有状态的组件,可以包含生命周期方法。以下是一个简单的类组件:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ date: new Date() });
  }

  render() {
    return <div>Current time: {this.state.date.toLocaleTimeString()}</div>;
  }
}

 

4. 事件处理:

处理事件:

React中的事件处理与HTML类似,但是使用驼峰命名法。以下是一个简单的点击事件处理:

class Button extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}

 

5. 表单与受控组件:

受控组件:

React中的表单元素被称为受控组件,其值由React状态控制。以下是一个简单的受控输入框:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={(e) => this.handleChange(e)}
      />
    );
  }
}

 

6. React中的列表和条件渲染:

列表渲染:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);

 

条件渲染:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

 

结语:

React的学习过程是一次探索现代前端开发的旅程。通过深入理解React的组件、状态、生命周期和事件处理等核心概念,您将能够构建出更加灵活、可维护和高性能的前端应用。本博客仅是React的入门指南,如果您希望更深入地了解React,建议查阅官方文档和相关教程。祝愿您在React的世界中编写出精彩的前端代码!


作者其他作品:

数据结构之链表-CSDN博客

力扣1445 连续字符-CSDN博客

软件工程之维护阶段-CSDN博客

开源社区的力量:软件工程的协作新模式-CSDN博客

https://blog.csdn.net/double222222/article/details/134776271

 软件工程之设计分析(2)-CSDN博客

软件工程之设计分析(1)-CSDN博客

软件工程之需求分析-CSDN博客

软件工程之编码(1)-CSDN博客

https://blog.csdn.net/double222222/article/details/135334628?spm=1001.2014.3001.5502

【Linux】文件服务NFS(Network File System)-CSDN博客

软件工程之编码(2)-CSDN博客

 

 

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

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

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

相关文章

  • React框架课时二认识项目的结构目录一

    ├── README.md 使用方法的文档 ├── node_modules 所有的依赖安装的目录 ├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。 ├── package.json ├── public 静态公共目录 └── src 开发用的源代码目录 2 图片的演示如图所示 README.md 使用方法的文档

    2024年02月02日
    浏览(76)
  • 前端框架学习-React(一)

    React 应用程序是由 组件 组成的。 react 程序是用的jsx语法,使用这种语法的代码需要由babel进行解析,解析成js代码。 jsx语法: 只能返回一个根元素 所有的标签都必须闭合(自闭和或使用一对标签的方式闭合) 使用驼峰式命名法给大部分属性命名如:className 大写字母开头的

    2024年02月12日
    浏览(41)
  • 前端框架 Nextjs React 部署

    目录 一、node环境部署 二、静态导出 补充:路由问题 Nextjs打包还是非常方便的,就是网上资料不太全,导致踩了一些坑,下面是我亲自实践的两种打包方式。 一、node环境部署 这种方式最简单,也比较不容易出错,但部署时服务器需安装有node环境,速度没话说,杠杠的! 构

    2024年02月12日
    浏览(42)
  • three.js 基础认识与简单应用

    学习总结初衷:          1. 公司项目需要。         2. 做一下笔记,方便以后学习查看,好记性不如烂笔头;也能筑固基础,加深印象。         3. 现在国内关于Three.js的学习资料很少,总结一下多多少少也能给有需要的小伙伴一些帮助。 1. 什么是three.js?你将它理解成

    2024年02月03日
    浏览(44)
  • React与Vue:前端框架的比较

    在前端开发领域,React和Vue是两个备受瞩目的框架。它们都提供了构建用户界面的强大工具,但它们在实现方式、性能和设计理念上存在一些关键差异。本文将深入探讨这两个框架之间的主要区别。 首先,让我们从数据流的角度来看。在Vue中,数据流是双向的,这意味着组件

    2024年01月20日
    浏览(46)
  • Vue 和 React 前端框架的比较

    本文研究了流行的前端框架 Vue 和 React 之间的区别。通过对它们的学习曲线、视图层处理方式、组件化开发、响应式数据处理方式和生态系统及社区支持进行比较分析,得出了它们在不同方面的优劣和特点。该研究对于开发者在选择合适的前端框架时提供参考。 Vue 是一款由

    2024年02月13日
    浏览(63)
  • 前端(七)——React框架的定位与应用场景解析

    😊博主:小猫娃来啦 😊文章核心: React框架的定位与应用场景解析 什么是react? React 是一个由 Facebook 开发的开源 JavaScript库,用于构建用户界面。 于2013年首次发布,并迅速成为前端开发中最受欢迎的框架之一。 在 React 诞生之前,前端开发面临着许多挑战,包括复杂的D

    2024年02月17日
    浏览(42)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(56)
  • 前端(十一)——Vue vs. React:两大前端框架的深度对比与分析

    😊博主:小猫娃来啦 😊文章核心: Vue vs. React:两大前端框架的深度对比与分析 在当今快速发展的前端领域中,Vue和React作为两个备受瞩目的前端框架,已经成为许多开发者的首选。这两个框架凭借其出色的设计和强大的功能,在构建现代化、高效性能的Web应用方面扮演着

    2024年02月14日
    浏览(53)
  • React与Vue性能对比:两大前端框架的性能

    React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。 React的加载速度: 初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM树的差异来进行高效的重绘。这使得React在初次加载时相对较快,因为它只会更新需要修改的

    2024年02月03日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包