写第一个React组件

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

什么是React?咱们在这不阐述,有关于这方面的介绍可以查阅官网或者互联网上相关的教程。咱们今天来学如何写一个React组件。对于像我这样初次接触React的人而言,总感觉React非常的神秘,也无法入手。最近也看了一些相关的教程,开始自己尝试写一个简单的React组件。

配置React环境

对于现在的前端,配置环境已不是什么新课题,但要完全整明白,还是略要一定的时间。@胡子大哈老湿的《React.js小书:基本环境安装》和@博伦老湿的《从零学习React技术栈: npm的安装配置和React开发环境配置》两篇文章都介绍了怎么配置React的环境。今天我也是来尝试一下两位老湿在文章中介绍的Create React App来创建React项目。对于生手而言,Create React App让我们不再需要考虑怎么来配置React的环境,比如说怎么配置Webpack呀,ES6的编译环境之类。可以专心的去写React项目。

要运行Create React App需要有一个NodeJS的环境,我想现在的前端,电脑中都安装了NodeJS吧,如果没有的话,你可以在命令行中执行:

npm i -g npm

这样就可以了。在此基础上,我们安装Create React App:

npm i -g create-react-app

执行完命令之后,在你的终端能看到一坨的东西。如果你和我一样,不想了解到底安装了些什么,可以忽略不计。到这为止,你的电脑上已经成功了安装了create-react-app。接下来就可以通过它来创建React项目。是不是比其他的省心多了。

Create React App创建项目

有了Create React App的环境之后,我们就可以通过它来创建React的项目了。

首先打开你的命令终端,进入到你平时工作的环境之下。我这里把React项目都放置在了一个react-app目录下,所以我直接进入到这个目录下。然后通过create-react-app命令来创建一个React项目。如下:

create-react-app example-app

执行完这个命令之后,在你的命令终端可以看到像下图一样的一坨东西:

这里安装一些React项目要的依赖,比如reactreact-domreact-scripts之类。最后,终端提示你可以执行一些命令:

  • npm start:开始开发服务器(一般本地服务器)
  • npm run build:将应用程序捆绑到静态文件中,以供发布到生产中
  • npm test:启动测试程序
  • npm run eject:删除此工具并复制构建依赖项,配置文件和脚本文件到app目录中。如果你这样做了,是无法回退的

注:如果你不是使用的npm,而是yarn的话,一样的具有这些命令。只不过换成了yarn startyarn buildyarn testyarn eject

这个时候你其实就已经通过create-react-app创建了一个名为example-app的React项目。在example-app自动创建了一些文件夹和文件,其目录结构类似下图:

更让你感到惊喜的是,create-react-app直接在package.json文件中添加好了项目需要配置的项以及相关的依赖关系。

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/react/create-the-first-react-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部