Question

我正在学习反应。我通过

安装我的反应应用程序

create-react-app first

但我想知道是否有任何手动方式来安装反应应用程序

Answer 1

我会写最短的教程：）

Step1 ：创建如下文件夹和文件结构：

Step2 ：在下面安装依赖项：

npm install -S react react-dom prop-types

Step3 ：安装dev依赖项：

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>

Step5 ：在根文件夹中创建 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

Step6 ：添加nmp命令。在 package.json 文件中，转到＆＃34;脚本＆＃34; 部分，然后添加如下所示的构建命令：

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

Step7 ：在 src 文件夹中创建这个简单的React应用文件（ main.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 文件，您的第一个反应应用程序就可以了！从这个基本应用程序开始，然后添加一些其他功能，如样式表（css，sass），路由器，webpack开发服务器，热重新加载等。快乐编码！

手动安装react app的最佳方法

1 个答案: