实践100个React应用程序挑战〜01 你好，世界〜

2 年 ago
雅, 悟
1 minute

首先

这篇文章是我参与@Sicut_study的【React应用100本挑战】系列并进行输出的一篇文章。

    • 実装ルールや成果物の達成条件は元記事に従うものとします。

 

    元記事との差別点として、具体的に自分がどんな実装を行ったのか（と必要に応じて解説）を記載します。

我打算跟随Sicut_study学习100个React项目，目标是在100天内掌握React。

这篇原文的链接在这里。

 

有什么困扰吗？

创建”Hello World”的React组件。

规则

从原文中引用

    • 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由

 

    TypeScriptを利用する

达成条件

从原文引用

    1. React的新项目已正确设置。

 

    屏幕上显示了居中的文本“Hello World”。

进行实施

npx create-react-app my-hello-world-app --template typescript
cd my-hello-world-app

创建并移动项目。

npm install @emotion/react @emotion/styled

将情感添加进来，并准备好布局的实施（可以考虑使用普通的CSS文件来实现）。

之后在App.tsx中进行实现，完成。

/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";
import React from "react";

// スタイルの定義
const AppWrapper = styled.div`
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const HelloWorld = styled.p`
  font-size: 2rem;
  color: blue;
`;

const App = () => {
  return (
    <AppWrapper>
      <HelloWorld>Hello World</HelloWorld>
    </AppWrapper>
  );
};

export default App;

或者，我认为也可以这样写。

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React from 'react';

// スタイルの定義
const appStyle = css`
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const textStyle = css`
  font-size: 2rem;
  color: blue;
`;

const App = () => {
  return (
    <div css={appStyle}>
      <p css={textStyle}>Hello World</p>
    </div>
  );
}

export default App;

做完

npm start

我会检查屏幕。

完成.png

听起来不错。

in Chinese: 最后

我打算完成 React 应用的 100 个挑战，要进行 100 轮。
希望能得到支持的朋友，请务必关注我。
期待你们的点赞和分享。

再见。

下一篇文章

 

bannerAds