目录

说在前面的话

前期准备

一、React项目创建

二、配置文件详解

三、自定义组件-实现简单计算器demo

末尾


说在前面的话

        由于开始学习React框架这里简单记录一下react通过脚手架创建项目的过程,并演示了一个计算器demo

前期准备

        在开始创建项目前,确认是否安装node.js运行环境打开电脑终端输入nodev即可,若没有版本号,则麻烦大家出门右转,然后伸出智慧的右手搜一下如何安装node.js,一定会有很多详细教程的。

node -v

一、React项目创建

1.先创建一个初始文件夹,并在当前路径打开终端

ps:我这里使用cmder打开终端,使用自带cmd打开终端也是可以的。 

2.用脚手架创建初始项目

命令格式npm createreactapp xxxxx(项目名称)

npx create-react-app calculator-app

ps:项目名称小写,不要出现中文

>>>项目创建成功,则会有一些提示信息

3.进入项目文件夹启动项目

cd calculator-app
npm start

>>>项目成功运行,则根据地址访问项目

>>>项目运行效果

二、配置文件详解

1.用vscode打开项目

code .

前面启动项目的时候就打开了,不信回去看看

 

 2.项目配置文件详解

node_modules存放项目所依赖的一些第三方文件

public静态源文件

src:源码文件夹

其它文件

三、自定义组件实现简单计算器demo

1.基础配置调整:删除添加下载组件

npm install react-point

ps这里首先在原本的cmder中按ctrl+c退出,然后在vscode中按ctrl+`打开终端

2.修改文件

首先修改index.html文件,在挂载点这个div外面再套一层,至于作用,且听我细细道来

然后修改一下全局样式index.css文件,添加样式计算器组件位于屏幕中间

再然后修改index.js文件,引入+渲染自定义组件

最后使用我们前面提到的npm start命令启动项目

npm start

>>>太棒了,项目运行成功,通过地址访问一下吧

>>>运行效果

末尾

         关于React创建项目的宝宝级教程介绍到这了,React框架的深入学习,还需要我们继续探索,一起加油吧~

ps:Last but not least,放几个下载地址,至于安装使用的详细教程,就劳请各位出门右转,伸出智慧的右手搜一下吧,一定会有详细教程的,啦啦啦。

Cmder下载地址Cmder

Node.js下载地址Node.js

Vscode下载地址Vscode

Calculator组件中的jscss源码https://pan.baidu.com/s/1OxzzhETq4MOKuJ4Amujt1A?pwd=hcgv%C2%A0%E6%8F%90%E5%8F%96%E7%A0%81%EF%BC%9Ahcgv

原文地址:https://blog.csdn.net/shensanbai95/article/details/129996853

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_15423.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注