React 入门学习

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

一、基本认识

1.1、前言

React 使用称为 JSX(JavaScript 和 XML)的 HTML-in-JavaScript 语法。
熟悉 HTML 和 JavaScript 可以帮助您学习 JSX,并更好地确定应用程序中的错误是与 JavaScript 还是与 React 的更特定领域相关.

1.2、什么是

React 是一个用于构建用户界面的库。

React 不是一个框架 —— 它的应用甚至不局限于 Web 开发,它可以与其他库一起使用以渲染到特定环境。 例如,React Native 可用于构建移动应用程序;React 360 可用于构建虚拟现实应用程序…… 为了构建 Web 应用,开发人员将 React 与 ReactDOM 结合使用。 React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论,并用于解决相同的问题。当我们将 React 称为“框架”时,就是在进行口语化的理解。

1.3、编译

浏览器是无法读取直接解析 JSX 的。我们的表达式经过( Babel 或 Parcel 之类的工具)编译

1.4、特点

  • JSX
  • Declarative Programming(声明式编程)
  • Funational Programming(函数式编程)
    • 不是单纯的声明式还是函数式编程,都有借鉴
  • Component-Based (组件化编码)
  • Learn Once, Write Anywhere(支持客户端与服务器渲染)
  • Virtual DOM(虚拟DOM)
  • 单向数据流(Flux)
  • React Native
  • TypeScript

1.5、高效

虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数) 高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)

二、React环境和基本使用

2.1、环境搭建

关注此链接的 2.5 章节

2.2、脚手架项目基本使用

React 入门学习,React,react.js

2.2.1、src

源码存放的目录

2.2.1.1、App.js
  • import
  • App 组件
  • Export 语句
//允许在此脚本中使用其他文件中的代码
import logo from './logo.svg';
import './App.css';

//方法返回一个 JSX 表达式,这个表达式定义了浏览器最终要渲染的 DOM。
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

//export default App 语句使得 App 组件能被其他模块使用
export default App;
2.2.1.2、index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//App 组件被用到的地方
import App from './App';
import reportWebVitals from './reportWebVitals';
//我们想要渲染的组件,在这个例子中是 <App /> .
// 我们想要渲染组件所在的 DOM 元素,在这个例子中是带着 root 标签的元素。让我们看一下 public/index.html 的代码,可以看到这有一个 <div> 元素 在 <body> 里。
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.css
定义了运用于整个 app 的 global style

2.2.2、public

包含了开发应用时浏览器会读取的文件

  • src代码会嵌入此文件(index.html)

2.2.3、package.json

为了建立该应用程序所管理着的文件信息

三、JSX的理解和使用

JSX(JavaScript XML)是一种在React中编写用户界面的语法扩展,它允许你在JavaScript代码中直接书写类似HTML的结构。

下面是一些JSX的基本语法规则:

  1. 元素定义:JSX元素以类似HTML标签的方式定义,通常以大写字母开头。

    const element = <h1>Hello, JSX!</h1>;
    
  2. 嵌套元素:JSX元素可以嵌套,就像在HTML中一样。

    const element = (
      <div>
        <h1>Hello</h1>
        <p>JSX is awesome!</p>
      </div>
    );
    
  3. JavaScript 表达式:你可以在JSX中使用花括号 {} 来包含任意的JavaScript表达式。

    const name = "Alice";
    const element = <h1>Hello, {name}!</h1>;
    
  4. 属性:你可以给JSX元素添加属性,就像在HTML中一样。

    const element = <img src="image.jpg" alt="An image" />;
    
  5. class 和 style:由于class是JavaScript的保留关键字,因此在JSX中使用CSS类名需要使用className

    const element = <div className="my-class">Styled div</div>;
    

    同样地,style属性应该是一个对象,其中的属性名需要使用驼峰命名法。

    const styles = {
      backgroundColor: "blue",
      color: "white"
    };
    
    const element = <div style={styles}>Styled div</div>;
    

    如果styles直接赋值给style,写成:

    const element = <div style={{
      backgroundColor: "blue",
      color: "white"
      }}>Styled div</div>;
    
  6. 自闭合标签:与HTML一样,JSX中的标签也可以是自闭合的。

    const element = <input type="text" />;
    
  7. 注释:JSX中的注释需要用花括号包裹起来。

    const element = (
      <div>
        {/* This is a comment */}
        <p>JSX with comments</p>
      </div>
    );
    

在React应用程序中,JSX被Babel等工具转换成普通的JavaScript代码,以便浏览器可以理解和渲染。

四、模块与模块化, 组件与组件化的理解

4.1、模块与组件

  • 模块:
    理解: 向外提供特定功能的js程序, 一般就是一个js文件
    为什么: js代码更多更复杂
    作用: 复用js, 简化js的编写, 提高js运行效率
  • 组件:
    理解: 用来实现特定功能效果的代码集合(html/css/js)
    为什么: 一个界面的功能太复杂了
    作用: 复用编码, 简化项目界面编码, 提高运行效率

