需要先学react框架
首先:找到一个文件夹,在文件夹出打开cmd窗口,输入如下图的口令
npx create-react-app demo
然后等待安装
安装完成
接下来进入创建的demo实例
cd demo
然后可以用如下方式打开vscode
code .
注意:不要忽略点号与空格
信任之后打开界面如下:
Package.json是比较关键的点,用来存储包,项目的信息。
package-lock.json用来索引到本机上的一些包,一般来讲可有可无。
正常开发react都需要用到git
Public 是一些静态的资源
“root”根标签,打包的所有内容都被注入到该标签中。
运行:终端输入npm run start
npm run start
run可有可无,带上还是好
下一步:可以选择删除src中的文件,对我们无大的帮助
cd进入
rm通配符(remove)
cd src
rm *
删除完成。
此时会报错,因为删光了,必要的东西都被删了。所以我们接下来来补充这一部分:
很简单
只需在src目录下新建一个“index.js”文件即可,它是我们的入口文件。
文件内需要一些内容
如下图 :
显然上图中第一个参数不适合大长代码的使用,所以下面来写第一个组件。(第一个参数为什么能用HTML的标签,因为这是jsx的语法)
依然是src目录中写,惯例,最大的写App.js
(这儿的后缀名可以.js 也可以.jsx 推荐只写js的地方用前一个,写组件的地方用后一个)
下面的图需要认真记,认真研究
注意:
Render class import compoment ReactDom export default 这些东西需要学习!
运行截图:
回忆;小圆括号是在js代码中返回html
Render 指我要渲染 ,渲染的内容就是我返回的这一套html
建议加要求:组件名必须大写(App)
不然报错
如果想在html中想写js这时用 {}
export default可以写到class前面(少写一行)