我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

从本篇博客开始,苏南大叔开始写reactjs入门系列教程。reactjs断断续续也用了有两年多时间了,从0.x版本,一直到现在的16.x系列,感觉这个reactjs是发展的非常迅猛啊。react入门系列博客,针对读者受众就是reactjs小白读者,所以reactjs的高手们请自动飘过。

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - 001
如何利用 create-react-app 新建一个简单 react 项目(图8-1)

本文先说一下,如何搞定一个最简单的reactjs的可运行demo,入门范例就讲究一个简单和快速。本文测试环境是:win10。其余的依赖库是:create-react-app@2.1.2react@16.6.3react-dom@16.6.3react-scripts@2.1.1

安装基本环境

不用npm init,不用下载reactreact-dom。仅仅需要全局安装create-react-app工具即可。

create-react-appfacebook官方出品的reactjs的脚手架工具,可以帮助大家快速建立一个简单可用的react的范例。这个create-react-app工具,对于开发reactjs来说,也并不是必须的,仅仅是个辅助快速建立模板工程的作用。全局安装这款脚手架即可:

npm install create-react-app -g

安装完成之后,可以使用下面的命令来查看版本号。

create-react-app --version

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - create-react-app
如何利用 create-react-app 新建一个简单 react 项目(图8-2)

创建项目工程

假设,苏南大叔需要建立一个test的项目,那么需要执行的命令就是:

create-react-app test

这个命令,会负责安装reactreact-dom以及初始化npm项目结构。着就节省了我们很多敲代码的麻烦步骤。过程可能会比较漫长,请耐心等待。

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - 002
如何利用 create-react-app 新建一个简单 react 项目(图8-3)

如果这里下载非常慢的话,解决方案可能是:

npm config set registry https://registry.npm.taobao.org/

相关链接:

如果这里下载失败,然后还自动回滚的话,可能的解决方案是sudo(适合mac系统):

sudo create-react-app test

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - creat-react-app-fail
如何利用 create-react-app 新建一个简单 react 项目(图8-4)

启动项目

进入test目录,执行npm start即可。

cd test
npm start

start的项目,很智能的打开了本地的3000端口。

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - 003
如何利用 create-react-app 新建一个简单 react 项目(图8-5)

package.json里面,苏南大叔发现,其实是使用了create-react-app自带的react-scripts模块。这里不做过多描述。

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - 004
如何利用 create-react-app 新建一个简单 react 项目(图8-6)

这个时候,就可以修改/public//src/目录下面的源文件了。修改完毕,直接保存即可,页面会自动刷新。这点操作上来说,是非常的智能,免得像普通的网站一样一直不停的f5看效果了。

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - 005
如何利用 create-react-app 新建一个简单 react 项目(图8-7)

获得成品

上述步骤都是在调试,而想获得一个干净可直接运行的版本,还需要执行:

npm run build

运行完毕后,就可以在根目录下面的build/目录里面,就可以看到最终的可发布版本了。不过,值得一提的是:这个可发布版本中,代码里面的资源引用是使用的相对于根目录的路径的。那么,如果想执行在浏览器里面以file://协议执行index.html文件的话,还需要替换一下index.html文件源码里面路径信息才可以正常访问。

苏南大叔:如何利用 create-react-app 新建一个简单 react 项目 - npm-run-build
如何利用 create-react-app 新建一个简单 react 项目(图8-8)

结论

本文的方法,是最快速入手react的方法,小白零基础入门即可。随着对代码的分析学习,以后就可以不用这种方法创建项目了。项目层次就提高了,不是嘛?

更多reactjs项目经验,请参见苏南大叔的经验文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react