定义组件:

 // MyComponent.js
 import React, { Component } from 'react';

 class MyComponent extends Component {
 // 组件的定义
 }

 export default MyComponent;

引用他:

	// 另一个文件中
	import MyComponent from './MyComponent';

	// 使用导入的组件

4.2、模块化与组件化

  • 模块化:
    当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
  • 组件化:
    当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

参考地址

MDN

https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

BILIBILI 尚硅谷

https://www.bilibili.com/video/BV1wy4y1D7JT/?p=26&spm_id_from=333.1007.top_right_bar_window_history.content.click文章来源地址https://www.toymoban.com/news/detail-637197.html

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

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

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

相关文章

  • React入门学习笔记3

    通过onXxx属性指定事件处理函数( 注意大小写 ) React使用的是 自定义 (合成)事件 , 而不是使用的原生DOM事件——为了更好的兼容性 eg:οnclick==》onClick React中的事件是通过 事件委托方式 处理的(委托给组件最外层的元素)——为了更高效 通过 event.target 得到发生事件的DOM元素对象

    2024年02月14日
    浏览(42)
  • React入门 组件学习笔记

    项目页面以组件形式层层搭起来,组件提高复用性,可维护性 目录 一、函数组件  二、类组件 三、 组件的事件绑定 四、获取事件对象 五、事件绑定传递额外参数 六、组件状态 初始化状态 读取状态 修改状态 七、组件-状态修改counter案例  八、this问题说明 九、总结  目标

    2024年02月11日
    浏览(36)
  • React入门 学习全记录(适合和我一样有Vue经验想学习react的同学~)

    都采用了组件化开发的方式,都是基于MVVM的框架有着虚拟DOM, Vue 和 Angular 都采用了响应式设计的方式,当数据发生变化时会自动更新视图。 React 和 Angular 的复杂性也使得它们更加适合于大型和复杂的项目 Vue 是一款轻量级、渐进式、灵活且易于学习的框架,适合快速构建单

    2024年02月16日
    浏览(48)
  • react入门到实战 学习笔记1 搭建

           一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架 React有什么特点 1- 声明式UI(JSX) 写UI就和写普通的HTML一样,抛弃命令式的繁琐实现  2- 组件化 组件是react中最重要的内容,组件可以通过搭积木的方式拼成一个完整的页面,通过组件的抽象可以

    2024年02月13日
    浏览(34)
  • React--》学习Lodash:让你的JS代码更加优雅和易于阅读

            此时隔壁 vue专栏 正在项目实战,为了不打断它的文章连续性,我们把lodash的讲解文章搬到react专栏来进行学习,当然是否用框架或用什么框架都不会影响我们学习的恒心! 目录 初识Lodash 操作数组方法 操作语言方法 操作数学方法 操作对象方法 操作字符串方法

    2024年02月12日
    浏览(37)
  • 丁鹿学堂:前端学习进阶指南之react入门(react在html中使用数据绑定和修改)

    在html中使用react 今天跟大家分享react的基础语法。 我们采用最简单的方法,就是在html中引入react 因为一上来就使用脚手架的话,很多配置大家不一定清楚。 而在html中使用react的话,可以直接去学习react最基本的语法。 这是零基础学习react的最佳实践。 引入react的依赖 react也

    2024年02月14日
    浏览(63)
  • 【webpack学习】React项目中webpack.config.js 和 webpack.base.config.js 的区别

    在React项目中,通常使用Webpack作为打包工具。 webpack.config.js 和 webpack.base.config.js 两个文件在项目中的作用是不同的。 webpack.config.js 是Webpack的主要配置文件,它包含了项目的通用配置以及针对不同环境(如开发环境和生产环境)的特定配置。 这个文件包含了整个Webpack配置的

    2024年01月23日
    浏览(50)
  • React笔记-React入门

    主要是现在要改一个开源项目,需要学习下React入门,在此记录一下。 React底层核心:react.development.js React操作DOM库:react-dom.development.js 解析ES6语法:babel.min.js React.createElement() //创建元素 如创建一个节点: 如: 或如: 添加Class ES5: ES6: React中组件: 无状态组件(函数式组

    2024年02月13日
    浏览(41)
  • three.js(四):react + three.js

    绘制多个立方体 1.搭建react+ts 项目 react+ts 的用法可参考此链接: https://react-typescript-cheatsheet.netlify.app/docs/basic/setup 2.安装three依赖 3.安装路由 react-router-v6 的用法可参考此链接:https://juejin.cn/post/7088526716049555492 4.用路由组件包裹APP。 index.tsx 5.构建项目页面 src/view/Basics.tsx src/

    2024年02月11日
    浏览(55)
  • 【react从入门到精通】React JSX详解

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:react从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2024年02月05日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包