温欣爸比

  • 主页
  • Alfred Workflow
  • 《Vim 练级手册》
  • 常用命令
  • 代码笔记
  • 合辑
  • 在线工具
所有文章 友链 关于我

温欣爸比

  • 主页
  • Alfred Workflow
  • 《Vim 练级手册》
  • 常用命令
  • 代码笔记
  • 合辑
  • 在线工具

React 通过入门项目 create-react-app 了解其语法

2019-01-18

create-react-app 是 React 的入门项目,通过它可以窥见 React 项目的简单构成和基本语法。



  • 安装
  • 启动流程
  • 构建静态页面
  • 为什么入口只有 index.html

安装

三种方法

1
$ npx create-react-app my-app

npx 来自 npm 5.2+ 或更高版本自带软件。

1
$ npm init react-app my-app
1
$ yarn create react-app my-app

启动

1
2
$ cd my-app
$ yarn start

随后会启动 3000 端口服务,并自动在浏览器中打开地址 http://localhost:300,如图

react-app

为什么使用 yarn start 命令可以启动,原因在于 package.json 中的关键代码

1
2
3
4
5
6
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

不管是 npm 还是 yarn,相应的命令都会在 scripts 字段中转换为相应的 react-scripts 命令

启动流程

以下为 React 项目简单结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

通过项目结构,我们慢慢了解下,React 的启动流程。

启动程序

首先这是一个 Node 项目,所以默认的启动程序为 src/index.js 文件。

通过文件中的关键代码

1
2
3
import App from './App';

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

可以看到,ReactDOM 将 <App /> 渲染到 document.getElementById('root') 中,root 是从 public/index.html 获取的。

渲染程序

查看 App.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}

export default App;

class App 是渲染页面组件,在类中可以通过各种内置或自己写的 JS 方法,对页面进行处理,并通过 render() 方法渲染页面,在这个方法内返回的是由 JSX 语法编写的代码,该语法我认为就是由 js/html/css 组合而成,所以 React 也是经常被认为是大逆不道将 三种语言写在同一个文件里。

构建静态页面

虽然是 Node 项目,但是作为前端页面,我们总要将它构建成静态页面,才能发布到服务中。

1
$ yarn build

运行后,会在根目录生成 build 文件夹,构建后的静态内容都在其中,结构如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.3351d163fa29e67b0b41ea8c711c59df.js
├── service-worker.js
└── static
├── css
│   ├── main.27a53a32.chunk.css
│   └── main.27a53a32.chunk.css.map
├── js
│   ├── 1.fa92c112.chunk.js
│   ├── 1.fa92c112.chunk.js.map
│   ├── main.881217d8.chunk.js
│   ├── main.881217d8.chunk.js.map
│   ├── runtime~main.229c360f.js
│   └── runtime~main.229c360f.js.map
└── media
└── logo.5d5d9eef.svg

4 directories, 15 files

页面入口为 index.html,静态文件在 static 文件夹中。

不过整个文件夹为什么只有一个 index.html,如果有多个页面,它可以完成任务吗?

为什么入口只有 index.html

首先回答上面那个问题,React 项目只需要一个 index.html 就可以访问所有页面。

为什么呢?要回答这个问题需要看下源码。

上边我们说到 index.js 加载了 App.js 渲染的页面,那么我们可以写多个类似 App.js 的“页面”,而 index.js 中可以通过访问地址来决定渲染那个页面。

当然这需要借助其他依赖包,不在我们本次讨论返回内。

最近更新
Alfred Workflow 命令行帮助工具
最近热读
Go 判断数组中是否包含某个 item
Vim 高级功能 vimgrep 全局搜索文件
办理北京工作居住证的一些细节
Go 语法错误:Non-declaration statement outside function body
Mac 电脑查看字体文件位置
扫码关注公众号,或搜索公众号“温欣爸比” 及时获取我的最新文章
赏

谢谢你请我喝咖啡

支付宝
微信
  • react
Hexo 解决升级版本后渲染 Markdown TOC 不生效
Golang 图片压缩
  1. 1. 安装
  2. 2. 启动流程
  3. 3. 构建静态页面
  4. 4. 为什么入口只有 index.html
© 2017 - 2022 温欣爸比 京ICP备15062634号 总访问量3628次 访客数3579人次 本文总阅读量3次
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • python
  • flask
  • javascript
  • docker
  • 工具
  • openresty
  • 微信
  • java
  • hexo
  • 杂谈
  • vim
  • git
  • mysql
  • http
  • linux
  • mac
  • tmux
  • ssh
  • 算法
  • 开发
  • node
  • 杂文
  • jinja2
  • maven
  • spring
  • 北京
  • 生活
  • springboot
  • react
  • shell
  • graphql
  • iterm
  • expect
  • nginx
  • sqlalchemy
  • html
  • electron
  • vagrant
  • elastic
  • 宝贝
  • ansible
  • css
  • jquery
  • go
  • markdown
  • awk
  • redis
  • leetcode
  • zsh
  • 漫威
  • ssr
  • android
  • ffmpeg
  • chrome
  • vmware
  • youtube
  • windows
  • jupyter
  • excel
  • jq
  • Mac
  • Homebrew
  • mongo
  • py2
  • HomeBrew
  • movie
  • nodejs

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • Guru99
每天看书
每天背单词
每天一篇
写写代码
听听周杰伦
爱爱老婆