美文网首页
从零开始React之环境的搭建与项目的初始化

从零开始React之环境的搭建与项目的初始化

作者: Crcker | 来源:发表于2018-07-31 14:29 被阅读26次

    React

    简介:React是Facebook开发的一款JS库,是一个声明式、组件化并且用于构建用户界面的 JavaScript 库,通俗来讲就是将界面分成可以复用的组件,在需要时引入,使界面解耦,互不影响而又相互联系,在界面更新时,只会更新需要更新的组件,使得效率和性能上大大提升。

    1、环境搭建

    1. 安装node
      大家可以去官网下载安装包:node官网
      安装没有什么可以讲的,一路下一步即可, 安装完成后打开控制台输入
    CrckerdeMacBook-Pro:~ crcker$ node -v
    v10.0.0
    

    如果能正确输出版本号说明node已经安装完成,否则需要配置环境变量,这里不做介绍

    1. 安装npm和cnpm
      npm其实是Node.js的包管理工具,可以使我们方便的引入各种js库,当我们安装完node.js之后,npm也已经安装完成,打开终端输入
    CrckerdeMacBook-Pro:~ crcker$ npm -v
    6.1.0
    

    由于大部分的包在国外服务器,当我们安装某个库的时候可能会安装不上,如果出现这种情况,可以通过梯子的方式解决,也可以使用国内镜像,是由taobao托管,大家可以去 这里 查看安装方式,安装完成后就可以使用cnpm来管理包了,而且速度飞快。

    2、项目的初始化

    到目前基本的环境已经安装完成,下面我们来初始化一个react项目

    打开终端按照下面的输入:

    npm install -g create-react-app
    create-react-app react-demo
    cd react-demo
    npm start
    

    如果不出意外的话,程序会开启一个服务监听3000端口,并且打开默认浏览器,你会看到一下界面,说明项目已经成功运行。


    20180627163103738.png

    下面我们打开这个项目看一下项目结构,这里使用vscode:

    20180627163616583.png

    node_modules: 这里面包含了react项目中会用到的一些组件 。
    src:里面包含了一些我们自己使用的js文件,css文件,img文件等等
    manifest.json:清单配置文件,声明了项目的名称图标以及入口
    package.json: 包的清单文件,这里面声明的包会通过npm下载到node_modules中

    到现在为止,环境的搭建和项目的初始化已经全部完成了,大家可以修改一下App.js中的文字,会发现浏览器会立即作出响应,快去动手感受一下吧。

    相关文章

      网友评论

          本文标题:从零开始React之环境的搭建与项目的初始化

          本文链接:https://www.haomeiwen.com/subject/ckchvftx.html