React脚手架介绍-杨标的博客

React脚手架介绍

安装脚手架

为什么需要脚好架

首先要弄清楚一点，脚手架的作用是用于快速创建项目，脚手架的目的是让程序员把开发重心放在功能与项上面，而不用去管去管项目是的开发环境是如何搭建的，对于初学者这个非常方便

后期对项目熟悉以后可以深入到脚手架的底层去学习

如何安装脚手架

在Nodejs的环境下面，打开控制台，使用npm或yarn去安装脚手架

$ npm install create-react-app -g

或

$ yarn add create-react-app -g

yarn是新一代的包管理工具

如何使用yarn

使用yarn有以下几个特点

速度快
安装版本统一、更安全
更简洁的输出
更好的语义化。它的错误提示与安装提示都非常清楚，语义化明确

yarn的常用命令如下

$ yarn init  # 初始项目
$ yarn add 	 # 安装某一个包
$ yarn remove  # 移除某一个包
$ yarn /yarn install  # 根据项目下面的package.json安装依赖

安装完脚手架以后，我们可以通过下面的命令去查看脚手架的版本,如下所示

$ create-react-app --version

1581509027751

脚手架去创建项目

安装完React的脚手架以后，我们可以直接在控制台创建我们的项目。在控制台输入下面的命令

$ create-react-app 项目名称

1581509085707

上图就是使用脚手架创建了一个sms的项目

脚手架在创建项目的过程不如会自动安装项目所需要的依赖包，它会依次会用yarn,cnpm ,npm这个顺序来进行安装项目所需要的依赖。如下图所示

1581509183676

经过一系列的安装以后，最终出现下面的提示则代表项目创建成功

1581509318718

项目简介

经过脚手架创建完成项目以后，我们使用我们的开发工具vscode打开这个项目，如下图所示，我们现在对这些目录做一些讲解

1581509407737

在上面的项目里面，我们主要可以看到一个public与src两个文件夹，public是一个公开的目录，里面有webpack生成时所使用到一些文件，如index.html的模板，favicon.ico文件等，程序员主要专注的目录在src这个下面，在这个里面前端程序员创建的页面，组件，代码都在这里

在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();

当前的代码与之前所学习的vue很相似，都是使用ES6来进行开发，也都是基于组件化来进行开发的。

在这个index.js的代码里面，我们可以看到，程序首先加载了一个App.js组件，我们现在打开App.js代码

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  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;

在React里面，所有的组件都是一个class的对象，这个对象要继承导入自React的Component这个对象。

在React里面，当一个对象继承了Component以后，这个对象就具备了React组件的特性了

在React里面，有一系列的生命周期与特殊的属性。我们在下一个章节看一下React的生命周期

目录CONTENT

React脚手架介绍