社区网站建设策划方案/百度收录最新方法

1. 把项目变成git可以管理的仓库，同时，初始化项目
- git init
- npm init -y
2. 当前项目文件的创建
- .gitignore 忽略给github上传哪些文件
- .babelrc 编译;把不兼容的编译成兼容的
- webpack.config.js webpack的配置
- README.md 当前项目介绍
- src 目录存放开发阶段的html、css、js...
1) component
- Header.js
2) index.js
3) index.html
3. 安装必要的插件
- babel
npm i --save-dev
(babel-core babel-cli) babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
- webpack
webpack 跑本地; -》 dist目录可以看到
webpack-dev-server 跑服务器;本地看不到
- 要进行react开发，必须下载
react react-dom
4. 开始配置文件
- .babelrc
```
{
"presets":["es2015","stage-0","react"],
"plugins":[]
}
```
- webpack.config.json - 注意:开发阶段先不要压缩;上线再压缩
```
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('htmlwebpackplugin');
- module.exports = {
entry:path.resolve(__dirname,'src/index.js'), // 入口文件存放在src/index.js中
output:{ // 配置出口文件
path:path.resolve(__dirname,'dist'); // 编译好的文件放到指定dist目录下
filename:'bundle.js' // 打包之后的文件名
},
module:{
rules:[{ // 配置js文件
test:/.js(x)?$/, // 以.js 或者 .jsx结尾的文件
use:'babel-loder', // 使用babel-loder编译运行js文件
exclude:/node_modules/, //不包含的文件
}]
},
plugins:[ // 为了模板服务的;bundle.js自动插入模板
new HtmlWebpackPlugin({ // 把谁作为模板文件
template:'./src/index.html(index.html的相对路径)'
})
]
}
```
- package.json
```
"script":{
"start":"webpack-dev-server --progress --colors --content-base dist",
"build":"webpack --progress --colors"
}
```
5. 写一些react的测试文件
- 自己封装的组件，都放到component文件夹下;
- 把封装好的组件，导入到index.js文件中;
- index.js是入口文件，会被编译打包压缩到bundle.js,bundle.js会被自动插入的index.html文件中;
- index.html文件，会在服务器下自动渲染;
6. reactd 基本语法
1. 导入文件inport ... from ''
```
import React from 'react';
import ReactDom from 'react-dom';
```
2. react的写法，用es6的继承
```
class xxx extends React.Component{
render(){
return()
}
}
```
3. 导出 export default