React 基础

Lokinli

发布于 2023-03-09 14:46:12

3870

发布于 2023-03-09 14:46:12

文章被收录于专栏：以终为始

特别声明： 这一篇为专栏的第一篇，有很多的东西需要在这里交代一下。 Mercury_Lc 初次接触前端框架知识，很多的地方认识有限，如有不对的地方欢迎在评论区指正，定会认真思考后改正错误的想法，开此专栏的目的在督促自己更好学习此知识，不愿意像之前学习知识那样子学到一半就半途而废，更新几次博客就再也没动静了，其他的学习并不是停更博客就停止了学习，只是在线下整理完之后就懒得再写博客整理，有的时候线下都懒得弄，所以导致很多的知识并没有系统化的串一遍，总之就是有点后悔，而且最近因为学业繁重，几近快要脱离博客这类东西了，想想之前那种猛的劲头，感觉自己应该没有老的那么快吧。哈哈哈。以上就是为什么要建立一个专栏的问题了，希望能够更好督促一下自己，更好的前行，如果你对文章内容感兴趣，并且有经济上难处，可以联系 Mercury_Lc ，会将学习的资料和网站推荐给你。其次，交代一下写的是什么东西，以后内容无非就是自己作为一个新手来学习 React 的经历教训或者是实践，如果你有足够强的自学能力完全不用听我在这里碎碎念式的学习，这里只是对于一个新手来说会友好一些，对于已经学习过的DaLao来说无关紧要，不如去学习点新知识，就别在这里喷我了，不过还是很欢迎提出问题和更好的一些方法的，毕竟对知识的狂热向往还是很重的。后面的文章中包括但不仅限于：React 的一些名词解释，React 的一些概念，我在实践中遇到一些问题，一些小的 Demo ，我的一些收获，各大领域大神的一些建议和方法…… 我的学习来源于百度百科、官网文档、周围大佬的指点……很多很多的参考资料。贵不在多，在于能用，学会就好。关于更新：更新的时间是一周一篇（也有可能一周两到三小篇，因为太长的教程不是很友好），【精力有限】，对于已经更新过的内容可能会根据情况进行修改完善。关于进度/完整度：对于一周内更新的一篇可能一天写不完很多的内容，所以写多少都会发布，之后会在这一篇上再进行内容的添加，在上次结束的地方继续更新。版权问题：如果涉及到侵犯他人版权的内容请尽快联系作者，会立即删除该部分内容。

进入正题 ~

React 简介

