创建 react 项目很简单, 使用脚手架只需要一条命令即可, 那么你会手动创建一个 react 项目吗, 本篇文章将向你展示手动搭建 react 项目的过程, 希望对各位有帮助!
具体步骤如下:
1, 使用 NPM init 命令生成 package.JSON 文件
2, 安装需要的依赖
- NPM install --save react (安装 React)
- NPM install --save react-dom (安装 React Dom)
- NPM install --save-dev webpack (安装 webpack, 打包工具)
- NPM install --save-dev webpack-cli (使用 webpack 4+ 版本, 还需要安装 webpack-cli)
- (安装 webpack-dev-server, 一个小型 express 服务器, 主要特性是支持热加载)
- NPM install --save-dev webpack-dev-server
- (webpack 需要两个额外的组件来处理 html:HTML-webpack-plugin 和 HTML-loader)
- NPM install --save-dev HTML-webpack-plugin HTML-loader
3, 安装过 webpack 后需要修改 package.JSON 文件的内容
- "scripts": {
- "start": "webpack-dev-server --open --mode development",
- "build": "webpack --mode production"
- },
4, 新建一个 webpack.config.JS 文件, 写入以下内容
- const HtmlWebPackPlugin = require("html-webpack-plugin");
- module.exports = {
- module: {
- rules: [
- {
- test: /\.(JS|jsx)$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- },
- {
- test: /\.HTML$/,
- use: [
- {
- loader: "html-loader"
- }
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebPackPlugin({
- template: "./index.html",
- filename: "./index.html"
- })
- ]
- };
5, 安装 babel,babel 是一个广泛使用的转码器, 可以将 ES6 代码转为 ES5 代码, 从而在现有环境执行.
NPM install --save-dev @babel/core
(webpack 并不知道如何将 ES6 语法转换为 ES5, 不过 webpack 可以使用 loader 来完成.
即 webpack 加载器将一些东西作为输入, 并将其转换为其他东西输出.)
- NPM install --save-dev babel-loader
- NPM install --save-dev @babel/preset-env (将 ES6 语法转码为 ES5)
- NPM install --save-dev @babel/preset-react (将 JSX 语法转化为 JavaScript)
新建一个配置文件. babelrc 写入以下内容
- {
- "presets": [
- "@babel/preset-env",
- "@babel/preset-react"
- ]
- }
环境基本已经配置完成.
接下来编写 react 组件
6, 在根目录下新建一个 index.HTML 写入以下内容
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- new react project
- </title>
- </head>
- <body>
- <div id="app">
- </div>
- </body>
- </HTML>
7, 新建一个 src 文件夹, 在 src 文件夹下新建一个 index.JS 写入以下内容
- import React from 'react';
- import ReactDom from 'react-dom';
- class App extends React.Component {
- render() {
- return (
- <h1>
- Hello World !
- </h1>
- )
- }
- }
- ReactDom.render(
- <App />,
- document.getElementById('app')
- );
8, 运行 NPM start 即可在浏览器访问页面.
9, 运行 NPM run build 时, 会出现一个 dist 文件夹, 文件夹中包含有一个 HTML 和一个 JS 文件, 是打包后的文件.
来源: http://www.css88.com/qa/react/16008.html