react 进阶之路（react 快速入门）



在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释：React 是用于构建用户界面的JavaScript 库。我们只需要知道这点就够了，对于其他的解释当我们深入学习之后就会自然而然地懂了。

本文将按照官网的推荐在 node 开发环境下创建 React 的一个开发实例。所以在开发之前我们我们可以先在控制台运行：

来检查自己本地电脑是否安装 node ，如果没有安装的话可以进入 node 官网 https://nodejs.org/zh-cn/ 进行安装，安装过程为傻瓜式安装，一路确认就可以了。

React 官方推荐我们使用 create-react-app 模块来搭建我们的 react 项目。在安装上 node 之后我们打开终端，运行

将 create-react-app 模块安装在我们本地电脑，然后在终端进入到自己平时做开发的一个目录，运行

即可搭建并开始我们的项目，其中 npx 的使用必须在 Node 版本 >= 6 ，npm 版本 >= 5.2 的情况下才可以使用。 我们也可以使用另一种方法，在终端输入

来安装 yarn 模块，然后就可以在自己常用的开发目录中运行

创建的项目默认端口为 3000，如果运行成功的话可以在浏览器中输入 http://localhost:3000 将项目跑起来。

我们接下来看一下我们创建的 react 项目的目录

node_modules 文件为我们所用到的一些node模块依赖文件，我们可以不用去管。

public 文件是一个公共文件，其中 index.html 为我们的入口文件，favicon.ico 为我们的网站的标识图标。mainfest.json 是允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中，详情可以参考：https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction ，这里我们可以不用去管它。

.gitignore 文件为我们使用 git 上传时忽略的文件，

package.json 为我们项目的配置文件，

readme.md 为项目的一些阅读说明文件，

yarn.lock 是我们的一些临时存储文件，

上述这些我们目前都不用去管，我们做开发最重要的 src 目录，接下来我们的开发主要实在 src 目录下完成的。

src 目录中 App.css 和 App.js 是我们的根组件，App.test.js 是一个测试文件，index.js 和 index.css 是我们的 js 入口文件，logo.svg 为一张图片，serviceWorker.js 是一个加快浏览器响应速度的文件。

我们可以看出 src 目录比较乱，里面的 js css 图片等都放在了一起，所以我们在做正式开发之前先将该目录进行一下整理。

components 用来放置我们所有的 react 组件。

static 用来存放我们所有的静态资源。如 js css img 等。我们将 src 目录下的 css 和 图片分别对应放到 static 的 css 和 img 目录下。

当然，当我们在将文件进行归类后运行项目会报错，所以我们还需要对这些静态资源的引用文件做一下修改。我们需要将 App.js 和 index.js 中的引用到的地方进行一下修改项目就可以继续运行了。

修改如下：

App.js

index.js

我们最后再来看一下浏览器的运行项目情况：

没问题，关于 react 的开发环境搭建就介绍到这里，在后续中我们将一起学习 react 项目的开发流程。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/47338.html