Laravel 7.x — P1：使用React和react-router进行安装

最新推荐文章于 2024-03-28 09:43:54 发布

weixin_26738395

最新推荐文章于 2024-03-28 09:43:54 发布

阅读量449

点赞数

文章标签： python laravel react

原文链接：https://medium.com/dev-genius/laravel-7-x-p1-installation-with-react-and-react-router-7713f4748b6f

版权

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 Technologies

PHP 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:19

If 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/installer

Once 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 blog

I 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) started

Navigate 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/ui

Once 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/app

If 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 (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>


                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}


export default Example;


if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

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。

<?php


// routes/web.php


Route::get('/', function () {
    return view('welcome');
});

<?php 
// resources/views/welcome.blade.php
?>


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <title>Laravel</title>


        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">


        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }


            .full-height {
                height: 100vh;
            }


            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }


            .position-ref {
                position: relative;
            }


            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }


            .content {
                text-align: center;
            }


            .title {
                font-size: 84px;
            }


            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }


            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>


                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif


            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>


                <div class="links">
                    <a href="https://laravel.com/docs">Docs</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>
</html>

We’ll delete everything inside of the <body> and the <style> tags. It’s unnecessary. Inside of the <body> tag, we’ll need to add two lines. The first line tells React where to insert the Example component. Inside of Example.js, we saw that it was looking for the example id.

我们将删除<body>和<style>标记内的所有内容。没必要在<body>标记内，我们需要添加两行。第一行告诉React在哪里插入Example组件。在Example.js内部，我们看到它正在寻找示例 ID。

<div id="example"></div>

We also need to include the React component. Remember the app.js file that we looked at earlier? It included Example. So, let’s include app.js in our welcome.blade.php file.

我们还需要包含React组件。还记得我们之前看过的app.js文件吗？它包括Example 。因此，让我们将app.js包含在我们的welcome.blade.php文件中。

<script src="{{ asset('js/app.js') }}"></script>

Don’t worry about the syntax just yet: we’ll cover all of that in future articles.

现在不必担心语法：我们将在以后的文章中介绍所有这些内容。

<?php 
// resources/views/welcome.blade.php
?>


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <title>Laravel</title>
    </head>
    <body>
        
        <div id="example"></div>
        <script src="{{ asset('js/app.js') }}"></script>


    </body>
</html>

If we run php artisan serve and open the page now, we’ll get the following:

如果我们运行php artisan serve并立即打开页面，则会得到以下信息：

Example ComponentI’m an example component!

示例组件我是一个示例组件！

That is what the Example component generates. Congratulations. React has been installed.

这就是Example组件生成的。恭喜你已安装React。

在React组件中进行更改 (Making Changes in React Component)

Let’s modify the Example component. We’ll change the inner portion to say This is a sample React component.

让我们修改示例组件。我们将内部更改为“ 这是一个示例React组件”。

import React from 'react';
import ReactDOM from 'react-dom';


function Example() {
    return (
        <div className="container">
            This is a sample React component
        </div>
    );
}


export default Example;


if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

If we saved the file resources/js/components/Example.js, and refreshed the page, the changes would not be displayed. In order for the changes to be displayed, we have to run npm run dev to recompile the JavaScript code. Once you run that command, run php artisan serve again to see your changes. Your page will say This is a sample React component.

如果我们保存文件resources / js / components / Example.js并刷新页面，则更改将不会显示。为了显示更改，我们必须运行npm run dev来重新编译JavaScript代码。一旦运行该命令，请再次运行php artisan serve来查看您的更改。您的页面会说这是一个示例React组件。

Does that mean that you have to type in npm run dev every single time that a change is made? If that’s the only command you knew, then yes. But, there is another command that you can run: npm run watch. The watch command watches for any kind of JavaScript changes and re-compiles the code automatically.

这是否意味着您每次更改都要输入npm run dev ？如果那是您知道的唯一命令，那么可以。但是，还有另一个命令可以运行： npm run watch 。 watch命令监视任何类型JavaScript更改并自动重新编译代码。

When you run the command npm run watch, the command never actually finishes, so you will have to open a new terminal window to run php artisan serve in conjunction.

