构建一个react项目

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

开发人员每天都面临着构建复杂产品的挑战。 建立这些产品功能所需的时间受到限制。

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

工程和产品经理希望每天都超过项目的截止日期。 首席执行官们希望尽快推出新产品。 企业家需要像昨天一样的MVP。 考虑到这一点，开发人员应该怎么做？

In this tutorial, we’ll quickly build out a Mini Netflix in 10 minutes. In fact, I think we might build it less time.

在本教程中，我们将在10分钟内快速构建一个Mini Netflix 。 实际上，我认为我们可以减少构建时间。

( )

An excited entrepreneur just approached you to build a video service. A service where users can quickly upload short videos and share on twitter for their friends to view. Let’s list out the features of this app.

一位激动的企业家刚刚与您建立视频服务。 用户可以快速上传短视频并在Twitter上分享以供其朋友查看的服务。 让我们列出这个应用程序的功能。

*Features *

* 功能*

• Users should be able to sign up and log in.
  用户应该能够注册并登录。
• Registered/Logged-in users should be able to upload short videos of about 20 - 30 seconds.
  注册/登录用户应该能够上传大约20-30秒的短视频。
• Registered/Non-registered users should be able to view all uploaded videos on the platform on a dashboard.
  注册/未注册用户应该能够在仪表板上的平台上查看所有上传的视频。
• Users should be able to share any of the videos on twitter.
  用户应该可以在Twitter上分享任何视频。

Now, here’s the catch! T’challa of Wakanda wants to invest in some startups today, so the entrepreneur needs to demo the MVP of the video service in 10 minutes from now.

现在，这就是要抓住的地方！ Wakanda的 T'challa今天想投资一些初创公司，因此企业家需要在10分钟后演示视频服务的MVP。

I know you are screaming your heart right now. It’s totally okay to cry and let the world know about your problems and challenges, but after much ado shedding tears, will the app be ready in 8 minutes? Well, sorry - tears can’t build an app!

我知道您现在在尖叫自己的心。 哭泣并让世界知道您的问题和挑战完全可以，但是经过一番流泪，该应用程序将在8分钟内准备就绪吗？ 好吧，对不起-眼泪无法建立一个应用程序！

( )

It’s possible to build the MVP our entrepreneur is asking for. Let me show you how! Ready your editor, your command line and anxious fingers. Let’s get to work!!!

可以建立我们的企业家要求的MVP。 让我告诉你怎么做！ 准备好您的编辑器，命令行和急切的手指。 让我们开始工作吧！！！

( )

We’ll use React to build out the app. Facebook has a tool, create-react-app that can scaffold a progressive web app out of the box in less than a minute. If you don’t have it installed, please install and run the command below in your terminal:

我们将使用React构建应用程序。 Facebook有一个名为create-react-app的工具，可以在不到一分钟的时间内立即安装一个渐进式Web应用程序。 如果您尚未安装，请在终端中安装并运行以下命令：

create-react-app miniflixcd miniflix

Go ahead and open up public/index.html. Pull in bootstrap and add it just after the link to the favicon.

继续并打开public/index.html 。 插入引导程序并将其添加到链接图标的链接之后。

…
    …

( )

Go ahead and install the following packages from your terminal:

继续并从终端安装以下软件包：

npm install auth0-js react-router@3.0.0 jwt-decode axios

auth0-js - For authentication react-router - For routing within our app jwt-decode - For decoding the JSON Web Token in our app axios - For making network requests.

auth0-js-用于身份验证react-router-用于在我们的应用程序中进行路由jwt-decode-用于在我们的应用程序axios中解码JSON Web令牌-用于发出网络请求。

Open up your src directory and create a components and utils folder. In the utils folder, create a file, AuthService.js and add the code to it., so check it out to ensure you are on the right track.

打开您的src目录并创建一个components和utils文件夹。 在utils文件夹中，创建一个文件AuthService.js并将的代码添加到其中。 ，因此请进行检查以确保您走上正确的道路。

We’ll create 4 components in the components folder. Callback.js, Display.js, Nav.js and Upload.js

我们将在components文件夹中创建4个组件。 Callback.js ， Display.js ， Nav.js和Upload.js

The Callback component basically stores our authentication credentials and redirects back to the upload route in our app.

回调组件基本上存储了我们的身份验证凭据，并重定向回我们应用程序中的上传路由。

The Display component will be dashboard for viewing all videos.

显示组件将是用于查看所有视频的仪表板。

The *Nav *component will be the navigation that all pages in the app will share.

* 导航*组件将是应用程序中所有页面将共享的导航。

The Upload component will handle uploading of videos by registered users.

上载组件将处理注册用户上载的视频。

Add this piece of code below to components/Callback.js :

将以下这段代码添加到components / Callback.js ：

import {
     Component } from 'react';import {
     setIdToken, setAccessToken } from '../utils/AuthService';class Callback extends Component {
      componentDidMount() {
        setAccessToken();    setIdToken();    window.location.href = "/";  }  render() {
        return null;  }}export default Callback;

Add this piece of code to components/Nav.js :

将这段代码添加到components / Nav.js ：

