目录
React 快速上手 – 03 脚手架创建项目 一切都是组件
目标
- 通过脚手架创建项目
- 运行项目
- 了结项目结构
- 动手创建组件
创建项目
我推荐用脚手架作为开始，刚开始学习时一开始就捣腾 Webpack Babel 自己配置运行环境，然后你会发现一堆知识要补充，再然后就忘记了我一开始只是为了跑个 React。
本文讨论的都是基于 npm 构建的环境，如果直接在浏览器中运行，需要用 es5 直接写，否者会遇到兼容问题。
下面开始我们的正题！
1. 安装脚手架
cnpm install -g create-react-app关于 npm 加速 问题，请查看上篇
2. 执行脚手架程序
cd ~/Documents/labs
create-react-app reactjs-example我专门建了个 labs 目录，用来测试各种程序，这样不会把你的磁盘目录弄得很凌乱
录像
3. 运行项目
cd reactjs-example
npm start录像
浏览器打开 http://localhost:3000/
看到这个干净的页面，大家可以放心了，环境一切正常
目录结构
.
├── README.md | 帮助说明
├── build | 发布目录
├── package.json | npm包管理
├── public | 首页模板
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src | 源码
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js我们大部分内容都是在 src 下完成
写个简单的作为开始
编辑 app.js 文件
import React, {Component} from 'react'
const Element1 = () => <h2>组件1 - 常量</h2>
export default Element1输出: 组件1 - 常量
就3行，大家可以自己动手试下
能作为组件的js对象，大致如下几种:
1. 常量组件
const Element1 = () => <h2>组件1 - 常量</h2>2. 变量组件
let Element2 = () => <h2>组件2 - 变量</h2>3. es5 函数组件
function Element3() {
return <h2>组件3 - es5 函数</h2>
}4. es6 箭头函数组件
let Element4 = () => {
return <h2>组件4 - es6 箭头函数</h2>
}5. React.Component 类组件
class Element5 extends Component {
render() {
return <h2>组件5 - React.Component 类对象</h2>
}
}es6类 不是组件 重要!
class Element6 {
render() {
return <h2>组件6 - es6 class 类对象</h2>
}
}运行后报错!
使用 codepen 调试代码
codepen.io 是一个不错的在线调试代码平台，我的 codepen.io/ducafecat/
本文代码 codepen
https://codepen.io/ducafecat/…
项目编译
- 运行编译
cd reactjs-example
npm run build执行成功后会生成 /build 目录，直接放到你的服务器上就能展示了~
录像
- 如果本地打开
build/index.html，你会发现找不到资源文件，因为默认是指向/修改本地允许
先打开模板看下
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">这个 %PUBLIC_URL% 是全局变量
我们编译命令要这样写
- Windows
set PUBLIC_URL=./ && npm run build
- macOS
PUBLIC_URL=./ npm run build再次打开 build/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
...
<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" href="./favicon.ico">
<title>React App</title>
<link href="./static/css/main.65027555.css" rel="stylesheet">
</head>替换完成！
