前言

一个月之前，学完了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中看一看

果然，在这里找到了页面上该有的东西。

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

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

初识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、我们就能看到一个五彩斑斓的网页了

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

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

初识Reactjs的项目结构与思想相关推荐

Django框架学习——1—(虚拟环境搭建、MVC思想与Django的MVT区别、Django项目的创建、运行Django项目、项目结构介绍)
1.虚拟环境搭建创建新的Django框架的虚拟环境: 注意:如果没有pipenv指令,需要安装这个支持库,同时需要记住配置它的环境变量,否则虚拟环境会安装在默认文件夹下(一般是C:\Users\Ad ...
boot sprint 项目结构_京淘项目03 08.28
JSP动态web资源,打war包 ##spring boot整合JSP 创建项目 spring SpringBoot整合web资源,, 在main文件下,新建webapp文件夹,,把WEBINF目录粘 ...
openjdk8 项目结构_OpenJDK织机和结构化并发
openjdk8 项目结构 Project Loom是Hotspot Group赞助的项目之一,旨在向JAVA世界提供高吞吐量和轻量级的并发模型. 在撰写本文时,Loom项目仍在积极开发中,其API可 ...
认识ASP.NET 5项目结构和项目文件xproj
ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...
Thingsboard 2.5 CE版本项目结构说明
Thingsboard 2.5 CE版本项目结构说明目录第一章项目框架整理说明第二章 thingsboard涉及到的流程图第三章项目框架涉及到的第三方包或插件第四章 ThingsBoar ...
Java Web项目结构
Java Web项目结构(一般) 1.Java src 2.JRE System Library 3.Java EE 6 Libraries 4.Web App Libraries 5.WebRoot ...
iOS SwiftUI篇-1 项目结构
iOS SwiftUI篇-1 项目结构介绍Xcode新建的SwiftUI模版项目结构.跟普通Storyboard模版项目的差异.SwiftUI项目的app启动流程.UIScene概念介绍.AppDe ...
Android 项目结构说明
Android 项目结构说明创建Android项目后,期目录结构如图下面对图中的包和文件进行说明. 1.scr包在scr包中,保存的是应用程序的源代码,如Java文件和AIDL文件. 2.g ...
【转载】C#编码标准━━项目设置和项目结构
1．总是在4级警高上建立你的项目. 2．在发布版(Release)中,把警告当成错误来对待(注意这并不是 Visual Studio的默认选项).我们建议在调试版(Debug)中也这样设置,尽管这不是 ...

初识Reactjs的项目结构与思想

前言

Reactjs官方

初识React项目

1、安装react脚手架

2、创建react项目

3、进入项目目录

4、启动项目

看看项目结构

1、`README.md`

2、`package.json`

3、 `.gitignore`

4、`package-lock.json`

5 、`node_modules`

6、`public`

（1） `index.html`

（2）`manifest.json`

（3）其他

7 `src`

（1） `index.js`

（2）`App.js`

（3）`css`

（4）其他

流程

初识Reactjs的项目结构与思想相关推荐

最新文章

热门文章

初识Reactjs的项目结构与思想

前言

Reactjs官方

初识React项目

1、安装react脚手架

2、创建react项目

3、进入项目目录

4、 启动项目

看看项目结构

1、README.md

2、package.json

3、 .gitignore

4、package-lock.json

5 、node_modules

6、public

（1） index.html

（2）manifest.json

（3）其他

7 src

（1） index.js

（2）App.js

（3）css

（4）其他

流程

初识Reactjs的项目结构与思想相关推荐

最新文章

热门文章

4、启动项目

1、`README.md`

2、`package.json`

3、 `.gitignore`

4、`package-lock.json`

5 、`node_modules`

6、`public`

（1） `index.html`

（2）`manifest.json`

7 `src`

（1） `index.js`

（2）`App.js`

（3）`css`