import React, {
     Component } from 'react';import {
     Link } from 'react-router';import {
     login, logout, isLoggedIn } from '../utils/AuthService';import '../App.css';class Nav extends Component {
      render() {
        return (      
        );  }}export default Nav;

In the Nav component, you must have observed that we imported a css file. Open the App.css file and add this code to it.

在Nav组件中，您必须已经观察到我们导入了一个CSS文件。 打开App.css文件，然后添加此代码。

Add this piece of code to components/Display.js:

将这段代码添加到components / Display.js ：

import React, {
     Component } from 'react';import {
     Link } from 'react-router';import Nav from './Nav';import {
     isLoggedIn } from '../utils/AuthService';import axios from 'axios';class Display extends Component {
      render() {
        return (      
    
        
             
     
 Latest Videos on Miniflix 
        
     
        
     
        
     
      
    
    );  }}export default Display;

Add this piece of code to components/Upload.js:

将这段代码添加到components / Upload.js ：

import React, {
     Component } from 'react';import {
     Link } from 'react-router';import Nav from './Nav';class Upload extends Component {
      render() {
        return (      
    
        
             
     
Upload Your 20-second Video in a Jiffy
        
     
        
     
          
      
            
        Upload Video          
      
        
     
      
    
    );  }}export default Upload;

Lastly, open up index.js and add replace it with the code to set up your routes.

最后，打开index.js并在添加替换代码以设置路由。

Now, when you run your app with npm start, you should have views like this:

现在，当您使用npm start运行应用npm start ，您应该具有以下视图：

( )

We need a storage space for the videos our users will upload. Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, administration, manipulation and delivery. Head over to and create an account for free.

我们需要一个存储空间来存储用户要上传的视频。 Cloudinary是一项基于云的服务，可提供端到端的图像和视频管理解决方案，包括上传，存储，管理，操纵和交付。 前往并免费创建一个帐户。

Let’s make use of . This widget allows you to upload videos or any type of file from your local computer, facebook, dropbox and Google Photos. Wow, very powerful. And the integration is seamless.

让我们利用 。 此小部件可让您从本地计算机，facebook，dropbox和Google相册上传视频或任何类型的文件。 哇，非常强大。 而且集成是无缝的。

Go ahead and reference the cloudinary widget script in your index.html:

继续并在index.html中引用cloudinary小部件脚本：

Note: You can add it just after the links.

注意 ：您可以在链接之后添加它。

Now in Upload.js, modify the code to look like this:

现在在Upload.js中，将代码修改为如下所示：

import React, {
     Component } from 'react';import {
     Link } from 'react-router';import Nav from './Nav';class Upload extends Component {
      uploadWidget = () => {
        window.cloudinary.openUploadWidget(      {
     cloud_name: 'cloud_name',        upload_preset: '
    
     ',        tags: ['miniflix'],        sources: ['local', 'url', 'google_photos', 'facebook', 'image_search']      },      function(error, result) {
              console.log("This is the result of the last upload", result);      });  }  render() {
        return (      
     
        
              
      
Upload Your 20-second Video in a Jiffy
        
      
        
      
          
       
            
         Upload Video          
       
        
      
      
     
    );  }}export default Upload;
    

In the code above, we added a third argument, tags. Cloudinary provides this for automatic video tagging. Every video that is uploaded to this app will be automatically tagged, miniflix. In addition, you can provide as many tags as you want. This feature is very useful when you want to search for videos too!

在上面的代码中，我们添加了第三个参数tag 。 Cloudinary为此提供了自动视频标记。 上传到此应用的每个视频都将被自动标记为miniflix 。 此外，您可以根据需要提供任意数量的标签。 当您也想搜索视频时，此功能非常有用！

In the uploadWidget function, we called the cloudinary.openUploadWidget function and attached it to the “Upload Video” button. When the user clicks the button, it opens the widget. Replace the cloud_name & upload_preset values with your credentials from .

在uploadWidget函数中，我们调用了cloudinary.openUploadWidget函数，并将其附加到“上传视频”按钮上。 当用户单击按钮时，它将打开小部件。 使用的凭据替换cloud_name和upload_preset值。

Sign in to your app, head over to the upload videos route and try uploading a video.

登录您的应用，转到上传视频路线，然后尝试上传视频。

It uploads the video straight to Cloudinary and returns a response object about the recently uploaded video that contains so many parameters such as the unique publicid, secureurl, url, originalfilename, thumbnailurl, createdat, duration and .

它将视频直接上传到Cloudinary，并返回有关最近上传的视频的响应对象，该对象包含许多参数，例如唯一的publicid，secureurl，url，originalfilename，thumbnailurl，createdat，duration 。

( )

We need a dashboard to display all the videos uploaded for users to see at a glance. Here, we will make use of . Install it:

我们需要一个仪表板来显示所有上传的视频，以便用户一目了然。 在这里，我们将使用 。 安装它：

npm install cloudinary-react

Now, open up components/Display.js and modify the code to be this below:

现在，打开components / Display.js并将其修改为以下代码：

