使用官方脚手架creact-react-app
//首先通过npm全局安装create-react-app
npm install -g create-react-app
//然后使用create-react-app命令来创建项目
create-react-app <项目名>
//创建my-app项目
create-react-app my-app
cd my-app
npm run start 或 yarn start
安装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语法，甚至是实验性的语法。
//安装指令
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"
}
}
]
}
};
处理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>
删除不必要的文件后梳理需要安装那些依赖
1.react-router-dom路由
2.axios
3.js-cookie
4.redux、react-redux状态管理
5.swiper 轮播图插件
6.node-sass sass-loader sass编译
7.react-transition-group 动画
使用命令进行安装
cnpm i react-router-dom axios js-cookie redux react-redux swiper node-sass sass-loader react-transition-group -D
然后在写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'))
import {Provider} from 'react-redux';
import axios from 'axios';
import jsCookie from 'js-cookie';import store from './store/store.js' //redux需要一个仓库进行存储
React.Component.prototype.$axios = axios;
React.Component.prototype.$cookie = jsCookie;
ReactDOM.render(<Provider store={store}></Provider> ,document.getElementById('root'));
稍后创建store仓库，首先创建路由文件；在src下创建Router.js文件，写入
1 import React from 'react';
2 import { BrowserRouter,Route,Switch } from 'react-router-dom'; //BrowserRouter 用来保持UI和URL的同步 Route负责匹配url的ui Switch只渲染一个路由
3
4 import Header from ./components/Header //引入一个普通页面
5 import Page from './pages/page' //引入一个需要路由的页面
6
7 const BasicRoute = (props)=>{
8 return (
9 <BrowserRouter>
10 <div className="box">
11 <Header></Header>
12 <Switch>
13 <Route path='/' component={page}></Route>
14 </Switch>
15 </div>
16 </BrowserRouter>
17 )
18 }
19 export default BasicRoute20
21//在main.js引入Router.js文件22 import BasicRoute from './Router.js'23 ReactDOM.render(<Provider stoer={store}> <BasicRoute></BasicRoute> </Provider>, document.getElementById('root'));
接着我们创建store仓库，首先在src下创建一个store的文件夹，创建store.js文件写入
import { createStore } from 'redux';
import reducers from './reducers.js'; //用来存放store仓库的逻辑代码和state数据
const store = createStore(reducers);
export defualt store;
创建reducers.js文件
const stateDefualt = {
} //存放数据
const reducers = function(state=stateDefualt,action){
} //用来存放逻辑代码
export defualt reducers;
创建两个文件夹components用来存放主要的组件，pages用来存放路由组件或者子组件，一般创建组件可以创建一个文件夹，里面存放两个文件Index.js和Header.js UI页面
//index.js 用来和redux进行联动
import { connect } from 'react-redux';
import Header from 'Header.js' //引入UI页面
//用来获取redux的state的数据
const mapStateToProps = (state,props)=>({
})
//用来绑定时间修改state数据
const mapDispatchToProps = (dispatch)=>({
})
export default connect(mapStateToProps,mapDispatchToProps)(Header)
//Header.js用来写入UI代码
import React,{Component} from 'react';
class Header extends Component{
constructor(){
super();
this.state = { //定义数据
}
}
render(){
return (
<div>
</div>
)
}
}
export default Header
运行项目
所有的代码已经完毕，在运行前我们还要安装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
注意：
create-react-app 快速脚手架搭建的项目，其默认配置文件都是隐藏的，如果要自定义，运行npm run eject。
单向操作不可逆，npm run eject命令暴露项目的配置，可以自由配置项目所需的依赖，不使用的版本零配置即可开发。
注意：运行npm run eject命令可能会报错误
报错原因：
create-react-app 脚手架添加.gitgnore文件，但是却没有本地仓库。
解决办法：
cd project
git init // 当前目录新建代码库
git add . // 添加当前目录所有文件到暂存区
git commit -m 'Saving before ejecting' // 提交暂存区到仓库区
npm run eject
扫一扫
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
