个人中心
gpt4 book ai didi

reactjs - 手动安装 React 应用程序的最佳方式

转载 作者：行者123 更新时间：2023-12-02 03:34:03 25 4
gpt4 key购买 nike

我正在学习 reactjs。然后我通过

安装我的 React 应用程序 
create-react-app first

但我想知道有没有手动安装 React 应用程序的方法

最佳答案

我会写最短的教程:)

第 1 步:创建如下文件夹和文件结构: enter image description here

第二步:安装下面的依赖:

npm install -S react react-dom prop-types

第三步:安装开发依赖:

npm install -D babel-core babel-loader babel-plugin-transform-class-properties babel-preset-es2015 babel-preset-react html-webpack-plugin webpack

Step4:添加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">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <!--Mounting point for React VDOM-->
    <div id="root"></div>
</body>
</html>

第 5 步:在根文件夹中创建 webpack.config.js 文件，内容为:

 let path = require('path'),
    webpack = require('webpack'),
    HtmlWebPackPlugin = require('html-webpack-plugin')

const PATHS = {
    src: path.join(__dirname, 'src'),
    dist: path.join(__dirname, 'dist'),
    main: path.join(__dirname, 'src/main.js')
}

let wpConfig = {
    entry: PATHS.main,
    output: {
        path: PATHS.dist,
        filename: 'build.js',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                  "presets": [
                      "es2015",
                      "react"
                   ],
                   "plugins": [
                      "transform-class-properties"
                   ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({ 
            title: 'My First React App',
            template: './index.html'
        })
    ]
}

module.exports = wpConfig

第六步:添加nmp命令。在 package.json 文件中，转到 "scripts" 部分并添加如下构建命令:

  "scripts": {
    "build": "node_modules/.bin/webpack"
  }

第 7 步:在 src 文件夹中创建这个简单的 React 应用程序文件 (ma​​in.js):

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
    return (
        <div>
            <h1>Hello,</h1>
            <p>This is my first react app!</p>
        </div>
    )
}

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

Step8:运行命令:

npm run build

Webpack 将构建并保存文件(build.js 和index.html)到dist 文件夹。在浏览器中打开您的 /dist/index.html 文件，您的第一个从零开始的 React 应用程序就准备好了!从这个基本的应用程序开始，然后添加一些额外的功能，如样式表(css、sass)、路由器、webpack 开发服务器、热重新加载等。祝你编码愉快!

关于reactjs - 手动安装 React 应用程序的最佳方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50881080/

25 4 0
文章推荐： python - SQLite 在使用 flask 和 sqlalchemy 时没有这样的列错误
文章推荐： ionic-framework - Mac 上的 Ionic 构建未更新到最新代码
文章推荐： c# - Roslyn CodeFixProvider 添加具有值的参数的属性
文章推荐： r - bookdown中如何使用Rscript命令行工具建书
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com