React快速入门

最新推荐文章于 2025-04-16 11:40:00 发布

atopx

最新推荐文章于 2025-04-16 11:40:00 发布

阅读量218

点赞数

分类专栏：前端技术 JavaScript 文章标签： React 前端 web

本文链接：https://blog.youkuaiyun.com/qq_43125439/article/details/87008722

版权

前端技术同时被 2 个专栏收录

7 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

什么是前端开发?

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

常见的前端框架

react (facebook), react-native
vue (阿里)
AngularJS (早期)

NodeJS

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

实验流程

基本项目结构

在项目目录下执行npm init -y, 创建dist, src文件夹, 创建webpack.config.js

H5Blog/			// 项目根目录
├── dist		// 编译后的代码
├── package.json	// 配置文件
├── webpack.config.js	// webpack的配置文件
└── src				// 源码目录
    ├── index.html
    └── index.js

什么是SPA?

SPA: 单页面应用程序

初始化react基本运行环境

npm i react --save
npm i react-dom --save
sudo npm i webpack -g		# 全局
sudo npm i webpack-cli -g	# 全局
sudo npm i webpack-dev-server -g	# 全局
npm i webpack --save-dev	# 
npm i webpack-cli --save-dev
npm i webpack-dev-server --save-dev

开发

index.html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>first react app</title>
</head>
<body>
	<div id="app"></div>
	<div id="app2"></div>
	<div id="app3"></div>
    <div id="app4"></div>
</body>
	
</html>

index.js

console.log("ok")

编译/打包 & 启动

webpack		# 编译代码
webpack-dev-server	# 启动开发(测试)服务器

webpack 4.x版本以后, 默认查找 src/index.html作为打包程序入口

使用热部署开发程序

安装相关插件:
```
npm -i html-webpack-plugin --save-dev
```

修改webpack配置文件webpack.config.js

let path = require('path');     // 引入requireJS规范

// 创建html-webpack-plugin插件对象
let HtmlWebpackPlugin = require('html-webpack-plugin'); 

// 初始化html-webpack-plugin插件
let htmlPlugin = new HtmlWebpackPlugin({
    template:path.join(__dirname, './src/index.html'),  // 指定模板路径
    filename: 'index.html', // 访问的文件名
});

module.exports = {
    mode: 'development',    // 编译时使用开发者模式
    plugins: [      // 安装插件对象
        htmlPlugin
    ]
}

requireJS、commonJS是JavaScript下的两个包管理规范

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

import React from 'react'
import ReactDom from 'react-dom'

let react = React.createElement;    // 简写赋值
let render = ReactDom.render;   // 简写赋值

// 创建一个h1标签
let myh1 = react('h1', null, 'my first react app');

// div嵌套h1标签
let mydiv = react('div', null, myh1);

// 渲染到页面
render(mydiv, document.getElementById('app'))

DOM: 文档对象模型(Document Object Model)

react在内存中生成一颗DOM树基于diff算法对DOM树的增删改查进行监控

使项目支持JSX语法

安装基本babel插件依赖

npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env bab-preset-react babel-preset-stage-0 --save-dev
# @7.1.5 指定插件版本号

加载babel插件依赖

在项目根目录创建babel配置文件.babelrc, 并添加一下内容

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-runtime",
    ]
}

在webpack.config.js中的module.exports中加入module模块, 用来处理jsx的语法文件

// 加载插件
module.exports = {
    mode: 'development',    // 指定开发者模式
    plugins: [      // 安装插件对象
        htmlPlugin
    ],
    // 以下为新加的module模块
    module: {
        rules: [
            {test: /\.js|jsx/, use:'babel-loader', exclude: /nodel_modules/}
        ]
    }
}

在index.js里面添加一个function定义的组件, 并渲染至前端页面
```
// jsx: 定义组件
function MyList(props) {
    return <div><li>李白</li><li>白居易</li><li>杜甫</li></div>
}

// 使用组件, 渲染至页面
render(<MyList></MyList>, document.getElementById('app2'))
```
1. 定义组件中的return中直接写html代码写法就是jsx语法, 该语法会被babel-loader自动解释成react.createElement的形式.
2. React组件可以像内置html标签一样使用

使用组件接受参数:

// jsx: 定义组件(传参数)
let poems = {libai:'李白', dufu:'杜甫', baijuyi:'白居易'}

function MyList(props) {
    // 大括号内是变量, 使用 props.键 方式取值
    return <div><li>{props.libai}</li><li>{props.baijuyi}</li><li>{props.dufu}</li></div>
}

// 使用组件, 渲染至页面  {...poems}: 展开运算符, 进行参数传递
render(<MyList {...poems}></MyList>, document.getElementById('app2'))

展开运算符相当于<MyList libai='李白' dufu='杜甫' baijuyi='白居易'></MyList>

修改服务器打包和启动命令:

修改package.json中 scripts 内新增如下:
```
"start":"webpack && webpack-dev-server --port 8080 --compress"
```
此时启动Server可以直接使用npm start

创建独立的组件(基于Class)

在src中创建components文件夹
在components文件夹创建MyListClass.jsx

在MyListClass.jsx文件写入代码

import React from 'react'

// 类, extentds 继承
class MyListClass extends React.Component {
    constructor() {     // 构造方法
        super()		// 调用父类构造
    }

    render(){       // 渲染
        return <div>
                <li>{this.props.libai}</li>
                <li>{this.props.baijuyi}</li>
                <li>{this.props.dufu}</li>
            </div>
    }

}

export default MyListClass; // 导出

在index.js文件中增加:

import MyListClass from './components/MyListClass.jsx'		// 导入组件方式一
// 定义组件的参数
let poems = {libai:'李白', dufu:'杜甫', baijuyi:'白居易'}
// 调用组件, 渲染至页面
render(<MyListClass {...poems}></MyListClass>, document.getElementById('app4'))

另一种导入组件方式:

在webpack.config.js文件中module.exports中新增:

module.exports = {
    ...
	resolve: {
        extensions: ['.js', '.jsx', '.json'],
        alias: {
        '@': path.join(__dirname, './src/')
        }
    }
}

修改index.js中导入组件的方式为:

import MyList4 from '@/components/MyListClass'

......