import React, {
     Component } from 'react';import {
     Link } from 'react-router';import Nav from './Nav';import {
     isLoggedIn } from '../utils/AuthService';import {
     CloudinaryContext, Transformation, Video } from 'cloudinary-react';import axios from 'axios';class Display extends Component {
      state = {
     videos: [] };  getVideos() {
        axios.get('http://res.cloudinary.com/unicodeveloper/video/list/miniflix.json')          .then(res => {
                console.log(res.data.resources);            this.setState({
     videos: res.data.resources});    });  }  componentDidMount() {
        this.getVideos();  }  render() {
        const {
     videos }  = this.state;    return (      
    
        
             
     
 Latest Videos on Miniflix 
        
     
        
     
          
      
                   {
     videos.map((data, index) => (                
       
                  
        
                    
                           
        
                  
        
          Created at {
    data.created_at} 
        
                
       
              ))            }          
              
     
      
    
    );  }}export default Display;

In the getVideos code above, we take advantage of a very slick Cloudinary trick that helps grab all videos with a particular tag, when using just one tag. Check it out again:

在上面的getVideos代码中，我们利用了一个非常巧妙的Cloudinary技巧，可以在仅使用一个标签的情况下帮助抓取带有特定标签的所有视频。 再次检查：

http://res.cloudinary.com/unicodeveloper/video/list/miniflix.json

So we if had a tag like vimeo, our url will end up with .../vimeo.json. So in the code below, we got all the videos and stored in the videos state.

所以，我们如果有类似这样的标记vimeo ，我们的网址将结束与... / vimeo.json。 因此，在下面的代码中，我们获取了所有视频并存储在视频状态中。

axios.get('http://res.cloudinary.com/unicodeveloper/video/list/miniflix.json')          .then(res => {
                console.log(res.data.resources);            this.setState({
     videos: res.data.resources});    });

The Cloudinary React SDK has 4 major components:** Image, **Video, Transformation and CloudinaryContext. We are interested in the Video and CloudinaryContext for now. explained .

Cloudinary React SDK具有4个主要组件：**图像，**视频 ， 转换和CloudinaryContext 。 我们目前对Video和CloudinaryContext感兴趣。 解释 。

In the render method, we simply just looped through the videos state and passed the public_id of each video into the Cloudinary Video component. The Video component does the job of resolving the public_id from Cloudinary, getting the video url, and displaying it using HTML5 video on the webpage. An added advantage is this: Cloudinary automatically determines the best video type for your browser. Furthermore, it allows the user have the best experience possible by choosing the best from the range of available video types and resolutions.

在render方法中，我们只是简单地遍历了视频状态，然后将每个视频的public_id传递给Cloudinary Video组件。 视频组件负责从Cloudinary解析public_id，获取视频URL，并使用HTML5视频在网页上显示它。 这样做还有一个好处：Cloudinary自动为您的浏览器确定最佳的视频类型。 此外，通过从可用视频类型和分辨率范围内选择最佳视频，可以使用户获得最佳体验。

Run your app, and try to see the list of all videos. It should be similar to this:

运行您的应用，然后尝试查看所有视频的列表。 它应与此类似：

You can also manipulate your videos on the fly, with the help of Cloudinary via the Transformation component.

您还可以在Cloudinary的帮助下，通过Transformation组件即时操作视频。

( )

Go ahead install the react twitter widget component:

继续安装react twitter小部件组件：

npm install react-twitter-widgets

In the components/Display.js file, import the component at the top:

在components / Display.js文件中，在顶部导入组件：

import {
     Share } from 'react-twitter-widgets'……

Now, add this piece of code just after the div that shows the time the video was created.

现在，在显示视频创建时间的div之后添加这段代码。

……
    

Check your app again. It should be similar to this:

再次检查您的应用。 它应与此类似：

Now, try to tweet.

现在，尝试发推。

Simple! It’s really not that hard. The source code for this tutorial is on .

简单！ 其实并不难。 本教程的源代码位于 。

( )

Our MVP is ready. Our entrepreneur. Now sit back, relax and watch your account become flooded with investor money! Wait a minute, there is a 90% probability that you’ll called to add more features to this app. Well, I think Cloudinary can still help you with more features such as:

我们的MVP已准备就绪。 我们的企业家。 现在坐下来，放松一下，看看您的帐户充斥着投资者的钱！ 请稍等，有90％的可能性会要求您向此应用添加更多功能。 好吧，我认为Cloudinary仍然可以为您提供更多功能，例如：

• Automatic Subtitles and translation
  自动字幕和翻译
• Video briefs - short video, based on few gif images that will extract from the uploaded video.
  视频摘要-简短的视频，基于少量gif图片，这些图片将从上传的视频中提取。
• Automatic and/or manual video markers - marking specific locations in the video so the user can wait patiently to watch them, or jump directly to these points
  自动和/或手动视频标记-在视频中标记特定位置，以便用户可以耐心等待观看它们，或直接跳到这些点
• Find Similar videos by automatic video tagging
  通过自动视频标记查找相似视频

Cloudinary provides many options for uploading, transforming and optimizing your videos. Feel free to .

Cloudinary提供了许多用于上传，转换和优化视频的选项。 随时 。

翻译自:

构建一个react项目