React应用入门（一）搭建最简单的基本应用

最新推荐文章于 2024-05-20 15:17:08 发布

JackSparrow414

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量673

点赞数

分类专栏：前端（JavaScript+ES+Recat+Vue）文章标签： react.js 前端 reactjs webpack node.js

本文链接：https://blog.csdn.net/dghkgjlh/article/details/122442302

版权

前端（JavaScript+ES+Recat+Vue）专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React应用入门（一）搭建最简单的基本应用

开发环境配置

nvm

nvm 的意思是Node Version Manager,即管理nodejs的工具.

强烈建议：使用nvm管理nodejs的版本,这样可以在本机安装多个版本的nodejs，并可以方便的进行切换

安装

brew install nvm

检查是否安装成功

nvm -v

查看具体帮助

nvm help

npm

npm的意思是Node Package Manager，是一个管理JavaScript包的工具。后端的同学可以简单理解为Maven，但是它要比Maven的功能弱一些，Maven还提供打包功能

安装

通过nvm进行安装，安装最新的LTS(Long Term Support-长期支持)版本的nodejs

nvm install --lts

上述命令可以通过以下命令找到

nvm help

检查是否安装成功

node -v
npm -v

WebStrom

开发工具选择WebStrom

搭建应用

初始化应用

创建应用根目录并初始化Git仓库
```
mkdir badminton-community
git init
```

创建.gitignore文件，内容如下

vim .gitignore

node_modules
dist
*.iml
*.xml
.idea/

在应用根目录下通过npm init初始化项目
```
npm init
```
根据提示填写即可，如果不知道填什么，也可以一路回车下来.

完成之后，会发现应用根目录下多了一个package.json的文件
在根目录中创建public 和 src文件夹
```
mkdir public
mkdir src
```
public文件夹内放置静态资源文件，还有index.html文件，React会用这个页面渲染我们的程序。

src文件夹放置我们开发React应用时自己写的代码

在public文件夹中创建index.html,内容如下

cd public
vim index.html

<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>React Starter</title>
</head>

<body>
  <div id="root"></div>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <script src="../dist/bundle.js"></script>
</body>

</html>

bundle.js是我们利用Webpack打包之后的文件名字

配置Babel

Babel是一个编译器。主要的作用是：它能让你编写的新版本 JavaScript 代码，在旧版浏览器中依然能够工作

为当前项目安装Babel

在项目根目录下执行

npm install @babel/core @babel/cli @babel/preset-env babel-preset-react --save-dev

preset-react是将React的JSX转为能在旧版浏览器中运行的JavaScript代码

–save-dev的意思是作为开发时的依赖，如果不加–save-dev意思是运行时所需要的依赖

npm install官方文档

添加Babel配置文件

根据Babel官方文档配置这一节内容，官方建议Babel的配置文件名字为babel.config.json

vim babel.config.json

内容如下

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

其他更详细的内容参考完整的Babel官方文档

配置Webpack

Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具，后端的同学可以简单理解为它是Maven中打包插件的实现
在这里插入图片描述

对Webpack不熟悉的同学，可以进入官网，在这几个tab下进行切换，可以快速找到自己需要的内容

为当前项目安装Webpack

npm install webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader html-webpack-plugin --save-dev

webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能

添加Webpack配置文件

配置文件的名字webpack.config.js

vim webpack.config.js

内容如下

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    server: 'http',
    port: 3000,
    host: "local-ipv4",
    hot: true,
    open: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ]
};

关于配置文件中每个选项的含义以及其使用方法，可以在上面那张图标红的tab那里寻找，例如devServer在tab配置下，plugins在tabPlugin下，style-loader等在tabLoader下。都可以找到对应的用法，这里不做过多解释

书写React代码

安装React

在项目根目录下执行

npm install react react-dom react-hot-loader

在src文件夹下创建index.js

vim index.js

内容如下

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

这几行的代码表示我们的React应用应该挂载在哪个DOM节点下，是挂载在我们刚才创建的index.html的id为root的DOM节点下。

ReactDOM.render 是一个函数，它告诉 React 要渲染什么以及在哪里渲染它——在这种情况下，我们正在渲染一个名为 App 的组件，它在 ID 为root的 DOM 节点处渲染

在src文件夹下创建App.js

vim App.js

内容如下

import React, { Component} from "react";
import { hot } from "react-hot-loader";
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App">
        <h1> Hello, World! </h1>
      </div>
    );
  }
}

export default hot(module)(App);

这里使用了react-hot-loader，在修改代码的时候，自动重新编译

在src文件夹下创建App.css

vim App.css

内容如下

.App {
  margin: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

启动

以上代码书写完毕，我们就完成了一个最基本的应用。现在利用webpack-dev-server来进行启动和部署

在package.json的scripts中添加如下内容

"start": "webpack-dev-server --mode development",

运行

npm run start

启动成功之后浏览器会自动打开
在这里插入图片描述

打包

需要在webpack.config.js中配置html-webpack-plugin，在上面我们都已经配置过了。所以这里添加一条命令即可

在package.json的scripts中添加如下内容

"build": "webpack --mode development",

运行

npm run build

会发现项目根目录下多了dist文件夹，文件夹内有index.html和bundle.js

项目结构

在这里插入图片描述

项目仓库地址

仓库地址

拓展

如果你有以下疑问想问我：

bundle.js和index.html怎么一起工作的，很神奇啊?
为什么webpack打包之后的bundle.js可以运行在浏览器中？
package.json 和 package-lock.json的区别？/ package-lock.json的作用是什么?

诸如此类的问题，可以自行Google，因为我也不是专业的前端，我实在不知道怎么解答。我只是会用而言，至于里面的前端原理，我是真的不清楚了

参考资料

JackSparrow414

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React应用入门（一）搭建最简单的基本应用

文章目录React应用入门（一）搭建最简单的基本应用开发环境配置nvm安装检查是否安装成功查看具体帮助npm安装检查是否安装成功WebStrom搭建应用初始化应用配置Babel为当前项目安装Babel添加Babel配置文件配置Webpack为当前项目安装Webpack添加Webpack配置文件书写React代码安装React在src文件夹下创建index.js在src文件夹下创建App.js在src文件夹下创建App.css启动打包项目结构项目仓库地址拓展参考资料React应用入门（一）搭建最简单的基本应
复制链接

扫一扫