Create React App 快速脚手架

最新推荐文章于 2024-04-17 17:57:30 发布

张培跃吧

最新推荐文章于 2024-04-17 17:57:30 发布

阅读量392

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/u012149969/article/details/82844836

版权

React 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

开发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具有热更新的功能。如图：