课前准备
本门课程讲解的基础是右侧的react-router-demo文件夹,这是一个很简单的React项目。我们的课程会一步一步加入React Router的操作,所以同学们要紧跟每一节的讲解,对react-router-demo文件夹中的文件进行相应的修改。
右侧的实验室已经为同学们配置好了实验环境,包括Node.js以及相关模块。与本课程相关的模块主要包括:react、react-dom、 express、react-router、webpack、webpack-dev-server等。同学们如果想在自己的设备上安装与本课程相关的模块,可以使用npm install命令进行安装。
如何运行react-router-demo?
~$ cd react-router-demo
~/react-router-demo$ webpack
~/react-router-demo$ node app.js
上面的操作分别是:进入react-router-demo文件夹、打包、运行应用。该项目运行后,会在8080端口监听连接请求。所以点击“访问测试”按钮后,弹出一个网页出现经典的"Hello, React Router!"。看官们,请记住此时的网址以“me.hubwiz.com”结尾,后面没有别的了。这个下一节的时候我们要做对比用。
注意,同学们在自己的设备上练习时,可以在浏览器中访问
http://localhost:8080查看。
打开modules/App.js,并做一些改变,可以在网页上打印任何你想输入的话语!