为了账号安全,请及时绑定邮箱和手机立即绑定
慕课专栏

目录

索引目录

专业技术团队出品:React深度剖析+实战

限时优惠 ¥ 42.00

原价 ¥ 58.00

08月21日后恢复原价

限时优惠
立即订阅
01 创建第一个 React 应用
更新时间:2020-07-17 15:38:39
才能一旦让懒惰支配,它就一无可为。

——克雷洛夫

引导语

众所周知,学习一门技术最好的方法,就是实践,大白话就是跟着我们一起敲代码,我们学习 React 亦是如此。由于开发 React 应用需要一个众多开发工具组成的开发环境,因此在这之前,我们需了解其开发环境及开发工具,然后才能更好的开发 React 应用。了解完这些基础之后,我们会带大家来创建你的第一个 React 应用,并介绍一些容易遇到的细节问题。

资源

开发环境

1. Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。React 应用并不依赖于 Node.js 运行,但是开发过程中的一些编译过程(比如 npm,Webpack 等)都需要在 Node 环境下运行。因此,开发 React 应用前,应确保已经安装了 Node.js。

官方下载地址是 https://nodejs.org,稳定版和最新版选择一个版本下载即可(我们开发一般使用稳定版)。

2. NPM

NPM 是 Node 的一个包管理工具,每个包都是一个模块,能够使你轻松下载、管理模块依赖和版本。同样的,在使用 React 开发应用时,会依赖很多模块,这些模块就可以通过 NPM 进行下载。由于 NPM 已集成到了 Node.js 中,因此不用单独下载。

当然我们也可使用 yarn 模块管理,本教程统一使用 npm 模块管理。

开发工具

1. Webpack

Webpack 是一个前端资源加载和打包工具。Webpack 提供了模块化的开发方式,将各种静态资源视为模块,如 JavaScript、CSS、图片等,并通过 Webpack 生成优化过的代码。同样在开发 React 应用时也要用到 Webpack 来进行模块打包。

Webpack 的安装可以参考官网文档。Webpack 的进一步学习可以打开官网,本小节不做详细阐述。

2. Babel

Babel 是一个 JavaScript 编译器,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

由于我们在开发 React 应用中,会用到很多 ES6 的语法,但目前浏览器并不完全支持,因此在 Webpack 编译阶段,利用 Babel 将 ES6 及其以后的语法编译成 ES5 语法。

如何快速搭建 React 应用

Webpack、Babel 等工具是开发 React 应用所必需的,但这些工具的使用、配置又比较繁琐,需要大量学习才可以掌握。因此,本小册借助官方提供的脚手架 Create React App 创建 React 应用。该脚手架已经将 Webpack、Babel 等工具的配置做了封装,无需开发者做配置,提供了一个零配置的现代构建。

Create React App 对于开发环境版本有一定的要求,具体如下:
npm 版本 >= 5.6
node 版本 >= 8.10

快速搭建 React 应用需要四个步骤:

  1. 安装官方脚手架;
  2. 创建 React 项目;
  3. 启动项目;
  4. 暴露配置项。

下面大家跟着本文来一步一步进行操作。

1. 使用 npm 安装官方脚手架

npm install -g create-react-app

安装好之后,可以运行:create-react-app --version 查看版本号,如果版本号正常展示,证明安装成功。

2. 创建 React 项目

create-react-app my-demo

这里项目名不能使用驼峰的形式(即不能包含大写字母),不然会有以下报错:name can no longer contain capital letters

3. 启动项目

cd my-demo && npm start

此处也可使用 yarn 启动项目:yarn start,建议 yarn 和 npm 不要混用。

4. 暴露配置项

npm run eject

当看到以下界面时,说明你的 React 应用就已经安装好了。

图片描述

文件结构

文件结构一览

接下来,我们看下安装好的 React 应用的文件结构。

├── README.md                   文档 
├── package.json                npm 依赖
├── public                      静态资源文件夹
│   ├── favicon.ico             网站icon图标
│   ├── index.html              模版
│   ├── logo192.png             192*192大小的react logo
│   ├── logo512.png             512*512大小的react logo
│   ├── manifest.json           移动桌面快捷方式配置文件
│   └── robots.txt              网站与爬虫间的协议
├── src                         源码文件夹
│   ├── App.css
│   ├── App.js                  根组件
│   ├── App.test.js
│   ├── index.css               全局样式
│   ├── index.js                入口文件
│   ├── logo.svg    
│   └── serviceWorker.js        PWA 支持
└── yarn.lock

创建你的 Hello World

为了快速了解 React,我们先改动一个文件看看效果,从动手尝试中去学习。
打开 src/index.js 文件,可以看到 render 的模版是 App.js,代码如下:

import React from 'react' // 使用JSX语法必须引入react
import ReactDOM from 'react-dom'
import App from './App.js'

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

<App /> 是 JSX 语法(后面会讲什么是 JSX 语法)。
root 是 index.html 模版里的元素,渲染出来的 App 组件放在此处。

我们来尝试修改 App.js 文件:

// src/App.js
import React from 'react'
import './App.css'

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <p>
                  hello world
                </p>
            </header>
        </div>
    )
}

export default App

可以看到上面代码中,我们将 header 中的内容换成了我们自己的,保存代码,浏览器会自动帮我们刷新,接着我们就能看到页面展示如下:
图片描述
到此,我们已经完成了使用 React 的第一步。

样式引入之 Sass

我们在开发过程中,通常不会使用原生的 CSS 直接开发,而是会选择 CSS 预处理语言,比如 Sass,使用 Sass 会极大的提高我们书写 CSS 的效率。

Sass 的安装

  1. 首先,让我们一起来安装 Sass,create-react-app 脚手架中已经添加了 sass-loader 的支持,只需要安装 node-sass 插件即可, 使用如下命令即可直接安装 Sass。
npm install node-sass --save-dev

在上面命令中,我们使用了 --save-dev 后缀,其代表将 Sass 安装在了开发环境。

安装好 Sass 之后,我们可以在项目中直接引入并使用 Sass 。

  1. create-react-app 脚手架中已经添加了 sass-loader 的支持,想要查看配置,执行 npm run eject ,隐藏的配置都会展示出来,打开 config/webpack.config.js 文件,会找到如下几行代码:
const sassRegex = /\.(scss|sass)$/; // 正则:以 .scss 或者 .sass 结尾
const sassModuleRegex = /\.module\.(scss|sass)$/; // 正则:以 .module.scss 或者 .module.sass 结尾
// ...
{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'sass-loader'
    ),
    sideEffects: true,
},
{
    test: sassModuleRegex,
    use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'sass-loader'
    ),
},

上面一段代码中,第一、二行是两个正则表达式,分别表示以 .scss 或者 .sass 结尾和以 .module.scss 或者 .module.sass 结尾。花括号中是 Webpack 配置 loader 的语法,我们一起来回忆下此部分。官网有提到,在 webpack 的配置中 loader 有两个目标:

  1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  2. use 属性,表示进行转换时,应该使用哪个 loader。

这就告诉 Webpack 编译器(compiler)如下信息:

“嘿,webpack 编译器,当你碰到以 .scss 或者 .sass 或者 .module.scss 或者 .module.sass 结尾的文件时,在你对它打包之前,先使用 sass-loader 转换一下。”

npm run eject 此命令会将脚手架中隐藏的配置都展示出来,此过程不可逆。

样式的引入

上面例子中 src/App.js 直接引入 App.scss,使用方式如下:

import React from 'react'
import './App.scss'

function App() {
  return (
    <div className="App">
      <header className="title">
        <p>
          hello world
        </p>
      </header>
    </div>
  )
}

export default App

假如此时如果在其他组件中引入另一个样式文件,若其他样式文件中有相同的 .title 类名,那么会造成样式上的冲突。如果想实现样式的模块化,则需使用 [name].module.scss 方式命名,使用方式如下:

import styles from './index.module.scss'

export default function App() {
  return (
    <div className={styles.title}>hello world</div>
  )
}

这样就不会和其他同类名的 .title 冲突了。

<div class="App_title__-GfWs">hello world</div>

提示:要添加 CSS Modules 样式表,这里必须使用 [name].module.css 方式命名,不然会认为是个常规的 CSS。另外若使用 Sass、Less 等,只需将 [name].module.css 改为 [name].module.scss 即可。

小结

本节内容主要讲解了如何使用 creat-react-app 脚手架快速搭建 React 开发环境,学习了日常开发所需要的工具,并写出一个简单的 hello world 组件。重点是安装脚手架所需的环境,注意脚手架对于环境的版本要求。我们知道脚手架是基于 Webpack 工具构建的,想要更深入的学习 Webpack,可以详细学习官网的知识点。 下一小节我们要学习 React 的一些基础知识,为后续章节打基础。

demo地址

知识扩展阅读

}
限时优惠 ¥ 42.00 ¥ 58.00

你正在阅读课程试读内容,订阅后解锁课程全部内容

千学不如一看,千看不如一练

手机
阅读

扫一扫 手机阅读

专业技术团队出品:React深度剖析+实战
限时优惠 ¥ 42.00 ¥ 58.00

举报

0/150
提交
取消