初窺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;