React 快速上手 - 03 脚手架创建项目 一切都是组件
发布时间：2020-12-15 06:27:32 所属栏目：百科 来源：网络整理
导读：目录 01 前言 02 开发环境搭建 03 脚手架创建项目 一切都是组件 04 基础特性 JSX、Props、State、Lifecycle、Event、Style 05 组件渲染控制 06 容器组件、展示组件 07 前端路由 react-router 08 状态管理 react-redux 09 数据请求 fetch 10 属性类型检查 pro
|
目录
React 快速上手 - 03 脚手架创建项目 一切都是组件目标
创建项目我推荐用脚手架作为开始，刚开始学习时一开始就捣腾 Webpack Babel 自己配置运行环境，然后你会发现一堆知识要补充，再然后就忘记了我一开始只是为了跑个 React。 本文讨论的都是基于 npm 构建的环境，如果直接在浏览器中运行，需要用 es5 直接写，否者会遇到兼容问题。 下面开始我们的正题！ 1. 安装脚手架cnpm install -g create-react-app 关于 2. 执行脚手架程序cd ~/Documents/labs create-react-app reactjs-example 我专门建了个 录像
3. 运行项目cd reactjs-example npm start 录像
浏览器打开
看到这个干净的页面，大家可以放心了，环境一切正常 目录结构. ├── 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 下完成 写个简单的作为开始编辑 import React,{Component} from 'react'
const Element1 = () => <h2>组件1 - 常量</h2>
export default Element1
输出: 就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/ 本文代码 https://codepen.io/ducafecat/... 项目编译
cd reactjs-example npm run build 执行成功后会生成 录像
先打开模板看下 <!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
这个 我们编译命令要这样写 - Windows set PUBLIC_URL=./ && npm run build - macOS PUBLIC_URL=./ npm run build 再次打开 <!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> 替换完成！ 本文代码
参考文
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |