前言

React.js是由Facebook在2013年5月推出的一款开源前端框架,它带来了一种全新的函数式编程风格。目前,React.js是全球范围内使用人数最多的前端框架。其拥有健全的文档和完善的社区,但是中文文档相对滞后。目前,最新的React.js版本为React 16.8,我们也将16.x版本的React.js称之为React Fiber。

开发环境准备

在学习React语法之前,我们需要先搭建基础的React开发环境。我们有两种使用Reactjs的方式:一种是使用script标签引入.js文件来使用React,另外一种是 使用脚手架工具来使用React。我们现在使用脚手架工具来使用React。

脚手架

脚手架实际是前端开发过程中的一个辅助工具,它会自动地帮助我们完成项目的构建,以一定的方式实现js文件的相互引用,让我们更方便地对项目进行管理。但是我们在脚手架编写的代码不能直接运行,需要进行编译才能正常运行。

在初学React的时候,推荐使用React官方提供的脚手架工具-create-react-app当然,在使用create-react-app之前,我们需要安装Node和npm。一般情况下,我们应当使用node的长期稳定版本(LTS)。

由于国内使用npm不太方便,推荐使用淘宝npm镜像代替官方的npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成以后,我们就可以使用cnpm安装脚手架工具create-react-app了。

 cnpm install -g create-react-app

接下来,我们就可以使用脚手架工具创建一个React项目了,其遵循以下模式。

create-react-app my-app

其中,my-app代表React项目名。我们选择一个目录,创建一个todolist项目。

create-react-app todolist

创建好项目以后,我们切换到todolist项目目录下,使用yarn start命令启动项目。这时,项目将会访问一个http://localhost:3000页面。

React启动页

至此,我们搭建好了React开发的所需的基础环境。

React中的组件

在这一节,我们来了解一下React中的组件,组件其实就是页面中的一部分。我们可以看这样一个例子。

React组件

左侧是一个网页,右侧是一个对应的组件图。我们可以把一个大的网页拆分成许多小的部分。比如说,标题部分对应一个组件就是标题组件,搜索部分对应一个搜索组件。而搜索组件又可拆分为一个输入组件和一个按钮组件。更进一步地,我们可以将其它内容区域拆分为一个个小的组件。无论一个页面多么复杂,当我们将其拆分为一个个小组件进行维护时,就比较简单了。

在我们创建的todolist项目src目录下的index.js文件,是整个项目的入口文件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

其中import App from './App';这行代码表示从App.js文件中引入App组件。

我们查看一下App.js文件

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;

在这个文件中,我们定义了一个App组件。接下来,我们看一下这个组件是如何被定义的。

  1. 首先,我们通过ES6的写法定义了一个类App,这个类继承了Component类,通过继承这个Component类,App被定义为一个React组件。

  2. 接着,在这个组件类中,我们定义了一个render方法,这个方法将返回一段内容,这段内容代表了页面的一部分。这个方法返回什么,组件就展示什么内容。

  3. 最后,我们通过export default App;将其导出,这样我们在index.js入口文件中就可以引用App组件了。

我们继续关注index.js入口文件,在这个文件中,我们来看这段代码ReactDOM.render(<App />, document.getElementById('root'));,其中,ReactDOM是一个第三方组件,其有一个方法render可以帮助我们将一个组件挂载到某一个DOM节点下,在这里,我们将App组件挂在到id等于root的DOM节点下。我们查看项目public目录下的index.html文件。这是项目的html模板文件。在这个文件里,存在一个id为root的DOM节点,App组件就是挂载到这个DOM节点下的,这样,我们就能够显示组件的内容了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
LastUpdated: 4/2/2019, 6:38:17 PM