当翻阅很多的 React 教程时，在前言或者建议中会提醒你在想要去接触 React 之前，你应该会些啥？笼统的讲就是你应该有一定的 Web 开发基础，即你要认识什么是 HTML5 (Hyper Text Markup Language 5）、 CSS （Cascading Style Sheet）以及 JavaScript 。有了这两样东西你完全就可以写出一些网页了，比如一个简单的登录页面、一个表格展示页面又或者一个表单页面……当你具备了一定的审美和逻辑之后，这些静态的网页便可以信手捏来了（不知道这个词是不是这么用的），如果你不满足于此，想要一个既美观又炫酷的网页，那可能就需要一些 JS （JavaScript）了。而本系列的就在于解决这个问题以及怎么才能更提高效率，通过较为清晰简单的代码逻辑实现很多的功能。

前置技能：HTML5、CSS 和 JavaScript 。

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

很多的地方都会出现上面这一句话，按照我现在理解的意思大概就是可以让你来定义一个 JavaScript 库文件，比如你引用 jQuery 时那样，不过现在的内容你自己来定义了。

为什么要用 React ？

与其说为什么要用 React ，不如去看一看 React 有哪些特点以及它的一些思想，这些直接搜索一下应该就可以找得到。主观的原因大概就是因为想学习一门技术，能让自己变的更强，能让自己的项目变得更好。客观的原因就是 React 带来的一些便利性以及它的一些强大的功能，让你喜欢上去用它。React 的思想是封装组件，这样每一个组件都可以看成一个“函数”一样，都维护着属于自己的那部分的功能状态和 UI ，这样子就可以根据组件来改变页面等，不需要再搜索页面的所有的 DOM 元素，用起来更加地舒服些。

React 的核心概念

组件
JSX
Props & State
组件API
组件类型

~~以上这些核心的概念会分开学习，因为处于学习阶段，也没有能力和水平去现在去一一阐述。~~

React 安装

1、直接引用

如果你不是要创建一个 React APP （这里不理解可以不用在意），而是想要用它去写个网页出来，那就可以通过以下的简单方式，只需要把相应的文件引入，分别是 react.development.js 、 react-dom.development.js 、 babel.min.js 。

通过引入文件的名字就可以看出来，前两个是有关于 React 的，里面的一个子串是 development ，也就是说是仅适合在开发阶段的，在我们的需要部署时，将其换成 react.production.min.js 和 react-dom.production.min.js 即可。最后一个 babel.min.js 是用于转码的，将新一代的 ES6 代码转为 ES5 。

如果没有下载到这些文件，依然可以通过在线引用，官网提供的引用如下：

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

如果引用官网的有些慢的话，完全可以使用其他的教程中提供的一些 Staticfile CDN ，比如菜鸟教程的或者 W3Cschool 的

都可以。

说明：babel 虽然可以将 ES6 转码成 ES5，但是在浏览器中编译 JSX 的效率还是比较低的。

2020-01-17 14:00 Update

来个小栗子

来实现一个小栗子，使用我们的 React 来一个 Hello Word ，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React!</title>
		<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>
	<body>
		<div id="mercury"></div>
		<script type="text/babel">
			ReactDOM.render(
				<h1>Hello,React</h1>,
				document.getElementById('mercury')
			);
		</script>
	</body>
</html>

以上的操作的步骤很简单（假设不去先理解为什么这么干，就像在学 1 + 1 = 2 时，先按这样子去实践一下）：

任意创建一个 HTML 网页。
将链接的 React 文件写入。
写一个 <div></div> 并且要设置一个 id ，为了能够渲染它。
然后写一段 JavaScript 代码，把我们要显示的 " Hello React " 放到页面上。
刷新页面就有可以看到页面如下图所展示的样子了。

Hello React （这是在 HBuilderX 创建的一个页面）

2、搭建本地环境

如果不是第一种用户，而是想用 React 来搞些事情，比如来写个项目等，写个可以使用的 APP 应用等，这就需要在本地安装了。使用起来的区别是第一种是引用即可，第二种要建立一个有着组织结构的项目。

找了好几个教程以及参考了官方文档，通过 npm 来安装就可以了。我是在 Windows 下操作的，在 Linux 或者 Mac 上的一些命令是不同的（自己要注意一下，别用混乱了）。

前置条件：Node.js 和 NPM

安装命令

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
cnpm install -g create-react-app

创建项目

正常情况下就可以直接来创建一个了，可以通过下面命令：

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

注意：如果上述不成功可以尝试下面的。

报错信息：bash: create-react-app: command not found

npm init react-app my-app

或者通过官网的命令：

npx create-react-app my-demo

创建成功后的样子：

创建成功的部分信息（有的时候传的图片像假的一样传不上来，以后就用部分 Shell 信息来代替了）：

Success! Created my-demo at F:\1A-Folder\loveQAQ\React\reacttest\my-demo
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 my-demo
  npm start

Happy hacking!

启动项目

npm start

正常的样子：

$ npm start

> my-demo@0.1.0 start F:\1A-Folder\loveQAQ\React\reacttest\my-demo
> react-scripts start

i ｢wds｣: Project is running at http://192.168.139.1/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\1A-Folder\loveQAQ\React\reacttest\my-demo\public
i ｢wds｣: 404s will fallback to /index.html
Starting the development server...

Compiled successfully!

You can now view my-demo in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.139.1:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

截图：

这是我在 React 的中文文档中看到的一句话：“学习 React 的人来自不同技术背景和不同学习习惯。无论你喜欢更偏向理论性的学习，还是注重实际应用的学习，我们都希望您会发现这些部分对你来说非常有帮助。” 我想这也是每一个编撰资料的人都希望的事情，希望他人能够因为自己的努力得到一些提升，因为自己的努力给他人带来一些帮助，这也正是一种很好的结果，不是嘛？

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-01-14，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript