react 框架 安装与梳理

安装脚手架步骤

按这个步骤走下去：

• npm install -g create-react-app

• create-react-app my-app

使用命令创建应用，myapp为项目名称

• cd my-app

进入目录，然后就启动

• npm start

配置文件

npm run eject 导出配置文件 //将所有的配置文件和 package.json 依赖库解压到应用所在的路径方便我们进行一些小改动 （执行完文件中会多了一个config文件，在里面的webpack.config.dev.js文件配置我们平时所需的一些用到的功能，例如：less、sass等）

运行结束后显示的目录，多了一个 config 与 scripts 文件夹；

打开scripts文件下的start.js文件

//大概在37行左右
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
//3000的位置可以修改地址例如：
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8888;
npm start //此时在命令行重新启动 则地址变为http://localhost:8888

打开config 文件下的paths.js文件

//大概在68行左右
module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  nodePaths: nodePaths,
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json'))
};
//其中appBuild: resolveApp('build')是打包后文件生成的文件夹可以修改成你想要的比如
  appBuild: resolveApp('demo')//后边打包结束后会输出在这个文件夹下
//打包之后双击打开 index.html文件是出不来的 因为路径的问题 那么就设置一下；还是这个文件大概58行

function getServedPath(appPackageJson) {
  var publicUrl = getPublicUrl(appPackageJson);
  var servedUrl = envPublicUrl || (
    publicUrl ? url.parse(publicUrl).pathname : '/'
  );
  return ensureSlash(servedUrl, true);
}
//中的publicUrl ? url.parse(publicUrl).pathname : '/' 在前边加一个.变成
publicUrl ? url.parse(publicUrl).pathname : './'
//好了保存一下 重新打开命令提示符
npm run build   //本次打包之后的文件会放到 demo文件夹下边，双击html也可以正常显示了！
！！！切记放在服务器上上线的时候如果用的BrowserRouter一定要给这个路径的.去掉 改回/ 否则会有问题。

依赖包文件 （package.json）

使用命令 npm i 可以下载 文件里面依赖所有对应的包

下载新的包时，可以 可以加上 --save--dev 下载相关的依赖到 这个文件

下一步，除了src里面的index.js 其他的删除，再建好文件夹，开始配路由。

路由配置

模板参考：

在src里面新建一个router文件里面里面建一个index.js 来管理所要配置的路由。 如下：

import React, { Component } from 'react';

import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';

import login from "../login/login";

import home from "../home/home";

export default class RouteConfig extends Component{

render(){

return(

<HashRouter>

<Switch>

<Route path="/" exact component={login} />

<Route path='/home' component={home}/>

<Redirect to="/" />

</Switch>

</HashRouter>

)

}

}

再在外层的index.js 引用配置好的路由文件导入index.html。如下：

import React from 'react';

import ReactDOM from 'react-dom';

import Fff from "./router"; （注意，会默认取router文件夹下面的index.js）

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