手动安装反应应用程序的最佳方法
我正在学习 reactjs。我安装我的反应应用程序
create-react-app first
但我想知道是否有任何手动安装反应应用程序的方法
我会写最短的教程:)
步骤1：创建文件夹和文件结构，如下所示：
Step2：安装以下依赖项：
npm install -S react react-dom prop-types
Step3：安装开发依赖：
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>
第五步：在根文件夹中创建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文件中，转到“脚本”部分并添加如下构建命令：
"scripts": {
"build": "node_modules/.bin/webpack"
}
步骤 7：在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')
)
第八步：运行命令：
npm run build
Webpack 将构建并保存文件（build.js和index.html）到dist文件夹。在浏览器中打开您的/dist/index.html文件，您的第一个从零开始的 React应用程序就准备好了！从这个基本的应用程序开始，然后添加一些额外的功能，如样式表（css、sass）、路由器、webpack 开发服务器、热重载等。快乐编码！
| 归档时间： |
|
| 查看次数： |
2046 次 |
| 最近记录： |