React入门简单练习

利用react开发一个简单的博客系统，
首先我们简单的了解一下react的简单实用
博客的功能

信息发布系统

1. 登录管理
2. 博客发布
3. 后台管理
4. 权限管理

什么是前端开发?

将页面显示和业务逻辑独立，使用组件开发,解决传统页面代码混合html显示及js业务代码的弊端

常见的框架:

1. react(facebook,react-native)
2. vue
3. AngularJS

nodejs的出现使JS代码的开发脱离了浏览器并且提供了统一的构建环境及包管理工具

实验流程

基本项目结构

1. 使用vscode打开相应文件夹(file->open)
2. 打开terminal->new terminal 执行 npm init -y,生成package json
3. 创建dist 及 src目录
4. 在src目录下创建index.html和index.js

什么是SPA?(单页面应用程序)

初始化环境

1. npm i react --save
2. npm i react-dom --save
3. npm i webpack -g 安装到全局作用域
4. npm i webpack-cli -g 安装到全局作用域
5. npm i webpack-dev-server --save-dev
6. npm i webpack --save-dev
7. npm i webpack-cli --save-dev
8. 在项目根目录创建webpack.config.js(webpack的配置文件)

开始开发

1. 在index.html添加相应代码
   
   
   
   
   
   
   
   

   
   

   </html>
   

   1. 在index.js添加相应代码:
      console.log(“ok”)

   2. 执行webpack进行打包编译

   3. 执行webpack-dev-server,启动测试服务器
      (
      如果出现webpack-dev-server无法找到使用
      npm i webpack-dev-server -g
      进行全局安装
      )
      注意事项:webpack 4.x以后，默认查找scr/index.js作为打包入口

如何在开发中热部署程序(修改后立即生效)

1. npm i html-webpack-plugin --save-dev
2. 在webpack.config.js中添加下述代码选择开发模式

 	module.exports = {
    mode:'development',
	}

备注:CommonJS、RequireJS是JS下的两个包管理规范

1. 初始化html-webpack-plugin，添加如下代码到webpack.config.js最开始部分

    	 let path = require('path')
    	//创建htmlPlugin对象
    	let HtmlWebpackPlugin = require('html-webpack-plugin')
    	
    let htmlPlugin = new HtmlWebpackPlugin({
    	    template:path.join(__dirname,'./src/index.html'),//指明模版位置
    	    filename:'index.html'//访问的文件名
    	})
   

5.在module.exports中加载插件

```

 	module.exports = {
    mode:'development',
    plugins:[
        htmlPlugin
    ]
	}

```

基本的react页面生成,在index.js里添加如下代码