标签 react 下的文章

利用 react-router 创建一个单页应用


使用 create-react-app 创建一个新的项目

# 创建新项目 spa
create-react-app spa
# 进入该文件夹,并安装 react-router-dom 包
cd spa
npm i -S react-router-dom

note: 可能 npm 安装不了 react-router-dom 我下午尝试了多次,最后改用 yarn 才安装上。。然后没安装 create-react-app 的话,要先安装该包。

去掉我们不要的文件,最初的工作

清空 publicsrc 这两个文件夹的文件。然后新建一个 index.htmlpublic 文件夹里头。

<!-- ./public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
  <title>SPA</title>
</head>
<body>
  <div id="root">
    
  </div>
</body>
</html>

新建一个 index.js 文件,在 src 文件夹里头。

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

import Main from './Main'

ReactDOM.render(
    <Main />, 
    document.getElementById('root')
);


利用 React 写一个 TodoList


写一个 TodoList 小应用

安装 create-react-app 模块

# -g 代表全局安装
npm install -g create-react-app

这个模块可以帮助我们更快的创建 React 应用。如果你的用了淘宝的 npm 镜像,安装过程大概要一两分钟吧。

创建一个 todolist 应用

在你想创建该应用的文件夹里,打开终端。我用的终端是 git bash 输入如下命令行:

# 我们会在终端当前路径下,创建一个文件夹 todolist 这就是一个 React 应用了。
create-react-app todolist
# 家里网络不好,还报错了,我创建了两次才成功。。。

启动该应用

# 进入创建的项目文件
cd todolist
# 启动成功后会打开浏览器访问 localhost:3000
npm start