当您运行命令npm run watch时 ，该命令实际上不会完成，因此您将不得不打开一个新的终端窗口来结合运行php artisan serve 。

Each time you make a change in your React code, it will automatically update.

每次您更改React代码时，它都会自动更新。

清理React脚手架 (Cleaning up React Scaffolding)

You most likely don’t want to keep your component called Example. I like to rename mine to App. Open resources/js/components/Example.js and change all instances of Example to App. I normally change all example id references to root.

您很可能不想让您的组件称为Example 。我喜欢将我的名字重命名为App 。打开resources / js / components / Example.js并将所有Example实例更改为App 。我通常将所有示例 id引用更改为root 。

import React from 'react';
import ReactDOM from 'react-dom';


function App() {
    return (
        <div className="container">
            This is a sample React component
        </div>
    );
}


export default App;


if (document.getElementById('root')) {
    ReactDOM.render(<App />, document.getElementById('root'));
}

I’ll then change the file name from resources/js/components/Example.js to resources/js/components/App.js.

然后，我将文件名从resources / js / components / Example.js更改为resources / js / components / App.js。

The file resources/js/app.js is requiring ./components/Example, which doesn’t exist any more, so we’ll have to modify that to require(‘./components/App’).

文件resources / js / app.js 需要./components/Example ，该文件已不存在，因此我们必须将其修改为require('./ components / App')。

I’ll then rename the resources/views/welcome.blade.php file to resources/views/app.blade.php. We need to modify the id inside of it from example to root.

然后，我将resources / views / welcome.blade.php文件重命名为resources / views / app.blade.php 。我们需要将其中的id从example修改为root 。

Finally, our routes/web.php route file is looking for welcome.blade.php, which we just renamed to app.blade.php. We have to change that too.

最后，我们的route / web.php路由文件正在寻找welcome.blade.php ，我们刚刚将其重命名为app.blade.php 。我们也必须改变它。

Restart your npm run watch and php artisan serve to verify that everything is still functioning properly.

重新启动您的npm run watch和php artisan，以验证一切仍正常运行。

React路由器 (React Router)

We just need to change our route handling from Laravel to react-router; we don’t want to be dependent on routes/web.php.

我们只需要将我们的路由处理从Laravel更改为react-router即可 ；我们不想依赖routes / web.php 。

Open web.php and replace the existing code with the following code:

打开web.php并将现有代码替换为以下代码：

<?php


Route::view('/{path?}', 'app');

All it says is that for any path, we want to load the app.blade.php view. The app view will load the React component, which will handle all of the routes. We’re not going to be covering how to use the react-router now, but we will be going through the setup.

它的意思是，对于任何路径，我们都希望加载app.blade.php视图。 应用程序视图将加载React组件，该组件将处理所有路由。我们现在不会讨论如何使用react-router，但是将进行设置。

Stop npm run watch and php artisan serve (CTRL+C). In your project root directory, run the following command:

停止npm run watch和php artisan服务 (CTRL + C) 。在项目根目录中，运行以下命令：

C:\wamp64\www\blog>npm install react-router-dom

That’s it. React Router is installed and you can use it just like you would with your React application. Here’s a quick example of the React Router in action so that you can progress from there.

而已。 React Router已安装，您可以像在React应用程序中一样使用它。这是一个运行中的React Router的快速示例，因此您可以从那里继续前进。

<Router>
  <Switch>
    <Route path="/" 
           exact 
           render={(props) => <Main {...props} title="Dino Cajic | Software Engineer" changeHeader={() => this.changeHeader(true)} />}
    />


    <Route 
        path="/portfolio/:id" 
        render={(props) => <Portfolio {...props} title="Portfolio Item | Dino Cajic" changeHeader={() => this.changeHeader(false)} />}
    />
  </Switch>
</Router>

We’ll be looking at all of these concepts, and many more, in later articles. See you then.

我们将在以后的文章中讨论所有这些概念，以及更多其他概念。回头见。

演示地址

翻译自: https://medium.com/dev-genius/laravel-7-x-p1-installation-with-react-and-react-router-7713f4748b6f

weixin_26738395

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Laravel 7.x — P1：使用React和react-router进行安装

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 b...
复制链接

扫一扫