初识Reactjs的项目结构与思想

最新推荐文章于 2023-02-13 16:42:26 发布

Mnioc

最新推荐文章于 2023-02-13 16:42:26 发布

阅读量341

点赞数

分类专栏：记录学习入门文章标签： javascript reactjs

本文链接：https://blog.csdn.net/Mnioc/article/details/105294523

版权

记录同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

学习

18 篇文章 0 订阅

订阅专栏

入门

16 篇文章 0 订阅

订阅专栏

前言

一个月之前，学完了html、css、html5、css3。接下来，准备入坑传说中的前端框架，首先明白一个东西，什么是框架？框架顾名思义，是别人集成好的一系列技术，那么基于框架的开发，其实也就是在别人的东西上面进行二次开发。那么通过本篇博客，来认识认识比较主流的Reactjs框架，属于新手小白入门级别的文章，技术大牛可以略过，当然如果有幸能指点一二，本人也是非常感激！如有错漏，还请各位看到的大佬们指出错误的观点。

Reactjs官方

什么？上来就啃官方文档？
怎么看呢？嗯。。。。
首先我得知道它是干什么的？
它能产生什么样的效果？
官方大哥，上来就给我来做个游戏项目，零基础的我吃不消啊。
那就先舍弃实战教程，看看知识文档吧？
在这里插入图片描述
用于构建用户界面的JavaScript库！
啥意思？javascript代码库？构建用户UI界面？
如果我没理解错的话，就是通过js代码的方式创建html 元素？
回归第一个问题，毕竟是前端框架，所以，它肯定是用来做前端页面的？那跟传统的方式有什么不一样呢？拿官方demo来分析分析。

在这里插入图片描述

1 .传统方式：我们在html文档中定义各种标签元素，比如什么div、a、img、button等等。就是一个传统的静态html文档。

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
	<img src="logo512.png" height=200px width=200px>
	<p> Edit src/App.js and save to reload.</p>
	<a href="#">learn Reactjs</a>
	</div>
	
 </body>

2 .Reactjs：手写html文档？不，我们不这么做了，我们先申明一个空白的html文档，什么元素都不写，你自己画去吧，然后我们就能在这个空白文档中发挥我们的创造力，通过js语法来不断生成各种标签

瞧一瞧源代码：

/* index.html */
  <body>
    <noscript>You need to enable JavaScript to run this app</noscript>
    <div id="root"></div>
   </body>

没错，他果然没在html里面写标签，那在哪里写的呢？继续看看源代码

/* index.js */
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App？啥玩意？

/* index.js */
import App from './App';

发现 index.js中导入了App，再去App中看一看

在这里插入图片描述
果然，在这里找到了页面上该有的东西。

好了，具体语法暂且不论，捋一捋它的一个设计思想。

index.html 主文件，创建一个空白的文档，提供一个root节点
index.js 入口文件？负责在空白文档中画画。
app.js 暂且推测这是一个应用，一个大型项目应该有多个应用。

到这里其实还是不太明白，它高深的设计思想。那我不如回到实际一点，来看看它是怎么完成一个项目的。毕竟学这东西就是为了完成项目开发。

初识React项目

通过官方给出的安装教程，以及配合各位大佬的教程，终于完成环境的配置。
在这之前或许先得对nodejs、npm、webpack等有一定了解。
在进行下面安装步骤前，需要先安装nodejs环境，nodejs会默认安装npm工具。

1、安装react脚手架

npm install -g create-react-app

2、创建react项目

create-react-app myreactapp

3、进入项目目录

cd myreactapp

4、启动项目

npm start

接下来就能看到它自己在你的默认浏览器上打开http://localhost:3000/
在这里插入图片描述

看看项目结构

在这里插入图片描述

1、`README.md`

这个文件数说明文件，主要是一些项目的描述性信息

2、`package.json`

依赖包的配置文件，这里面声明的包会通过npm下载到node_modules中

3、 `.gitignore`

这个文件时git版本管制忽略的配置文件

4、`package-lock.json`

根据官方文档，这个package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

5 、`node_modules`

用于存放第三方依赖模块，这里面包含了react项目中会用到的一些组件，install的时候下载下来的

6、`public`

在这里插入图片描述

（1） `index.html`

是react项目的入口页面，也就是当你打开运行这个项目的时候，浏览器给你返回的那个页面。

（2）`manifest.json`

当web页面被用于Android主页面使用时的配置文件

（3）其他

存放一些公共的静态文件，比如图片等。

7 `src`

这个文件就是我们需要去改动的地方，也就是开发文件夹，主要存放我们的各种开发文件。src目录是我们保存源代码的地方。里面包含了一些我们自己使用的js文件，css文件，img文件等等
在这里插入图片描述

（1） `index.js`

index.js 是项目的入口js文件，系统默认将index.html对准了index.js，通过webpack将两者关联。

（2）`App.js`

它一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。

通过index.js引入，然后将其渲染到index.html中

（3）`css`

一些样式文件

（4）其他

暂时不关注！

流程

捋一捋React的流程：

1、项目运行，系统默认打开index.html
2、index.html 引入 index.js文件
3、index.js 引入各种各样的组件，每个组件有自己的结构、样式、逻辑。
4、各种组件通过index.js渲染到空白的index.html中
5、我们就能看到一个五彩斑斓的网页了

到这里以后，我感觉雨停了、天晴了、我又行了！！！
有了阅读官方文档的自信了，当然这只是一个最原始，最基础的项目，不断学习，不断完善，不断扩充项目结构。以后遇到的时候会进行记录，直到能完成一个完整的企业级项目结构。

下一篇将会对官方文档进行学习和记录。

Mnioc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Reactjs的项目结构与思想

前言一个月之前，学完了html、css、html5、css3。接下来，准备入坑传说中的前端框架，首先明白一个东西，什么是框架？框架顾名思义，是别人集成好的一系列技术，那么基于框架的开发，其实也就是在别人的东西上面进行二次开发。那么通过本篇博客，来认识认识比较主流的Reactjs框架，属于新手小白入门级别的文章，技术大牛可以略过，当然如果有幸能指点一二，本人也是非常感激！如有错漏，还请各位看到的大...
复制链接

扫一扫