如何从零开始创建React项目（三种方式）

在开发React项目前最关键的当然是项目的创建，现在的前端工程化使得前端项目的创建也变得越来越复杂，在这里介绍三种从零开始创建React项目的方式，分别是在浏览器中直接引入、使用官方脚手架create-react-app、使用Webpack创建。

浏览器中通过标签直接引入

React框架有两个核心的包，分别是react以及react-dom,如何想直接在浏览器中使用React，那么把这两个包直接引入就可以了。

<!-- 引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

如果想要使用JSX语法，那么必须引入Babel。

<!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

接下来我会以一个完整的html示例来给大家展示，在刚开始学习React的时候可以使用这种方式。

首先创建一个index.html文件

<!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>
  
</body>
</html>

接下来引入相关的包

<!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>
  <!-- 引入react -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>

</body>

</html>

在body标签中创建Dom结构以及script标签，这里因为引入了babel,所以script标签的type必须是"text/babel"。

<!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>
  <!-- 引入react -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
    // 必须添加type="text/babel",否则不识别JSX语法
    </script>
</body>

</html>

然后在scirpt中写React代码

<!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>
  <!-- 引入react -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    // 必须添加type="text/babel",否则不识别JSX语法
    class App extends React.Component {
    render() {
      return(
        <div>
          <h1>Hello World</h1>
        </div>
      )
    }
  }
  ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>

最后在浏览器中打开index.html,页面上会渲染出Hello World。

使用官方脚手架creact-react-app

这种方式其实比较简单，官方已经替我们封装好了需要的库，我们只要直接使用就可以来。
使用脚手架也有两种方式。
第一种是官方网站教程给出的方式，使用npx命令

npx create-react-app <项目名>

我们用这条命令来创建一个my-app的项目

npx create-react-app my-app

创建完成后会在当前目录下出现一个my-app的文件夹，进入my-app目录，运行npm run start

cd my-app
npm run start

然后就可以在浏览器中看到默认的页面
项目创建完成的页面机构如下


create-react-app项目结构

这个结构还是比较清晰的，稍微有前端开发经验的程序员应该都可以看懂，初学者可以直接在App.js中写React代码。

接下来介绍第二种使用脚手架的方式，其实相差不大，这是方式是使用npm命令，和vue-cli非常类似。
首先通过npm全局安装create-react-app

npm install -g create-react-app

mac用户如果安装不成功可以加上sudo命令

sudo npm install -g create-react-app

然后使用create-react-app命令来创建项目

create-react-app <项目名>

创建my-app项目

create-react-app my-app

创建出的项目和第一种方式创建的项目一致。

使用webpack、babel、react来创建React项目

初始化项目

首先第一步我们先创建一个名字是my-app的文件夹

mkdir my-app

进入该目录

cd my-app

然后在my-app目录下创建src文件夹用来存放React代码

mkdir src

使用npm命令初始化项目

npm init -y

此时的项目结构如下


项目结构

安装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等。

安装Babel

进行前端工程化的时候大多数前端工程师都会用到babel,最开始的babel是用来把es6的代码编译成es5的代码，让前端开发者在使用新的特性的同时不必考虑浏览器兼容问题。虽然现在的主流浏览器已经支持大部分的es6的新特性，但是因为JavaScript每年都会有一些新的特性被提出，而浏览器不一定能在特性推出后及时实现，或者是有一些还在实验中的语法。使用来babel后就可以忽略这些问题，可以放心使用新的JavaScript语法，甚至是实验性的语法。

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

  • @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

在安装成功后必须进行babel的配置，在根目录my-app建立.babelrc文件，然后写入以下配置

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

然后我们需要做一些webpack的配置，在根目录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: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

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


项目结构

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

处理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-dev-server用来启动一个本地服务器来浏览我们的项目并且可以实现保存自动刷新

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

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

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

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

npm run start

总结

这篇文章介绍了三种创建React的方式，一般来说使用官方的脚手架比较方便，自己用webpack配置的话则更加灵活，根据项目的不同需要选择不同的方式。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335