react 打字机效果_打字稿在10分钟内做出React

react 打字机效果

Make a front-end with react in 10 minutes.

在10分钟内做出React。

When I was kicking off with this stack I had a lot of naive questions that never got answered until I was forced into working on some giant monolithic project for a while.

当我从这个堆栈开始时，我有很多天真的问题，直到我被迫从事某个大型整体项目一段时间后，这些问题才得到解答。

Where do my CSS files go?

我CSS文件在哪里？

How do I modularize things?

如何对事物进行模块化？

What is my repo supposed to look like?

我的仓库应该是什么样的？

I’ll prevent you from having those questions. For this tutorial, install vscode, npm, node, typescript.

我将阻止您提出这些问题。 对于本教程，请安装vscode，npm，node，打字稿。

Navigate to a directory. Type this:

导航到目录。 输入：

npx create-react-app application-name --template typescriptcd application namecode .

Our default repo looks like this.

我们的默认存储库如下所示。

Navigate into the src directory.

导航到src目录。

Look at all that bloatware. Using the npx create react app tool does a lot of nice things for us. It sets up our environment and automatically builds all these files, and by default, it will even set up some testing stuff.

看看所有的膨胀软件。 使用npx create react应用程序工具对我们来说有很多好处。 它设置了我们的环境并自动构建了所有这些文件，默认情况下，它甚至还会设置一些测试内容。

Once we get to this point it is important to take ownership of your project and change it however you want to make it organized. What I’m going to do is delete these files.

一旦达到这一点，重要的是要获得项目的所有权并进行更改，但是要使其组织起来。 我要做的是删除这些文件。

App.css
App.test.tsx
index.css
logo.svg
serviceWorker.ts
setupTests.ts

That stuff is useful, but there are three reasons why we don’t need it.

这些东西很有用，但是有三个原因使我们不需要它。

1. If you don’t know anything about tests you’re probably better off setting them aside until you invest in setting them up properly.
   如果您对测试一无所知，则最好将它们搁置一旁，直到您投资适当地设置它们为止。
2. Tests are mandatory for enterprise projects, but You won’t need any tests (or any other scaling solutions like redux) unless your project grows to a certain point. If your project has less than ~15 components, Redux/tests might cause more trouble than they are worth.
   测试对于企业项目是必不可少的，但是除非您的项目发展到一定程度，否则您将不需要任何测试(或任何其他伸缩解决方案，例如redux)。 如果您的项目少于15个组件，则Redux /测试可能会造成超出其​​价值的麻烦。
3. I like to delete the CSS files because I prefer to organize them differently.
   我喜欢删除CSS文件，因为我喜欢以不同的方式组织它们。

Now, our repo looks like this.

现在，我们的仓库看起来像这样。

Click on App.tsx and delete everything inside of our App.tsx return statement and our logo import until it looks like this.

单击App.tsx并删除App.tsx返回语句和徽标导入中的所有内容，直到看起来像这样。

Navigate into your public directory. It looks like this:

导航到您的公共目录。 看起来像这样：

Delete both of those logo.png files and open up your index.html.

删除这两个logo.png文件，然后打开index.html。

There are a couple of little quality of life things we want to change in our index.html.

我们希望在index.html中改变一些生活质量低下的东西。

This is what your index.html file looks like and I’ve highlighted the things that you should consider.

这就是您的index.html文件的外观，并且我着重强调了您应考虑的事项。

1. Whatever photo/icon is being linked is what will appear on your chrome browser tab
   链接的任何照片/图标都将出现在Chrome浏览器标签上
2. Whatever string is in the content section will show up when you link your website in a lot of major social media locations (like discord) if you don’t change it, it will say “Web site created using create-react-app” when you try to share the link to your new website to your friends. I’d recommend changing it to something sporty like “Taylor’s personal website”
   当您在许多主要的社交媒体位置(例如不和谐)上链接您的网站时，无论内容部分中的字符串是什么，如果您不进行更改，它将显示“使用create-react-app创建的网站”您尝试将新网站的链接分享给您的朋友。 我建议将其更改为类似“ Taylor的个人网站”之类的运动内容
3. Whatever is linked here will show up on IOS devices.
   此处链接的所有内容都会在IOS设备上显示。

4. Whatever is in the tag is what will appear on your chrome browser tab.