React开发入门

最新推荐文章于 2023-10-05 21:31:49 发布
最新推荐文章于 2023-10-05 21:31:49 发布
阅读量253 收藏 2
点赞数
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gqw666/article/details/105336532
版权

目录

一、什么是React

React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户创建图形化界面

angularJs reactJs vueJs angularTs
控制器 √ - - 弱化
过滤器 √ - √ √
指令 √ - √ √
模板语法 √ - √ √
服务 √ - - √
组件 - √ √
jsx - √ 加入 -

二、开发环境的搭建

官方脚手架

安装 create-react-app

yarn global add create-react-app | npm install create-react-app	-g

创建 react项目

create-react-app 目录 | npx create-react-app 目录 | npm init react-app 目录
yarn eject   解构出所有的配置文件 可选
yarn start |  npm start 			开发
yarn build |  npm run build	 打包

//调试 需要安装给chrome浏览器一个插件 react-dev-tools

环境解析

  • react: 核心包，解析组件 演示
  • react-dom: 编译 -> 浏览器 演示
  • react-scrpts: react的项目环境配置
  • manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
  • registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
  • 对Internet Explorer 9,10和11的支持需要polyfill。

环境配置

npm run eject | yarn eject
报git错误时: 
	git add . -> git commit -m 'init' -> yarn eject
	报缺少babel 包: 安装一下
  
//修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;

//去除eslint 警告
//config/webpack.config.js
//注释关于eslint的导入和rules规则

资源限制

  • 本地资源导入(import) 不可以导入src之外的包

  • 相对 指向src，绝对路径 指向了 public目录

  • 前景图片, 相对 和 绝对路径 都指向了 public目录

第三方脚手架

yeomen/dva/umi

webpack手动搭建

JSX

jsx是一个 JavaScript 的语法扩展，可以理解为js的一个新的数据类型，类XML（JSON前身）语法，出现在js当中，文件为xx.js|xx.jsx

var b= <strong>强壮</strong>

语法要求

  • 标签要闭合
  • 元素必须要有一个顶层元素
  • 变量首字母大写代表组件，小写对应是js数据类型
  • 属性，小驼峰命名 <xx tabIndex="2">

三、最简单的React小程序

我学任何语言的时候第一个程序都是一个Hello,World!。现在就让我们来利用React来写一个最简单的Hello,World!
直接上代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Hello world!</title>
   <script src = "../../build/react.js"></script>
   <script src = "../../build/react-dom.js"></script>
   <script src = "../../build/browser.min.js"></script>
</head>
<body>
   <div id = "example"></div>
   <script type="text/babel">
      ReactDOM.render(
            <h1>Hello,World!</h1>,
            document.getElementById('example')
      );
   </script>
</body>
</html>

然后用浏览器打开就可以了（这里假设你已经会使用IntellJ IDEA，如果不会就先使用Sublime Text），然后在浏览器里面就可以看到你特别熟悉的Hello,World！了。

