备案控制台
开发者社区 开发与运维 文章 正文

前端三剑客React框架第一课入门的学习

2023-07-16 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端三剑客React框架第一课入门的学习

前端三大框架React框架第一课入门的学习

前端三大框架的介绍

React:由facebook贡献，是一个基于javascript的前端库。它主要关注ui组件的构建，通过virtual dom等技术手段实现高效的渲染优化，可以与各种其他库和框架搭配使用，也有丰富的社区和插件生态。


React官网地址:快速入门 – React

Vue.js由evan you开发，是一个基于javascript的轻量级前端框架。它具有简洁的api和易学易用的特点，同时也拥有响应式数据绑定、组件化等高级特性，能够帮助开发者快速创建交互复杂的web应用。


Vue.js官网的地址:简介 | Vue.js (vuejs.org)

angular:由google开发，是一个基于typescript的前端框架。它强调了代码结构的严格性，有着完整的体系结构，包括依赖注入、模块化等特性，并且有着完善的文档和一系列工具支持。

Angular官网地址:Angular - Angular 入门


第一 如果您想学react，这里是一些可能有用的指导方案

1. 先掌握javascript基础知识

react 是一个 javascript 库，所以非常重要的第一步就是了解 javascript 的基本概念和语法。掌握模块、变量作用域、数据类型、函数等javascript基础概念。


2. 了解react核心概念

react 核心概念包括组件、jsx和虚拟dom（virtual dom）。这些概念对于理解和使用 react 至关重要，建议仔细学习。可以先通读 react官方文档，包括tutorial、main concepts、advanced guides 等内容。


3. 练习实践

了解react后，开始进行实践，并将所学应用到开发中。可以通过以下方式进行练习：


创建一个简单的 react 应用

增加更多的功能（比如与 api 交互、使用第三方库）

学习react 相关技术栈，例如redux或者react router等。

4. 查看优秀的资源

在学习过程中，可以寻找一些高质量的学习资源，例如


react相关书籍例如《react.js 小书》、《深入浅出react和redux》

react公众号飞冰、前端早读课等

react官方推荐项目有 create-react-app、react native等。

5. 加入相关社区

react拥有众多的学习者和开发者社区，您可以通过加入其中一个社区来更快地了解react，例如：


stack overflow

reddit

