【React】针对超级初学者的入门指南

2 年 ago
宇, 华
1 minute

React 是什么？

    • ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェースを構築するためのものです。

 

    仮想DOMを使用し、効率的なUIの更新を可能にします。

2. 系統设置

    • 公式サイト > https://ja.legacy.reactjs.org/docs/create-a-new-react-app.html

Node.jsとnpm（またはyarn）をインストールする
Create React Appで新規プロジェクトを作成する

3. 创建React应用

创建项目

npx create-react-app my-react-app

进入项目目录并启动开发服务器。

cd my-react-app
npm start
image.png

4. 创建基本的React组件

my-react-app/
|-- node_modules/
|-- public/
|   |-- index.html
|   |-- favicon.ico
|-- src/
|   |-- index.js
|   |-- App.js
|   |-- App.css
|   |-- components/ ←作成してください
|-- package.json
|-- README.md
|-- ...

打开用适当的编辑器创建的my-react-app，并创建一个函数组件。

import React from "react";

const MyComponents = () => {
  return <div>Hello, React!</div>;
};

export default MyComponents;

5. 组件的渲染 (Component rendering)

我将尝试在App.js中渲染我创建的MyComponents。

import "./App.css";
import MyComponents from "./components/MyComponents";

function App() {
  return (
    <div className="App">
      <MyComponents />
    </div>
  );
}

export default App;
image.png

6. 注意事项

    • JSXではキャメルケースを使用することが多いです（例：className、onClick）

 

    • コンポーネントを小さく、再利用可能に設計する

 

    • npmかyarnかは必ず絞って開発する

今後ライブラリとかインストールするときにnpmとyarnはどちらでもインストール可能な時が多いですが、同じプロジェクト内で混じってしまうとバッティングしてしまうことがあります

7. 总结

    • Reactの基本的な使用法と注意点を理解しました。

 

    これをベースにして、より複雑で実用的なアプリケーションを構築するための学習を進めていきましょう。

这篇文章是为初学者大学生提供的React Next的输出资料。欢迎留下错误、意见等评论！

bannerAds