这里需要注意：首先，/h1>后面是此外，以前我们可能使用的是type是text/javascript，现在我们使用的text/babel。这是因为React独有的JSX语法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type = “text/babel”。
JSX的基本语法规则：遇到HTML标签(以<开头)，就用HTML规则解析；遇到代码块(以{开头)，就用JavaScript规则解析。
在ReactDOM.render里面写了两行，他们的作用就是将h1标题插入example节点。
你也可以直接新建一个js文件，然后将body里script里面的代码直接放到里面，我们可以命名为helloworld.js，然后在head里面导入即可。我比较倾向于这种做法，因为至少html文件不会看着太大，而且方便引入管理。如果其他html也需要改代码块，直接引入即可。

四、基础语法介绍

1、ReactDOM.render( )**

ReactDOM.render是React最基本的语法，用于将模板转换成HTML语言，并插入指定的DOM节点。

ReactDOM.render(
    <h1>Hello,World!</h1>,
    d
最低0.47元/天 解锁文章
AOKO&
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react开发思维方式入门
02-25
所以在这里写一下怎样快速的转换到react开发思维方式上来。让我们从一个开发需求开发，分别用react和jquery进行开发。当然不用担心，我不会通过代码形式的来讲述其中的差别，这样看起来还是会很费劲的，我会通过伪...
15个常用React开发教程和资源：少走弯路提升效率
最新发布
WPHunter的编程技术资料库！
01-09 5472
React的强大功能和受欢迎程度使其成为前端UI使用最多的JavaScript库之一，甚至是全球顶级公司。因此，学习React对开发者来说是有好处的，因为许多公司都在寻找具有强大React技能的专业人士。因此，如果你是一名专业人士，正在寻找学习React的最佳资源，我们在本文中收集了一些最好的课程、教程和书籍。
React教程（详细版）
热门推荐
Ronychen的博客
03-19 19万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
react快速开始(一)-入门基础
西京刀客
10-09 1万+
react快速开始-入门基础 在前端框架框架方面，其中的佼佼者React和AngularJS均出名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。
前端开发基础（5）React
羽墨灵丘的博客
07-12 914
react 开发的基础知识
第一章 react前端开发-react入门
qq_24430629的博客
11-10 1833
react入门
slim-react-starter:使用Snowpack和Skypack的基于CDN的React开发入门
05-25
带有Snowpack和Skypack的基于CDN的React开发入门，请查看我的。 用法 git clone https://github.com/nafeu/slim-react-starter.git cd slim-react-starter npm install 发展 npm run dev 建造 npm run build 执照...
react-starter:我的React开发入门套件
03-09
React是目前非常流行的JavaScript库，...学习和使用这个入门套件，你将能够掌握React开发的基本流程，理解组件化编程思想，并熟悉前端工程化的最佳实践。通过实际操作和研究项目源码，将有助于提升你的React开发技能。
React官网入门教程
02-22
本教程将基于React官网的入门教程，介绍React的基本概念、语法以及如何创建一个简单的React应用。 首先，React的核心概念是组件。组件是React中的基本构建块，可以看作是自包含的、可重用的UI部分。每个组件都有...
React教程（由浅到深）
web$-小白
07-02 2万+
1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>`接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
使用react进行项目开发
Nikki_u的博客
05-31 669
一、项目初始化 1、创建项目 npx create-react-app react-basic 2、清理项目目录，根据模板搭建基本页面结构 3、安装sass包 yarn add sass 4、安装bootstrap包 yarn add bootstrap@4.5.0 ,导入bootstrap样式文件 5、配置Redux基本配置 yarn add redux@3 6、如果碰到项目报错或不兼容可能需要降版本 yarn add react@17.0.2 react-dom@17.0.2 --sa
React 开发必须知道的 34 个技巧【近1W字】
weixin__BJ050106的博客
08-08 482
这是Function 定义的组件}// 在 hooks 未出来之前,这个是定义无状态组件的方法,现在有了 hooks 也可以处理状态复制代码方式 2: ES5的 createClass 定义return 这是React.createClass定义的组件
【开发】前端工程——ReactJS
努力，奋斗！
03-13 1847
ReactJS:前端开发四个阶段，ReactJS语法，JSX，组件，Model，React框架分类 AntDesign：antd，Tabs，布局，导航菜单，表格 AntDesign Pro：部署和安装，菜单和路由，新增页面，Pro中model执行流程
React购物网站项目开发
waillyer的博客
11-10 1316
说明 从无到有编写购物网站，网站参考华为官网，主要是用于学习react 开发环境 需要安装node.js React 开发环境 node请自行百度安装 create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES6 。 一、新建项目 没有环境先安装： $ cnpm install -g create-react-app 新建购物项目 create-react-a
从0到1无比流畅的React入门教程
tangdou369098655的博客
05-17 2190
用于构建 Web 和原生交互界面的库React 用组件创建用户界面是一个将数据渲染为HTML视图的开源JS库执行顺序->或者->render->
React 之 组件化开发
玄鱼殇
07-03 1801
React 之 React组件化开发
React核心原理与实际开发
m0_61843855的博客
10-05 999
父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）1.props：2.消息订阅-发布：pubs-sub、event等等3.集中式管理：redux、dva等等4.conText:生产者-消费者模式父子组件：props兄弟组件：消息订阅-发布、集中式管理祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)
React基础入门
donglize521521的博客
09-24 3115
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
ReactNative开发入门与实践
《React Native开发指南》是一本全面的教程，适合想要入门React Native开发或者希望深化理解React Native工作原理的开发者。通过本书，读者不仅可以学习到React Native的基础知识，还能掌握构建实际移动应用的技能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值