美文网首页
React 知命境(四)开发环境搭建

React 知命境(四)开发环境搭建

作者: 这波能反杀 | 来源:发表于2021-05-03 21:58 被阅读0次
    开发环境搭建

    我们可以直接在 codepen 中编写 React 代码,这是初始模板。该模板主要用于学习。

    我更建议在本地搭建 React 开发环境,这与实践更加接近。在初学时,我们可以通过 Create React App 创建项目。它是 React 创建单页应用的最佳方式。

    在使用之前,请确保你的电脑上安装了比较新版本的 Node.js

    Node >= 10.16 和 npm >= 5.6

    假如我们新项目取名为 my-app,在命令行工具中,我们只需要执行如下指令,就可以创建一个 React 项目

    npx create-react-app my-app
    
    安装成功

    具体的操作指令在命令行工具中已经告诉了我们。

    // 进入项目所在文件夹
    cd my-app
    
    // 启动项目
    yarn start
    
    // 打包项目
    yarn build
    
    // 暴露出项目的具体配置,以便于在此基础上扩展/修改更多配置
    yarn eject
    

    进入并启动项目,在浏览器中输入 http://localhost:3000,「通常该页面会自动打开」,我们会看到如下界面。

    初始界面

    注意关注命令行工具的提示。

    命令行工具提示

    我们可以直接在浏览器地址栏输入 http://localhost:3000 访问项目。

    也可以输入 http://192.168.2.107:3000 访问项目。如果你的手机与电脑处于同一局域网中,我们也可以通过该地址在手机上访问项目,这对于移动端开发的调试非常有用。

    1

    认识项目

    package.json

    项目的配置文件。在初学时我们只需要认识如下两个重要的字段即可。

    • dependencies

    该项目的所有依赖包及其版本的描述。当我们在命令行工具中执行如下指令时,依赖包会重新安装

    // 使用 npm
    npm install
    
    // 使用 yarn
    yarn install
    

    例如当前我们项目中,使用了 React ,在该字段下就会有如下配置

    "react": "^17.0.2",
    

    react 表示该依赖包的名称,17.0.2 表示该依赖包的版本号。版本号之前我们看到有一个 ^ 符号。该符号表示在安装依赖包时,会安装当前包的最新版本。

    这个细节在实践中非常重要。一个大型项目中,依赖包比较多,如果某个依赖包更新之后产生了破坏性的更新,我们无法感知,当你重新安装依赖包之后,有一定的风险导致之前的调好的功能出现 bug。因此实践中建议在项目创建之初删除该符号,以确保依赖包版本稳定。

    • scripts

    我们启动项目时,使用的是 npm start。这里的指令就是从 scripts 字段中来的。我们可以在该字段中定义属于我们自己的字段,例如,我们要区分不同环境时,可以自定义如下指令启动项目

    // 针对 dev 环境的启动指令
    "start:dev": "react-scripts start && node build.js dev",
    
    // 针对 test 环境的启动指令
    "start:test": "react-scripts start && node build.js test"
    

    然后配合自定义的 build.js 中分别处理不同的环境变量,我们就可以用 npm start:dev 启动开发环境的项目,用 npm start:test 启动测试环境的项目。

    // 启动开发环境的项目
    npm start:dev
    
    // 启动测试环境的项目
    npm start:test
    

    node_modules

    该文件夹是项目所有依赖包的存放地址。除了在项目初始化时安装的所有依赖包之外,后续通过 yarn/npm 安装的包都存放在该目录下。

    需要注意的是,当我们使用 git 管理项目时,该文件夹必须被忽略掉,我们应该在 .gitignore 中添加如下的配置

    // .gitignore
    /node_modules
    

    我们不需要把该依赖包中的内容上传到 git 仓库中,而应该在首次拉取 git 项目代码之后,执行 npm install 重新安装依赖包。

    public

    项目的入口文件。通常我们会将 index.html 存放在该目录中。构建工具会自动帮助我们补全一些逻辑,例如引入必要的 JavaScript 代码。

    对于 React 项目来说,index.html 中通常在初始情况下,只会提供如下代码

    <div id="root"></div>
    

    项目的更多内容,会通过 React 的 API 插入到该根节点中。例如

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

    但是 React 逻辑都被打包在一个 JavaScript 文件中,页面初始化时,需要等到该 JavaScript 文件加载完成之后才会执行。在这个空档时间页面会出现白屏,因此为了填充这个白屏时间,我们可以在初始化时,往 root 根节点中写入一些默认内容:loading、骨架等

    <div id="root">
      <span>页面加载中...</span>
    </div>
    

    src

    所有的 React 模块与组件代码都存放在该目录下。index.js 是所有 React 逻辑的入口文件。在该文件的逻辑中,所有的 React 组件被最终聚合成为一个组件 App,并通过如下代码渲染到页面中

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

    在该项目中,每一个文件都可以是一个独立的模块,React 中使用 ES6 Modules 语法来引入别的模块/组件。

    在该项目的默认代码中,我们可以看到,App 组件由如下几个部分组成

    • logo.svg
    • App.css
    • 一个 html 片段

    App.js 中这些部分被聚合在一起形成一个组件。index.js 在使用时,只需要引入该组件即可

    import App from './App'
    

    相关文章

      网友评论

          本文标题:React 知命境(四)开发环境搭建

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