首页 > 其他分享> 文章详细

多人博客项目构建过程(四)

2019-08-30 23:56:02 阅读：183 来源： 互联网

标签：npm const https 博客 react 构建多人 import router

前端开发

开发环境设置

修改项目信息

打开VS工具，选择package.json文件

选择webpack.config.dev.js文件

安装依赖

$npm install
$npm install react-router
$npm install react-router-dom

开发

前端路由

官网文档：https://reacttraining.com/react-router/web/guides/philosophy
基本例子：https://reacttraining.com/react-router/web/example/basic

#src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

ReactDom.render(<App />,document.getElementById('root'));

登录组件

登录页模板：https://codepen.io/colorlib/pen/rxddKy

<div class="login-page">
  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a href="#">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="#">Create an account</a></p>
    </form>
  </div>
</div>

标签：npm,const,https,博客,react,构建,多人,import,router
来源： https://www.cnblogs.com/xiaoshayu520ly/p/11437593.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

多人博客项目构建过程(四)