React 快速上手 - 03 脚手架创建项目一切都是组件_ES2015(es6)

上一篇: ES5与ES6字符串方法总结下一篇:es6 Map和WeakMap

React 快速上手 - 03 脚手架创建项目一切都是组件

发布时间：2019-08-10 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了React 快速上手 - 03 脚手架创建项目一切都是组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。


目录

01 前言
02 开发环境搭建
03 脚手架创建项目 一切都是组件
04 基础特性 JSX、Props、State、Lifecycle、Event、Style
05 组件渲染控制
06 容器组件、展示组件
07 前端路由 react-router
08 状态管理 react-redux
09 数据请求 fetch
10 属性类型检查 prop-types

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                                    | 首页模板
│&nbsp;  ├── 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 文件

      
      
      export default Element1" tITle="" data-original-title="复制">
      
      
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 函数组件

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function Element3() {
  return 组件3 - ES5 函数
}" title="" data-original-title="复制">
      
      
function Element3() {
  return <h2>组件3 - es5 函数</h2>
}
4. es6 箭头函数组件

      
      
      return 组件4 - es6 箭头函数
}" title="" data-original-title="复制">
      
      
let Element4 = () => {
  return <h2>组件4 - es6 箭头函数</h2>
}
5. React.COMponent 类组件

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="class Element5 extends Component {
  render() {
    return 组件5 - React.Component 类对象
  }
}" title="" data-original-title="复制">
      
      
class Element5 extends Component {
  render() {
    return <h2>组件5 - React.Component 类对象</h2>
  }
}
es6类 不是组件 重要!


      
      
      return 组件6 - es6 class 类对象
  }
}" title="" data-original-title="复制">
      
      
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 ，你会发现找不到资源文件，因为默认是指向 / 修改本地允许
先打开模板看下

      
      
      ...
    
    " title="" data-original-title="复制">
      
      
<!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>
替换完成！
本文代码
reactjs-example / 1-introducing.js
参考文

Create React App
Git create-react-app
react-scripts

脚本宝典总结

以上是脚本宝典为你收集整理的React 快速上手 - 03 脚手架创建项目一切都是组件全部内容，希望文章能够帮你解决React 快速上手 - 03 脚手架创建项目一切都是组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：all all break break button button char char Class const const const default default div do es5 es6 export export export extends function function function if Import in in int java JSX let link name name new new package package packages post-format-gallery Prop public public public React return return return select short short State static static static text text top top 数组数组箭头函数箭头函数

上一篇: ES5与ES6字符串方法总结下一篇:es6 Map和WeakMap

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程

React 快速上手 - 03 脚手架创建项目 一切都是组件

目录

React 快速上手 - 03 脚手架创建项目 一切都是组件

目标

创建项目

1. 安装脚手架

2. 执行脚手架程序

3. 运行项目

目录结构

写个简单的作为开始

能作为组件的js对象，大致如下几种:

1. 常量组件

2. 变量组件

3. es5 函数组件

组件3 - ES5 函数

4. es6 箭头函数组件

组件4 - es6 箭头函数

5. React.COMponent 类组件

组件5 - React.Component 类对象

es6类 不是组件 重要!

组件6 - es6 class 类对象

使用 codepen 调试代码

项目编译

本文代码

参考文

脚本宝典总结

React 快速上手 - 03 脚手架创建项目一切都是组件

React 快速上手 - 03 脚手架创建项目一切都是组件

es6类不是组件重要!