目 录CONTENT

文章目录

React脚手架介绍

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 7764 阅读 / 3769 字

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的生命周期

0

评论区