Create React App 快速脚手架

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 快速脚手架 的全部内容, 来源链接: www.h5w3.com/js/384460.html

回到顶部