Welcome to another series. This time I’ll be focusing on Laravel. Although this series will focus exclusively on Laravel, I will have another series going alongside this one focusing on React. After both series are done, I will merge them and have Laravel with React. That is why this installation is going to be focused on Laravel with React Scaffolding. If you’re here just for Laravel, I will tell you when you can stop if you’re not interested in React.
欢迎来到另一个系列。 这次，我将重点介绍Laravel。 尽管本系列文章将仅专注于Laravel，但与此同时，我将有另一个系列关注于React。 在完成两个系列之后，我将合并它们并将Laravel与React一起使用。 这就是为什么此安装将重点放在带有React Scaffolding的Laravel上的原因。 如果您只是为Laravel而来，如果您对React不感兴趣，我会告诉您何时可以停止。
If you’re not familiar with PHP, I suggest that you follow my PHP series that I’m currently writing. As of this writing, I have 42 articles already written on PHP (and 30 more drafts ready to go).
如果您不熟悉PHP，建议您遵循我当前正在编写PHP系列文章。 在撰写本文时，我已经有42篇关于PHP的文章(还有30篇草稿准备就绪)。
Let’s get started. What better way to begin learning Laravel than to start with the installation process.
让我们开始吧。 有比开始安装过程更好的开始学习Laravel的方法。
Navigate over to laravel.com and click Documentation. As of this writing, Laravel is on version 7. Under Server Requirements, you will see the PHP version that will be required in order for Laravel to function properly. For me, it states that a version of PHP ≥ 7.2.5 is required.
导航至laravel.com ，然后点击文档 。 在撰写本文时，Laravel是版本7。在“ 服务器要求”下 ，您将看到PHP版本，Laravel才能正常运行。 对我来说，它指出需要PHP≥7.2.5的版本。
Verify that you have the specified version of PHP by going to your terminal and typing in php -v. I currently have PHP 7.4.0.
通过转到终端并输入php -v ，以验证您具有指定版本PHP。 我目前有PHP 7.4.0。
C:\Users\Dino Cajic>php -v
PHP 7.4.0 (cli) (built: Nov 27 2019 10:14:18) ( ZTS Visual C++ 2017 x64 )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend TechnologiesPHP Windows准备 (PHP Windows Prep)
If you don’t have PHP installed on your computer, the easiest solution for Windows users is to go to wampserver.com and download the latest version of WAMP. Click on the Download button and select the appropriate download for your computer: either 32-bit or 64-bit.
如果您的计算机上未安装PHP，则Windows用户最简单的解决方案是访问wampserver.com并下载最新版本的WAMP。 单击下载按钮，然后为您的计算机选择适当的下载：32位或64位。
You can see that PHP 7.4.0 will be installed along with other versions that you can specify during the installation process.
您会看到PHP 7.4.0将与在安装过程中指定的其他版本一起安装。
Once you install WAMP server, run the command php -v again. A version ≥ 7.2.5 should be displayed. If a version lower than 7.2.5 is displayed, click on the WAMP icon, scroll over PHP, then Version, and finally select the correct version. Mine is set to 7.4.0.
安装WAMP服务器后，再次运行命令php -v 。 应该显示版本≥7.2.5。 如果显示的版本低于7.2.5，请单击WAMP图标，在PHP上滚动，然后在Version上滚动，最后选择正确的版本。 我的设置为7.4.0。
If you already have WAMP installed and just need the latest version of PHP, head over to wampserver.aviatechno.net and download the latest PHP version, either for the 32-bit or 64-bit OS. Run the executable, restart WAMP, and check WAMP server again; it should be there.
如果您已经安装了WAMP并且仅需要最新版本PHP，请转到wampserver.aviatechno.net并下载适用于32位或64位操作系统的最新PHP版本。 运行可执行文件，重新启动WAMP，然后再次检查WAMP服务器。 它应该在那里。
You might also have to modify your environmental variable to be able to use the php command line. I wrote an entire article on this, so check it out if you need help.
您可能还必须修改环境变量才能使用php命令行。 我为此写了整篇文章，因此请查看是否需要帮助。
PHP MAC准备 (PHP MAC Prep)
MAC’s come preinstalled with PHP. Open your terminal, run php -v, and you’ll see your version of PHP. If you need a later version of PHP, navigate to https://php-osx.liip.ch, copy the command for the version that you want, paste it into your terminal, and wait for it to finish.
MAC已预装PHP。 打开终端，运行php -v，您将看到您PHP版本。 如果需要更高版本PHP，请导航至https://php-osx.liip.ch ，复制所需版本的命令，将其粘贴到终端中，然后等待其完成。
Then, you’re going to want to modify the path variable by following the instructions towards the middle of the page.
然后，您将需要按照页面中间的说明来修改path变量。
Type in php -v and you’ll see that you’re running the correct version of PHP.
输入php -v ，您将看到运行的是正确版本PHP。
获取作曲家 (Get Composer)
Return to Laravel’s Documentation. The next requirement is that you have the latest version of composer installed on your computer. In your terminal, type in composer --version. The latest version as of this writing is 1.10.10.
返回Laravel的文档。 下一个要求是您的计算机上安装了最新版本的composer。 在您的终端中，输入composer --version。 撰写本文时，最新版本为1.10.10。
C:\Users\Dino Cajic>composer --version Composer version 1.10.10 2020-08-03 11:35:19If you don’t have composer installed on your computer, navigate over to https://getcomposer.org/ and click Download. Windows installation is pretty simple: just click on the Composer-Setup.exe link. It’s right above the command line installation heading; if you’re not looking for it, you just might miss it. Run through the prompts and check the version again. You may have to close and re-open your terminal for changes to take effect.
如果您的计算机上未安装作曲家，请导航至https://getcomposer.org/并点击下载 。 Windows安装非常简单：只需单击Composer-Setup.exe链接。 它位于命令行安装标题的上方； 如果您不需要它，您可能会错过它。 运行提示，然后再次检查版本。 您可能必须关闭然后重新打开终端才能使更改生效。
If you have an outdated version of composer, just download it again and it will overwrite your outdated version with the latest version.
如果您的Composer版本过旧，只需再次下载即可，它将用最新版本覆盖您的过时版本。
NPM软件包管理器 (NPM Package Manager)
We’re going to need the npm package manager to make sure that we have everything properly setup. Navigate to nodejs.org and download the latest version of Node (LTS). You can verify that you have node installed by typing in node -v and you can verify npm installation with npm -v.
我们将需要npm软件包管理器来确保正确设置了所有内容。 导航到nodejs.org并下载最新版本的Node(LTS)。 您可以通过输入node -v来验证是否已安装节点，并且可以使用npm -v来验证npm的安装。
Laravel安装程序 (Laravel Installer)
Back to Laravel Documentation. The next step the documentation states is for us to install the laravel installer. We do this by running the command:
返回Laravel文档。 文档指出的下一步是让我们安装laravel安装程序。 我们通过运行以下命令来执行此操作：
composer global require laravel/installerOnce the installation is complete, run laravel -v to see the version of the laravel command line utility. If you don’t see a version, you’re going to have to carefully re-read the article from the beginning and verify that you have the latest version of everything that was outlined.
安装完成后，运行laravel -v以查看laravel命令行实用程序的版本。 如果看不到版本，则必须从头开始仔细地重新阅读该文章，并确认您具有所概述的所有内容的最新版本。
创建Laravel项目 (Create the Laravel Project)
The documentation states that we’re ready to create our laravel project by typing in laravel new project_name. Navigate to your web directory, such as C:/wamp/www. Once you are in the correct folder in your terminal, run:
文档指出，我们已经准备好通过输入laravel new project_name来创建laravel项目。 导航到您的Web目录，例如C：/ wamp / www。 一旦进入终端的正确文件夹，请运行：
C:\wamp64\www>laravel new blogI chose blog as the project name since that’s what Laravel recommends in its documentation. You can do whatever project name that you want. This might take some time.
我选择博客作为项目名称，因为那是Laravel在其文档中推荐的名称。 您可以执行所需的任何项目名称。 这可能需要一些时间。
Once everything is complete, you can verify that everything was installed correctly by launching the default home page.
完成所有操作后，您可以通过启动默认主页来验证所有安装是否正确。
CD into the newly created project: cd blog. Laravel comes with its own test server that you can launch by running the command php artisan serve. Artisan is a utility that gets installed by Laravel and is located inside of the root directory of your laravel project; that is why we had to cd into the blog directory first.
CD进入新创建的项目： cd博客。 Laravel带有自己的测试服务器，您可以通过运行php artisan serve命令启动它。 Artisan是由Laravel安装的实用程序，位于laravel项目的根目录中。 这就是为什么我们必须用cd命令进入博客目录第一。
C:\wamp64\www>cd blog
C:\wamp64\www\blog>php artisan serveLaravel development server started: http://127.0.0.1:8000 [Sun Aug 23 11:08:31 2020] PHP 7.4.0 Development Server (http://127.0.0.1:8000) startedNavigate over to 127.0.0.1:8000 to see your Laravel home page.
导航至127.0.0.1:8000以查看您的Laravel主页。
If you see the page above, congratulations, you’ve installed Laravel successfully.
如果您看到上面的页面，那么恭喜，您已经成功安装了Laravel。
If you have WAMP server running on your computer, you can navigate over to your project, which for me was at http://localhost/blog, click on the public folder, and see the exact same page: http://localhost/blog/public. So, if you don’t want to use php artisan serve, you don’t necessarily have to right now.
如果你有WAMP服务器计算机上运行，你可以浏览到您的项目，这对我来说是在http：//本地主机/博客 ，点击公用文件夹 ，并看到完全一样的页面：http：//本地主机/博客/公共 。 因此，如果您不想使用php artisan服务，则不必一定要立即进行。
在IDE中打开Laravel项目 (Open Laravel Project in your IDE)
Open the blog folder in your IDE (I’ll be using VS Code for now). You will see all of the different folders and files that were installed when you ran the laravel new blog command.
在您的IDE中打开Blog文件夹(我现在将使用VS Code)。 当您运行laravel new Blog命令时，将看到安装的所有不同文件夹和文件。
If you’re here just for Laravel, you can stop right here and wait for the next article on Laravel. If you’re interested in using React for front-end, then continue on.
如果您仅是Laravel的来宾，则可以在这里停下来，等待下一篇有关Laravel的文章。 如果您有兴趣将React用于前端，请继续。
React脚手架 (React Scaffolding)
Navigate to Laravel Documentation and click on Frontend -> Frontend Scaffolding: https://laravel.com/docs/7.x/frontend.
导航到Laravel文档，然后单击Frontend-> Frontend Scaffolding： https ://laravel.com/docs/7.x/frontend。
The first step states that we’re going to need the laravel/ui. If you’re running the command php artisan serve, press CTRL+C to terminate the test server. Paste the following command into your terminal:
第一步说明我们将需要laravel / ui。 如果您正在运行php artisan serve命令，请按CTRL + C终止测试服务器。 将以下命令粘贴到您的终端中：
C:\wamp64\www\blog>composer require laravel/uiOnce the installation is complete, we need to generate the basic React scaffolding by pasting in the following command: php artisan ui react.
安装完成后，我们需要通过粘贴以下命令来生成基本的React支架： php artisan ui react。
C:\wamp64\www\blog>php artisan ui react
React scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding.Upon installation, we’re notified that we need to run npm install && npm run dev. So let’s go ahead and do that: npm install is done to download all of the necessary packages and dependencies; npm run dev is run to compile any existing JavaScript code, which is the React code that was just generated.
安装完成后，我们收到通知，我们需要运行npm install && npm run dev 。 因此，让我们继续这样做：完成npm install以下载所有必需的软件包和依赖项； 运行npm run dev来编译任何现有JavaScript代码，这就是刚刚生成的React代码。
C:\wamp64\www\blog>npm install && npm run devDONE Compiled successfully in 5546ms 11:28:10 AM Asset Size Chunks Chunk Names /css/app.css 178 KiB /js/app [emitted] /js/app /js/app.js 1.99 MiB /js/app [emitted] /js/appIf we return to our IDE, we can see that some files were modified and new files were added.
如果返回到IDE，则可以看到已修改了一些文件，并添加了新文件。
resources/js/app.js : The line require(‘./components/Example’) was added. It’s going to be importing the Example component.
resources / js / app.js：添加了require('./ components / Example')行 。 将要导入Example组件。
resources/js/components/Example.js : the React component that was added. It just contains a functional React component named Example. That component is being exported and should be rendered at the example element id, which currently does not exist.
resources / js / components / Example.js：添加的React组件。 它仅包含一个名为Example的功能性React组件。 该组件正在导出，应该以示例元素ID呈现，该元素ID目前不存在。
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
Example Component
I'm an example component!
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(If we run php artisan serve, the server starts, but nothing changes. We’ll have to make a few more changes ourselves.
如果我们运行php artisan serve ，服务器将启动，但是没有任何变化。 我们将不得不自己进行一些更改。
If we open the routes file, web.php, we’ll see that it’s calling the welcome.blade.php file. The welcome file has no reference to the example id.
如果打开路由文件web.php ，我们将看到它正在调用welcome.blade.php文件。 欢迎文件没有参考示例 ID。
Laravel
We’ll delete everything inside of the and the