Create React App 快速脚手架

  • Z时代
  • 2024-01-10
  • 分类：综合

react

开发React应用时，很少有人直接引入react的源JS文件，然后再开发。大家都是用webpack + es6来结合react开发前端应用。而webpack的使用又比较繁琐，为此官方提供了用于快速构建开发环境的脚手架工具Create React App。该脚手架将Webpack、Babel工具的配置进行了封装。使用它创建的项目，开发者不需要对其进行任何的配置工作，从而使你可以专注于开发！

1、安装

eate-react-app安装起来简单的要命，只需要一条命令！打开你的命令控件台，输入以下命令：

cnpm install -g create-react-app

通过-g可以将create-react-app安装到全局环境中，这样你就可以为所欲为的在任意路径下玩耍它了。

查看安装的版本号：

create-react-app -V

2、创建你的应用

输入以下命令：

create-react-app  my-app

这个时候会在你当前的路径下创建一个名字为 my-app的文件夹， my-app也就是你新创建的React应用。

注意：你的应用名字不要使用大写，这样做只要是为了严谨性，因为在Linux下是严格区分大小写的。

3、运行你的应用

创建应用完毕后，接下来就可以运行它了，输入以下命令：

cd my-app
npm start

运行后，它会主动打开你的浏览器，端口号默认为3000。如图：

打开my-app目录，你会发现结构非常简单清晰。

node_modules：存放的是安装所需要的所有依赖模块。

public：index.html为你项目的入口 页面。

src：你项目的源代码，其中index.js是你的代码入口。

package.json：项目中的基本信息都在这里了，例如你的项目名称、版本号、执行的命令、依赖的模块项之类的。

所有的源码都放到src目录下了，其它杂七乱八的东西你都不用搭理它，你只管在该文件下静静开发即可。因为其它的create-react-app都给你处理好了。

接下来我们可以打开index.js，你会发现它使用入了App.js。再打开App.js，修改render方法。将“Welcome to React”修改为“欢迎来到React的世界做客！”。代码如下：

render() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <h1 className="App-title">欢迎来到React的世界做客！</h1>
            </header>
            <p className="App-intro">
                To get started, edit <code>src/App.js</code> and save to reload.
            </p>
        </div>
    );
}

当你保存文件后，你会发现你的浏览器也会实时进行更新，这是因为Create React App具有热更新的功能。如图：

4、编译你的应用

只需要一条命令即可将你的应用编译为开发环境中的代码！

 cnpm run build

编译好的文件都会放到build目录中。另外它还提供一个服务器，让我们在本地也能看到线上生产环境类似的效果，是不是很方便，是不是有种马上就想尝试下的冲动？

若想编译你的生产环境首先安装pushstate-server用于将已经编译好的项目进行部署：

cnpm install -g pushstate-server

然后就可以在本地查看你的效果啦

pushstate-server build

然后浏览器访问http://127.0.0.1:9000/，就可以看到编译后的测试项目啦！

以上是 Create React App 快速脚手架 的全部内容， 来源链接： utcz.com/z/384460.html

回到顶部