react框架的使用与配置

最新推荐文章于 2024-08-18 12:44:59 发布

嗣罪

最新推荐文章于 2024-08-18 12:44:59 发布

阅读量656

点赞数

本文链接：https://blog.csdn.net/A1371357219/article/details/106406859

版权

------------最近在学习react框架，特此记录一下我在开发前期的准备工作。

一、安装好node环境

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

直接安装流程安装完之后就有了npm（不明白概念的可以转到https://www.runoob.com/nodejs/nodejs-npm.html了解一下）

可以在命令行查看是否安装成功。

（记得修改源）npm config set registry https://registry.npm.taobao.org

二、开始安装react

1.直接安装react脚手架create-react-app

Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。

react脚手架的优点：

无需配置
集成了对 React, JSX, ES6 和 Flow 的支持
集成了开发服务器

（1）为了方便管理，先创建一个文件夹

mkdir （你的文件夹名称）

（2）全局安装react脚手架

npm install -g create-react-app

(3)创建react项目

create-react-app (你的app名称)

等进度条加载完之后可以发现文件夹中出现了一些目录。

根据提示，跳转到myapp路径下启动服务。

之后会自动弹出一个网页，同时命令行中会出现你的本地服务器ip

出现这个就说明脚手架安装完毕了。默认地址为http://localhost:3000/

再来看一下目录。 index是默认入口，app是默认组件。

为了完成我们的第一个组件，我们把index.js 的内容清空，给index.html加个id为root的div。

开始index.js的编写，完成我们的第一个组件。（jsx）

import React from 'react';  //创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom'; //把创建好的组件和虚拟DOM放到页面上展示的


class Mycomponent extends React.Component{
	
	render(){
		return (
			<div>
			   <h2>这是我的第一个组件</h2>
			</div>
		)
	}
}

ReactDOM.render(
    <Mycomponent />,
  document.getElementById('root')
);

如此，react脚手架的第一个项目就构建成功了。接下来就是打包成提交到服务器的文件。

cmd终端按ctrl+C停止当前操作，执行命令

npm run build

打包成生产版

执行完毕后它会在我们的目录下生产一个build文件夹，生产下需要的代码就放在那里

直接运行index.html，你会发现

找不到路径！

实际上脚手架已经在命令行中告诉我们答案了，我们再回去看一下终端中的提示。

该项目是假定托管在根目录的，也就是说，index.html里面的src地址指向是将自己当成根目录来写的。

因此，我们可以将index.html的所有需要引用的地址改成绝对路径

示例：C:/myreact/myapp/build/static/js/2.902fc05f.chunk.js

或者全部改为相对路径

示例：./static/js/2.902fc05f.chunk.js

之后你就可以随意将文件部署了。

2.不使用react脚手架，手动配置

首先npm init 生产package.json文件，如果只是测试的话一路回车就行了。

然后运行命令 npm i react react-dom -S

其中fristsrc和src以及index.html是我另外新建的。fristsrc用来放未转化的jsx代码，src放经过babel转化的代码。

<!DOCTYPE html>
<html>
<head>
	<title>react App</title>
</head>
<body>
	<div id="root"></div>
</body>
<script type="text/javascript" src="./fristsrc/index.js"></script>
</html>

index.html如上

import React from 'react';  //创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom'; //把创建好的组件和虚拟DOM放到页面上展示的


class Mycomponent extends React.Component{
	
	render(){
		return (
			<div>
			   <h2>这是我的第一个组件</h2>
			</div>
		)
	}
}

ReactDOM.render(
    <Mycomponent />,
  document.getElementById('root')
);

firstsrc>index.js如上

我们先试着运行一下。

浏览器不识别es6的import

于是我们安装babel将其转化成es5

执行命令npm install --save-dev babel-cli

可以看到babel-cli已经安装成功

创建配置文件 .babelrc

type nul>.babelrc

配置文件我们先不去管它，因为转译器还没安装

npm install  --save-dev babel-preset-env

为了不用转到node_modules的.bin目录执行命令

可以在package.json配置任务

"scripts": {
    "build": "babel fristsrc -d src"
  },

接着到配置文件.babelrc 添加

{
    "presets":["env"]
}

在命令行输入命令npm run build

报错，无法转译jsx语法。因为env只能转译es6

# ES2015转码规则
 npm install --save-dev babel-preset-es2015
 
# react转码规则
 npm install --save-dev babel-preset-react
 
# ES7不同阶段语法提案的转码规则（共有4个阶段）暂时不需要
 npm install --save-dev babel-preset-stage-0
 npm install --save-dev babel-preset-stage-1
 npm install --save-dev babel-preset-stage-2
 npm install --save-dev babel-preset-stage-3

选装第一条和第二条

在配置文件 .babelrc 添加相应规则

{
    "presets":["env","es2015","react"]
}

再次运行命令转译npm run build

成功了！

在index.html中修改脚本地址src/index.js运行到浏览器

产生这个问题的原因

Babel 的作用是帮助我们转换 ES6 代码为 ES5, 但是它没有模块管理的功能，因而它把模块化es6的方法转化成require和exports的commonJs形式，浏览器端无法识别 CommonJs 规范。

怎么解决呢？既然Babel没有模块管理的功能，那再换一个有模块化功能的打包工具不就行了。

常用的打包工具包括 browserify webpack rollup 等

在这里我用webpack打包

全局安装webpack

npm install -g webpack

局部安装webpack

npm install --save-dev webpack

全局安装webpack-cli

npm install -g webpack-cli

由于webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。

可以看到dist目录以及出现了，我们将index.html的脚本定位到dist>main.js

大公告成！

------------------补充

webpack的webpack.config.js配置文件

可以在根目录新建一个名为webpack.config.js

更改打包的路径

例如

module.exports = {
  mode: "development",
  entry: __dirname + "/src/index.js",   //入口
  output: {                        //出口
    filename: "index.js",
    path: __dirname + "/cs"
  }
}

注意：__dirname 总是指向当前被执行js 文件的绝对路径。如：a/b/webpack.config.js指向的是a/b