React-router的创建和第一个组件

需要先学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前面（少写一行）