打开项目根目录下的 package.json,在这个文件的 scripts 里面,有几个自定义的命令,start 可以运行项目的开发服务,build 命令可以编译项目,test 可以运行项目的测试。
运行项目
回到终端,执行一下 npm run start,运行一下项目里定义的 start 这个命令,它可以启动项目的开发服务,每次开发 react 项目的时候,都需要先在终端,项目所在目录的下面执行一下这个 start 命令。它会给我们创建一个开发项目的时候需要的服务器。通过服务器的地址可以预览正在开发的项目,默认这个服务器的地址是 localhost ,端口号是 3000。
现在浏览器上访问的就是这个开发服务器的本地的地址,如果你想在局域网的其它设备上访问在我们这台电脑上运行的这个 React 开发服务,可以使用这个 Network 地址,这个地址就是你的本地电脑在局域网的 IP 地址,端口号也是 3000。
对项目的文件做了修改,保存以后,在浏览器上显示的应用的界面会自动更新,显示修改之后的变化。下面可以试一下,打开 src 目录下的 App.js,这是一个 React 组件,它提供的就是我们在浏览器上看到的界面。
在这个组件里显示了一个图像,也就是我们刚才在界面上看到的那个巨大的 React 图标。这个元素上有一个 css 类,名字是 App-logo,这个类的样式是在 App.css 这个文件里。
打开 App.css,然后找到 .App-logo 这个类的样式,可以注释掉这个动画效果。保存一下这个样式文件,你会发现,界面上显示的这个 React 图标现在就不再旋转了,因为我们把相关的样式注释掉了。
再回到 App 这个组件,修改一下这行段落文字,改成宁皓网。保存一下文件,再观察一下浏览器,你会发现,页面上会显示修改之后的文字。