【React笔记初学总结一】React新手的学习流程笔记总结,掰开了揉碎了,下载安装基础结构学习

时间:2024-07-17 07:02:26

REACT学习记录

  • 一、React是什么:
  • 二、尝试安装下载:
  • 三、理解都有什么
  • 四、基础网页学习:
    • 1.几个比较重要的资源包例子
    • 2.第一个react示例:(掰开了揉碎了,咱们先看懂它最简单的结构)
    • 3.第二个react示例:(加深一点点难度)

一、React是什么:

React是一个构建WEB和原生交互界面的库。优势:组件化开发,丰富的生态,跨平台支持
React是一个用于构建用户界面的JavaScript库。它由Facebook开发并开源,可以用于构建单页面应用、移动应用和大型可扩展的Web应用程序。React通过使用组件化的方式,将界面拆分成独立的可重用部分,简化了应用程序开发的复杂性。它使用虚拟DOM来实现高效的页面渲染,并支持状态管理和数据流控制。React还可以与其他库或框架(如Redux)配合使用,提供更强大的功能和可扩展性。

  1. 快速开发:React 是一个高效的库,可以快速构建用户界面。它提供了组件化的开发方式,可以轻松地将界面拆分为可重用的组件,从而加快开发速度。

  2. 虚拟 DOM:React 使用虚拟 DOM 来管理和更新用户界面。虚拟 DOM 是一个内存中的表示,它允许开发者在代码层面进行操作,而不是直接操作真实的 DOM。通过比较虚拟 DOM 和真实 DOM 的差异,React 可以只更新需要更新的部分,从而提高性能。

  3. 组件化:React 推崇组件化的开发方式,允许开发者将界面拆分为可重用的组件。这种方式使得代码更容易管理和维护,并且可以提高代码的复用性。通过组件的复合和嵌套,可以构建复杂的用户界面。

  4. 单向数据流:React 使用单向数据流的模式,数据流动的方向是自上而下的。这种模式使得代码更加可预测,易于调试和维护。同时,它也使得组件可重用性更高,因为每个组件只负责管理自己的状态和数据。

二、尝试安装下载:

要使用React创建项目,你可以按照以下步骤进行操作:
1.下载安装:visual studio code官网
2.下载安装:node官网
3.由于node.js默认配置了npm,所以不用单独下载和配置npm了

  1. 确保你的电脑已经安装了Node.js和npm(Node.js的包管理工具)。你可以在命令行中输入以下命令来检查是否已经安装成功:(visual studio code进入点击ctrl+`进入终端)
    在这里插入图片描述
node -v
npm -v

在这里插入图片描述

  1. 安装Create React App,这是一个官方提供的用于创建React项目的命令行工具,输入以下命令来进行安装:
npm install -g create-react-app
  1. 创建一个新的React项目,输入以下命令:
npx create-react-app my-app

这将创建一个名为"my-app"的新目录,并在其中初始化一个新的React项目。

  1. 进入新创建的项目目录,输入以下命令来启动开发服务器:
cd my-app
npm start

这将在浏览器中打开一个新的窗口,显示你的React应用的默认页面。
在这里插入图片描述

现在你已经成功创建了一个React项目,并可以开始进行开发了!你可以在"src"目录下编辑代码,更新应用的外观和功能,修改"public"目录中的文件来自定义页面标题和图标等。
在这里插入图片描述
运行之后的显示:
在这里插入图片描述

三、理解都有什么

在这里插入图片描述
node_modules所有项目依赖项所在地方,包括react库和后面所要安装的包或者是库。(这个你不用进入知道它在那里就好~)

在这里插入图片描述
public 是我们所有向浏览器公开的公共文件,所以这里有一个index.html我们所有反应代码都被注入到div中。
在这里插入图片描述

我们主要要编写的地方,编写的所有react组件都在这里,并且已经存放了一个app.js的组件;还有一些css样式;还有一个测试的文件App.test.js;index.js是启动我们应用程序的文件(获取所有的react组件并安装)。最后两个一个是测试,一个是性能信息(具体的我还没尝试)

四、基础网页学习:

react学习先要下载一些核心资源包,因为它很多都是给你封装好的
react资源包安装直接在react官网上下载相应的js文件,并用 <script 标签引入,具体的下载地址:在这个里面找

1.几个比较重要的资源包例子

react.js:(核心资源库)
https://unpkg.com/react@16/umd/react.development.js
react-dom.js:(dom节点的处理)
https://unpkg.com/react-dom@16/umd/react-dom.development.js
babel.js:(jsx的语法)
https://unpkg.com/babel-standalone@6.15.0/babel.min.js

2.第一个react示例:(掰开了揉碎了,咱们先看懂它最简单的结构)

对下面的代码进行讲解!掰开了揉碎了!!
1.<head 引入react相关的js文件
2.<div 标签react的入口
3.<script reactdom调用了一个render(渲染)方法,document.getElementByld JavaScript的选择器,通过标签的ID(app)选定<div 标签
4.<h1 里的东西追加到<div 里面(h1中是一个jsx语法,对应我上面第三个js文件)

<!DOCTYPE html>
<html>
  <head>
    <title>React示例</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
      <h1>React前端框架</h1>
      document.getElementByld("app")
      );
     </script>
  </body>
</html>

结果

3.第二个react示例:(加深一点点难度)

对下面的代码进行讲解:
我们其他不动,这回我们可以定义一个变量A,然后在下面直接渲染A这个变量所对应的全部内容。

   <!DOCTYPE html>
<html>
  <head>
    <title>React示例</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    
    <div id="app"></div>
    <script type="text/babel">
      var A=(
      <div>
      <h1>React前端框架</h1>
      <h2>React前端框架</h2>
      <h3>React前端框架</h3>
      </div>
      );
      ReactDOM.render(
      A
      document.getElementByld("app")
      );
     </script>
  </body>
</html>

在这里插入图片描述