美文网首页我爱编程
【React.js 01】React脚手架

【React.js 01】React脚手架

作者: IUVO | 来源:发表于2018-03-29 17:42 被阅读1410次

    React学起来也真是的挺麻烦的,给你脚手架,你也得eject后按需去修改,更别提一堆的配置了......
    当然,这只是我的牢骚,还是乖乖写笔记吧。

    • 基础使用

    我比较偷懒,就直接上脚手架了,这里我选择的是官方的create-react-app这个脚手架。
    create-react-app其实就是一个命令,安装很简单,终端输入命令:

    npm install -g create-react-app
    

    待安装完毕后,就可以直接cd到你想要创建项目的目录,例如我要创建一个叫myApp的项目,就输入命令:

    create-react-app myApp
    

    稍等片刻,即可创建一个完整的项目环境,如果要运行该项目,就cd到项目文件夹根目录下,输入命令:

    npm start
    

    即可启动项目,浏览器自动开启页面。
    而且用脚手架的好处就是,不需要我们自己再去一次次的打包运行,只要代码有修改,浏览器中的页面就会自动刷新。

    • 目录下文件结构

    项目文件夹根目录下ls可以看到:

    文件结构
    1、浏览器自动打开的HTML页面,默认在项目路径/public/index.html里面。
    2、由于JSX的语法,所以,实质上渲染页面的地方默认在项目路径/src/index.js里,修改页面就在这里修改即可,当然,这只是在学习的时候这么做,实际项目里,要考虑整体文件结构。
    3、项目整体配置信息,就在项目路径/package.json中。
    4、如果想要自己配置webpack或者其他设置,就要执行命令:npm run eject来弹出脚手架帮我们隐藏的配置文件。(过程中要选择输入y/N分别来确认y或取消N操作,因为这个操作是单向,不可逆的)
    • Eject之后的目录下文件结构

    多了两个文件夹:config&scripts
    1、config文件夹下主要是webpack的详细配置文件,一般不需要修改。
    2、 scripts文件夹下的几个js文件其实就是实际执行我们npm run命令的的配置,一般也不需要需改。

    现在我们再回来看看package.json文件,东西多了很多依赖,之前都是封装在react-scripts内部的,而现在可以自己去配置了。

    关于脚手架就先说这些吧,这篇文章只是我这只小菜鸟的笔记,很多地方没细讲,有没说清楚的地方可以留言提问,小弟尽量帮忙;或者文中有说错的地方,也可以留言指导,小弟虚心接受~

    相关文章

      网友评论

        本文标题:【React.js 01】React脚手架

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