如何创建一个React项目

甜甜小狮子
1,734 阅读4分钟

前言：今天来从零开始创建一个react项目，顺便也深入了解一下webpack，package等项目配

置方面的知识~

1.初始化项目

首先我们新建一个文件夹用来存放项目文件，可以在该文件中新建src文件用来存放React代码，然后执行npm init -y，在文件根目录中即会生成一个package.json文件。

此时package文件内容如下：

{  "name": "example",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

这里讲一下我们项目中的package.json文件一集package-lock.json文件

（1）package.json

 package.json 是用于描述我们创建的nodejs项目的描述性文件，定义了这个项目需要的各种模块及项目的配置信息，我们运行npm install是即是根据这个配置文件来下载所需要的模块，可以手动编写，也可以使用npm init命令生成。其中的属性包括

  • name - 包名；
  • version - 包的版本号；
  • description - 包的描述；
  • homepage - 包的官网URL；
  • author - 包的作者，它的值是你在 npmjs.org 网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan zhangsan@163.com；
  • contributors - 包的其他贡献者；
  • dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下；
  • repository - 包代码的 Repo 信息，包括 type 和 URL，type 可以是 git 或 svn，URL 则是包的 Repo 地址；
  • main - main 字段指定了程序的主入口文件，这个字段的默认值是模块根目录下面的 index.js；
  • keywords - 关键字

（2）package-lock.json

我们在项目中还会有这样一个文件，这是在我们npm install命令后生成的一个文件，用以记录当前状态下实际安装的各个 npm package 的具体来源和版本号。package-lock.json 文件的作用锁定安装时的包的版本号，并且需要上传到 git，以保证其他人在 npm install 时大家的依赖能保证一致。

package.json 文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，npm install 都是拉取的该大版本下的最新的版本，比如package.json中指定的版本号为^1.1.1，npm install只能锁定1.x.x的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以 package-lock.json 文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。

2.安装webpack

首先安装webpack和webpack-cli,webpack-cli包含了webpack的众多指令，所以需要安装

npm install webpack webpack-cli --save-dev
注意： 在这里简单介绍一下npm install命令的参数 --save-dev 和 --save的区别，一般来说使用--save-dev参数安装的npm包在最终打包的时候不会被包括到源码里去，所以类似bebel和webpack这种进行项目工程构建或者代码编译的库应该用--save-dev来安装，而--save则是安装代码运行必须的库，比如react等。

3.安装Babel

babel是一个转译器，用来把同种语言的高版本规则翻译成低版本规则，让前端开发者在使用新的特性的同时不必考虑浏览器兼容问题。

接下来我们会安装这几个包：

  • @babel/core
  • @babel/preset-env
  • @babel/preset-react
  • babel-loader
    很明显@babel/core是babel的核心库，必须安装，@babel/preset-env帮助我们把es6的语法编译成es5的语法，@babel/preset-react则是帮我们识别JSX语法，babel-loader则是帮我们把不同的文件转化成我们想要的格式输出，或者说就是将我们的经过babel处理后的代码进行输出成浏览器可以识别的文件。
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

3.babel及webpack配置

在根目录my-app建立.babelrc文件，然后写入以下配置

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

在根目录my-app建立webpack.config.js文件，然后写入以下配置

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.jsx|.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

在babel配置完之后，我们需要在./src目录下新建三个文件index.html、main.js、App.js,此时我们的项目的所有文件都创建完毕，项目结构应该如下所示：

4.处理html

接下来因为webpack默认只能对.js文件进行最终打包，而我们的项目是有.html文件的，所以我们必须下载和html有关的loader和插件来对html进行处理。

安装html-webpack-plugin和html-loader

npm install html-webpack-plugin html-loader --save-dev

在安装完成之后我们需要在webpack.config.js中进行配置
webpack.config.js文件内容如下

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      titel: 'react app',
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
};

配置完成后我们开始写react代码，首先在index.html文件中写入以下代码(在一个基本.html页面中加一个id是app的div)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

然后在写react代码前需要安装react和react-dom

npm install react react-dom --save

在App.js文件中创建一个组件并导出

import React from 'react'

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export  default App

在main.js中将组件导入并渲染

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'

ReactDOM.render(<App/>, document.getElementById('app'))

我们在webpack中配置的入口文件即为这里的main.js文件

5.运行项目

所有的代码已经完毕，在运行前我们还要安装webpack-dev-server用来启动一个本地服务器来浏览我们的项目并且可以实现保存自动刷新

npm install webpack-dev-server --save-dev

然后在根目录的package.json中写一个脚本

"scripts": {
    "start": "webpack-dev-server --open --mode development"
}

最后运行npm run start就可以在浏览器中看到Hello World了

原文地址：如何从零开始创建React项目（三种方式） 作者：Harlan_Zhang www.jianshu.com/p/68e849768…

参考文献：

1.关于package.json和 package-lock.json文件说 作者：明月照大江  www.cnblogs.com/wyhcool/p/1…

avatar
文章
阅读
粉丝