初窥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，重启项目后看到，为配置成功

父给子传递参数,我对比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;