前言
一个月之前,学完了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、我们就能看到一个五彩斑斓的网页了
到这里以后,我感觉雨停了、天晴了、我又行了!!!
有了阅读官方文档的自信了,当然这只是一个最原始,最基础的项目,不断学习,不断完善,不断扩充项目结构。以后遇到的时候会进行记录,直到能完成一个完整的企业级项目结构。
下一篇将会对官方文档进行学习和记录。