01 react global news release management system 003 project launch project creation and configuration

Code ant craftsman 2021-09-15 10:27:04

Global installation react-cli

npm install -g create-react-app
 Copy code 

Create project

create-react-app news-system
 Copy code 

Start project

yarn start
 Copy code 

1631108850.jpg

src Medium index Get rid of web Report analysis and suspend strict mode :

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
// import reportWebVitals from './reportWebVitals';
ReactDOM.render(<App />, document.getElementById("root"));
// reportWebVitals();
 Copy code 

App rewrite , Use function stateless components :

import React from "react";
function App(props) {
return <div>App</div>;
}
export default App;
 Copy code 

install sass

 yarn add sass
 Copy code 

install axios

yarn add axios
 Copy code 

Install reverse agent  http-proxy-middleware

yarn add http-proxy-middleware
 Copy code 

stay src Create under file setupProxy.js file

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/ajax",
createProxyMiddleware({
target: "https://m.maoyan.com",
changeOrigin: true
})
);
};
 Copy code 

stay App.js Li test axios And reverse proxy , The project needs to be restarted before testing

import React from "react";
import axios from "axios";
function App(props) {
axios
.get(
"ajax/movieOnInfoList?token=&optimus_uuid=A0DA9810FC4711EB8EB57F2D71C8720EF63AA4FEDA4E49F587C017827E2EDCCD&optimus_risk_level=71&optimus_code=10"
)
.then(res => {
console.log("debug log --> ", res);
});
return <div>App</div>;
}
export default App;
 Copy code 

install react-router-dom route

yarn add react-router-dom
 Copy code 

stay src Create router/indexRouter.js

import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Login from "../pages/login/Login";
import NewsSandBox from "../pages/sandBox/NewsSandBox";
function indexRouter(props) {
return (
<HashRouter>
<Switch>
<Route path="/login" component={Login}></Route>
<Route
path="/"
render={() =>
localStorage.getItem("token") ? (
<NewsSandBox></NewsSandBox>
) : (
<Redirect to="/login"></Redirect>
)
}
></Route>
</Switch>
</HashRouter>
);
}
export default indexRouter;
 Copy code 

stay src Create pages/sandBox/NewsSandBox.js

import React from "react";
function NewsSandBox(props) {
return <div>NewsSandBox</div>;
}
export default NewsSandBox;
 Copy code 

stay src Create pages/login/Login.js

import React from "react";
function Login(props) {
return <div>NewsSandBox</div>;
}
export default Login;
 Copy code 

install ui Components ant-design ant.design

yarn add antd
 Copy code 

modify  src/App.css, Bring in at the top of the file  antd/dist/antd.css.

@import '~antd/dist/antd.css';
 Copy code 

Updated on 2021/09/08

Not finished , Ongoing update ...

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15

2021-09-15

2021-09-15