var path=require('path');module.exports={// 入口文件指向src/index.jsentry:path.join(__dirname,'src/index.js'),//打包后的文件到當前目錄下的dist文件夾，名為bundle.jsoutput:{path:path.join(__dirname,'./dist'),filename:'bundle.js'}};
生成主要文件目錄
mkdir src && cd srctouch index.js
入口文件寫點內(nèi)容
document.getElementById('app').innerHTML='This is my React!';
//使用ES6的箭頭函數(shù)
var babeltest=()=>console.log('This is Babel Test!');
babeltest();
安裝與配置react
安裝
npm install --save react react-dom
頁面中引入src/index.js
import React from 'react';import ReactDom from 'react-dom';ReactDom.render(<div>First React!</div>,document.getElementById('app'))
自定義一個組件,建好目錄，我們把組件放入src/components中
cd srcmkdir components && cd componentsmkdir Hello && cd Hellotouch Hello.js
進入Hello.js
import React, {Component} from 'react';
export default class Hello extends Component{render(){return(<div>Hello React!</div>)}
}
引用Hello.js,進入src/index.js
import React from 'react';import ReactDom from 'react-dom';import Hello from './components/Hello/Hello';ReactDom.render(<Hello/>,document.getElementById('app');)
import React from 'react';import {BrowserRoter as Router,Route,Swith,Link} from 'react-router-dom';import Home from '../pages/Home/Home';import Page1 from '../pages/About/About';const getRouter=()=>(<Router><div><ul><li><Link to="/">首頁</Link></li> <li><Link to="/about">About</Link></li> </ul><Switch><Route exact path="/" componen={Home} /><Route path="/about" component={About}/></Switch></div></Router>);export default getRouter;
新建好組件文件目錄
cd src
mkdir pages && cd pages
mkdir Home && touch Home/Home.js
mkdet About && touch About/About.js
打開Home.js,定義內(nèi)容
import React,{Component} from 'react';export default class Home extends Component{render(){return(<div><h1>歡迎來到我的網(wǎng)站</h1><p>這是一個首頁</p></div>)}
}
打開About.js,定義內(nèi)容
import React,{Component} from 'react';export default class About extends Component{render(){return(<div><h2>關于我們</h2><p>自定義react全家桶</p></div>)}}
在入口文件src/index.js，引入Router
import React from 'react';import ReactDom from 'react-dom';import getRouter from './router/router';ReactDom.render(getRouter(),document.getElementById('app'))
