初窥react，入门教程1（安装，路由跳转，父传子）

如果没有node的童鞋记得先去安装node会自带npm

首先我们进行安装react

使用 create-react-app 快速构建 React 开发环境

1. create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
2. create-react-app 自动创建的项目是基于 Webpack + ES6 。
3. 执行以下命令创建项目：

npx create-react-app my-app
cd my-app
npm start

这里的npx不是拼写错误 —— 它是npm 5.2+ 附带的 package 运行工具。

这样就搭建完毕react，我们可以进行开发

首先我们安装react的路由

npm install react-router-dom --save

在App.js里面导入

ceshi,Page1,Page2,是我自己定义的组件（下面有ceshi.js组件里的代码），
这里其实就相当于是Vue的router.js=>导入文件，配置路由跳转

    import React from 'react';
    import ReactDOM from 'react-dom';
    import ceshi from './components/ceshi';
    import Page1 from './components/Page1';
    import Page2 from './components/Page2';
    import './App.css';
    import {Router,Route,Switch,Redirect} from 'react-router-dom';
    import { createHashHistory } from "history";
    const hashHistory = createHashHistory();

    function App() {
        return (
          <Router history={hashHistory}>
            <Route path="/ceshi" component={ceshi}/>
            <Route path="/Page1" component={Page1}/>
            <Route path="/Page2" component={Page2}/>
        </Router>
        );
    }

 export default App;

在ceshi.js里面，我们跳转到Page1里面,在React中类名都是 用
className

 import React from 'react';
 import {Link} from 'react-router-dom';//这里导入路由
 import "./ceshi.scss";//导入我们的scss文件

function App1() {
  return (
    <div className="App123">
     我是测试页面哟~~~666
      <ul className="menu">
       <li>123</li>
      <li>我都是好孩子</li>
      <Link to='/Page1'>Page1跳转</Link>
     </ul>
  </div>
 );
}

 export default App1;

刚开始遇到的是移动端的项目，安装flexible，和Vue是安装是一样的（同时安装sass）

npm i lib-flexible --save 
npm i sass-loader node-sass --save-dev 
npm i postcss-px2rem --save

在项目中使用
config/webpack.config.js进行配置
如果没有config文件执行
npm run eject
此操作是不可以逆的，会暴露出来配置文件

// 在配置文件中添加如下两行代码 
const px2rem = require('postcss-px2rem'); 
px2rem({ remUnit: 75 })

这里的75是因为设计图是750的，可以根据自己的实际需求去改们一般都为750

然后在 index.js里面导入

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
//这两行为导入（类似 Vue里面main.js）
//import 'antd-mobile/dist/antd-mobile.css';//antd-mobile UI库（移动端）
import 'lib-flexible';//px转换rem

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

重启项目后看到，为配置成功

父给子传递参数,我对比Vue和React的不同
Vue导入子组件需要components注册组件
React 可以直接使用

      import Uheader from "./Uheader"
      <Uheader utitle="保证金缴纳详情" subtitle=""/>

子组件接受
Vue接受需要在 props里声明接受

React 直接props.xxx即可接受

          
function Uheaders(props) {
  console.log(props)
     return (
        <div className="Uheaders">
        <ul>
          <li><img src={require('../assets/Goreturn.png')}/></li>
          <li>{props.utitle}utitle为父组件传递的参数</li>
          <li>{props.subtitle}subtitle为父组件传递的参数</li>
        </ul>
   </div>
   );
  }
export default Uheaders;

 

React 打包出来页面白屏 报错 “<”

在 package.json中加入 "homepage": ".",

图片的路径由 require 导入

 <div className="advisoryHome">
       <img src={require("../assets/a.png")}/>
   </div>