[facebook群

React:由facebook贡献，是一个基于javascript的前端库。它主要关注ui组件的构建，通过virtual dom等技术手段实现高效的渲染优化，可以与各种其他库和框架搭配使用，也有丰富的社区和插件生态。

React官网地址:快速入门 – React

第二 vue.js 是一个流行的基于 javascript 的前端开发框架。为了开始学习 vue，以下是一些建议的学习方案

1. html，css 和 javascript 基础

在学习 vue 之前，建议你先掌握好 html、css 和 javascript 基础知识。


html：了解关于 html 元素、标签和属性的基本知识。

css：理解样式如何应用于 html 文档。

javascript：学习基本语法、数据类型、函数等概念。

2. vue.js 官方文档

vue.js 官方文档是学习 vue.js 最好的资源之一。可以从这里访问官方文档。


建议按照文档的序列阅读，以便逐步掌握 vue.js 并且建立新概念的联系。


3. vue.js 项目实战

除了阅读文档，建议也进行一些实际的代码练习。可以参考 vue.js 的示例代码 或者自己构建一些小型项目。这将使你更深入地理解 vue.js 如何实现各种功能。


4. 社区资源

vue.js 拥有一个庞大活跃的开源社区，能够提供实用工具、资讯以及帮助你解决在开发过程中遇到的问题。下面是一些有用的社区资源：


vue.js 知识库

vue.js 资源汇总

vue.js 论坛

vue.js github repository

5. vue

Vue.js由evan you开发，是一个基于javascript的轻量级前端框架。它具有简洁的api和易学易用的特点，同时也拥有响应式数据绑定、组件化等高级特性，能够帮助开发者快速创建交互复杂的web应用。

Vue.js官网的地址:简介 | Vue.js (vuejs.org)

第三 angular 是一个非常流行的前端框架，它被大量使用在构建单页应用程序 (spa) 和复杂的 web 应用程序中。下面是学习 angular 的一些步骤和方案

1. html、css 和 javascript 基础

在学习 angular 之前，你需要了解基本的 html、css 和 javascript。如果你是初学者，可以先学习这些基础知识。


2. typescript

typescript 是 angular 的默认语言，并且它是一个强类型的面向对象编程语言。你需要学习它的语法和概念以及如何在 angular 中使用它。


3. angular 框架基础

理解 angular 框架的概念和基本组件是 angular 学习的重点，包括模块、组件、服务等等。你可以查看 angular 官网的《入门指南》来了解 angular 的基本概念和使用方法。


4. rxjs

angular 使用 rxjs 来处理异步数据流和事件。rxjs 是一个功能强大的响应式编程库，因此了解它的语法和概念对于学习 angular 是很重要的。


5. angular cli

angular cli 是一个命令行工具，它简化了创建和管理 angular 项目的过程。你需要学会如何使用 angular cli 来创建和构建你的应用程序。


6. 实践项目

最后，你需要完成一些实践项目来应用所学的知识。可以尝试使用 angular 构建一些简单的项目，例如 todo list、博客平台等等。


总的来说，这些是学习 angular 的基本步骤和方案。记住不要只停留在理论知识, 把它应用到实践中，熟能生


angular:由google开发，是一个基于typescript的前端框架。它强调了代码结构的严格性，有着完整的体系结构，包括依赖注入、模块化等特性，并且有着完善的文档和一系列工具支持。

Angular官网地址:Angular - Angular 入门

第四  React介绍

1.React起源与发展


React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决 定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源 了。


2.React与传统MVC的关系


轻量级的视图层库！A JavaScript library for building user interfaces


React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开 发模式；React 构建页面 UI 的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块 就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。


3.React的特性


1.组件化：react将ui抽象成了组件化的形式，使得代码更易于管理和维护。react的组件分为函数式组件和类组件，每个组件都有自己隔离的状态和生命周期方法。

2.虚拟dom：react采用虚拟dom（virtual dom）来管理和更新ui，将所有修改缓存在内存中，最后一次性更新到浏览器中，从而提高渲染效率。



3.单向数据流：在react中，数据的流动是单向的，即父组件通过props传递数据给子组件，子组件不能直接修改父组件的数据。这种单向数据流的设计使得数据变化的过程更加可预测、可控。

4.声明式编程：react的编程风格是声明式的，即开发人员只需要描述需要显示的ui内容，而不必关注底层实现细节，让代码更加简洁易懂。

5.高度可定制化：react具有高度的可定制化性，可以根据应用程序的需求进行灵活的扩展和定制，因此非常适合开发大型、复杂、高度可定制化的web应用程序。

6.jsx: react使用jsx语法，它允许将html和javascript混合在一起，以简化代码编写方式。同时也增强了代码的可读性和开发者的效率。

第五点 创建一个React框架的第一个程序

图片演示

                  第1步全局安装create-react-app ，第2步创建项目的名称。


切换文件路径，运行文件

 

项目创建成功运行URL地址端口号为3000。


                              创建一个React的项目中默认的页面，显示结果。

 Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
 *  还原的历史记录 
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!
You can now view myreact in the browser.
  Local:            http://localhost:3002
  On Your Network:  http://192.168.84.1:3002
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
 *  还原的历史记录 
Windows PowerShell
版权所有（C） Microsoft Corporation。保留所有权利。
安装最新的 PowerShell，了解新功能和改进！https://aka.ms/PSWindows
Windows PowerShell
版权所有（C） Microsoft Corporation。保留所有权利。
安装最新的 PowerShell，了解新功能和改进！https://aka.ms/PSWindows
PS D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn> PS D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn>
PS D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn> cd
PS D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn> npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Plea
se upgrade asap.
changed 67 packages in 6s
PS D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn> create-react-app your-app
Creating a new React app in D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn\your-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1424 packages in 2m
Installing template dependencies using npm...
added 62 packages in 23s
Removing template package using npm...
removed 1 package in 5s
Success! Created your-app at D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn\your-app
Inside that directory, you can run several commands:
  npm start
    Starts the development server.
  npm run build
    Bundles the app into static files for production.
  npm test
    Starts the test runner.
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd your-app
  npm start
Happy hacking!
PS D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn>   cd your-app
PS D:\Com.WEBFERL\Com.VueCll\com.React\ReactLearn\your-app>   npm start
> your-app@0.1.0 start
> react-scripts start
(node:3076) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is
deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:3076) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option i
s deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!
You can now view your-app in the browser.
  Local:            http://localhost:3000
  On Your Network:  http://192.168.84.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully

 

 

文章标签：
JavaScript
前端开发
API
缓存
开发者
开发框架
关键词：
React Native学习
前端react
前端学习
React Native框架
前端入门
t75yjb52rsccc
目录
相关文章
aliyun5297948689-49597
|
3天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础：组件、Props、State
【7月更文挑战第12天】React是JavaScript库，专注UI构建，基于组件化。组件是UI模块，可函数式或类定义。Props是组件间安全传递数据的只读参数，用defaultProps和propTypes保证正确性。State则是组件内部可变数据，用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
aliyun5297948689-49597
25 7
Star时光
|
5天前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础，精通Node.js核心模块（如fs、http）与事件循环机制，学习Express框架及异步编程（回调、Promise、async/await），掌握数据库交互，参与实战项目，关注Node.js最新技术和最佳实践，以此提升进阶技能。
Star时光
21 8
郑小健
|
6天前
|
存储 前端开发 JavaScript
深入浅出React框架：构建高效组件化网页的实战指南
【7月更文挑战第9天】在当今快速发展的前端技术领域，React凭借其强大的组件化思想、高效的虚拟DOM以及丰富的生态系统，成为了构建动态用户界面的首选框架之一。本文将带你深入浅出地探索React的核心概念，并通过实战示例，展示如何利用React构建高效、可维护的组件化网页。
郑小健
38 8
aliyun5297948689-49597
|
2天前
|
前端开发 JavaScript 开发者
前端框架与库 - React生命周期与Hooks
【7月更文挑战第13天】React 框架革新UI构建，引入Hooks简化组件状态管理和副作用处理。组件生命周期涉及挂载、更新、卸载，对应不同方法，如`componentDidMount`、`shouldComponentUpdate`等，但现在推荐使用`useState`和`useEffect` Hooks。`useEffect`处理副作用，需注意清理和依赖数组。避免问题的关键在于正确使用Hooks和理解其工作模式，以构建高效应用。
aliyun5297948689-49597
9 2
小周sir
|
10天前
|
前端开发 JavaScript 开发工具
给前端小白的学习建议
【7月更文挑战第4天】 **前端新手入门指南：** - 明确目标，从HTML/CSS基础开始。 - 深入学习JavaScript，结合项目实战。 - 跟踪技术趋势，选一二框架钻研。 - 多实践，从小项目到复杂应用。 - 掌握开发工具与调试技巧。 - 培养解决问题的能力，保持好奇与耐心。 - 加入社区，分享交流，持之以恒，成为优秀前端开发者。
小周sir
13 2
朝阳39
|
9天前
|
前端开发
react18【实战】tab切换，纯前端列表排序（含 lodash 和 classnames 的安装和使用）
react18【实战】tab切换，纯前端列表排序（含 lodash 和 classnames 的安装和使用）
朝阳39
14 1
Star时光
|
11天前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全，防止传输中被截获，提升用户体验。HTTPS基础保障，JavaScript库如CryptoJS辅助加密，Web Crypto API提供原生加密功能。但前端加密非万能，需结合后端措施，注意算法选择、密钥管理。
Star时光
12 2
1941623231718325
|
13天前
|
前端开发 JavaScript 数据管理
前端框架对比：React、Vue与Angular
【7月更文挑战第2天】React、Vue和Angular是前端三大框架，各有特色。React以组件化和虚拟DOM著称，适合大型SPA；Vue轻量且易用，适用于快速开发；Angular是全面解决方案，适合复杂应用，但学习成本高。选择取决于项目需求和团队技能。
1941623231718325
18 2
换个网名有点难
|
5天前
|
XML 前端开发 JavaScript
WEB三大主流框架之React
WEB三大主流框架之React
换个网名有点难
8 0
gswnlrt2j7wj6
|
7天前
|
前端开发 JavaScript 测试技术
IT入门知识第五部分《前端开发》（5/10）（二）
IT入门知识第五部分《前端开发》（5/10）（二）
gswnlrt2j7wj6
10 0

热门文章

最新文章

  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
  • 2
    《跨界合作：前端与后端如何优化协作效率》
  • 3
    (转) 谈一谈创建React Component的几种方式
  • 4
    React安装 环境搭建
  • 5
    如何优雅地在 React 中使用TypeScript，看这一篇就够了！（2）
  • 6
    react 实现页面跳转
  • 7
    React 类组件和函数组件
  • 8
    React-49：纯函数概念
  • 9
    React 中使用高阶函数
  • 10
    #私藏项目实操分享# 【React工作记录九】switch对按钮进行判断操作
  • 1
    使用React Native进行跨平台移动开发
    38
  • 2
    React Hooks实战：从useState到useContext深度解析
    45
  • 3
    在回调函数中重新渲染React组件
    22
  • 4
    React 项目用过什么脚手架（本题是开放性题目）
    27
  • 5
    React中的DOM diff算法是如何工作的
    23
  • 6
    react中JSX的详解
    30
  • 7
    react中的useEffect的使用
    21
  • 8
    写出易维护的代码｜React开发的设计模式及原则
    72
  • 9
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    63
  • 10
    【TypeScript技术专栏】TypeScript与React的完美结合
    36

    • 相关课程

    更多
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 零基础入门Serverless：TodoList应用创建
  • 每个IT人都想学的“Web应用上云经典架构”实战
    • 下一篇
    2024年阿里云免费云服务器及学生三百通用额度申请教程参考