对React的基础1进行概述

2 年 ago
宇, 华
4 minutes

React是一個專門用於創建用戶界面（UI）的JavaScript套件。

环境建设

我在Windows上安装了node.js。我使用vscode作为编辑器，在vscode上运行命令提示符来进行操作。请参阅以下文章以获取更详细信息。

 

在终端上

npm install -g create-react-app
create-react-app tutorial

我会创建一个名为tutorial的目录，并在其中输入react以使用它，然后在这个目录里进行演示。

只需要按照以下文章的方式进行操作，您也可以设置插值功能。

 

执行

在终端上

npm start

当你输入这个命令时，浏览器会自动打开并在本地主机上输出。另外，通常情况下，当你重新编写代码时，需要先使用Ctrl+C中断程序，然后重新启动。但是，React有一个热加载功能，可以在保存更改的代码后，自动将更改反映到浏览器中。

在控制台上进行确认。

console.log('comment');

在浏览器控制台中输出。例如，在使用Edge浏览器时，按下Ctrl+Shift+I打开开发者工具，然后可以通过控制台选项卡进行确认。

你好，世界！

首先，我們試著在畫面上顯示「Hello World!」。我認為在tutorial/src的文件夾中，應該會有一個名為index.js的檔案。這個檔案就是輸出到瀏覽器的源代碼。

我会将其改写为以下方式。

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <h1>Hello world!</h1>
);

然后，浏览器会显示出下一个页面。

image.png

实际上，在tutorial/public/index.html中

:
:
<div id="root"></div>
:
:

有一个描述，并且是在index.js内部。

const root = ReactDOM.createRoot(document.getElementById('root'));

通过这个方法，index.html中的这一部分与index.js文件中的名为”root”的对象相关联。

并且是在index.js的第二行

root.render(
    <h1>Hello world!</h1>
);

所以，参数中写下的内容是

<div id="root"></div>

会在…中得到反映。

以列表的形式呈現

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
);
image.png

组件化

将长长的HTML文件以纯文本方式编写，会变得非常杂乱无章。因此，通过将内容移到外部并从其他文件中进行读取，可以使页面看起来更整洁。此外，当多人共同分工时，将代码分割并进行工作会更方便。

首先，让我们从如何将其带到外面开始看。

可能的中国文本：虽然将HTML文件的内容传递给变量可能会感到有些不自然，但可以将其显示如下。

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

const page = <div>
  <h1 className='header'>This is JSX</h1>
  <p>This is a paragraph</p>
</div>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(page);

输出结果：

image.png

外部给出的内容被称为JSX，它是外部给出内容的组件。如果JSX中有多个内容的话，一定要。

<div>   </div>

请将它们用中文括起来并整合成一个选项。

展示图像

使用了将tutorial/public/logo192.png复制到tutorial/src/react-logo.png的图像。

import React from 'react';
import ReactDOM from 'react-dom/client';
import logo from "./react-logo.png"//画像の情報の読み込み

const page = (
<div>
    <img src={logo} className="App-logo" alt="logo" />//画像の表示
    <h1>Fun fact about React</h1>
</div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(page);

输出结果：

image.png

作为函数的组件

通常情况下，JSX对象是通过函数返回值来获取，而不是直接在全局变量中定义。同时，需要注意的是函数名必须以大写字母开头。

import React from 'react';
import ReactDOM from 'react-dom/client';
import logo from "./react-logo.png"

function Logopage(){
  return  (
    <div>
    <img src={logo} className="App-logo" alt="logo" />
      <h1>Fun fact about React</h1>
    </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
//<関数名/>で関数の返り値のJSXを反映させる
root.render(
    <Logopage/>
);

将其分为多个组件

import React from 'react';
import ReactDOM from 'react-dom/client';
import logo from "./react-logo.png"

function Header(){
  return(
    <header>
      <img src={logo} className="App-logo" alt="logo" />
    </header>
  );
};

function MainContent(){
  return (
    <div>
        <h1>Reasons I'm excited to learn React</h1>
        <ol>
            <li>It's a popular library, so I'll be 
            able to fit in with the cool kids!</li>
            <li>I'm more likely to get a job as a developer
            if I know React</li>
        </ol>
    </div>
  );
};

function Logopage(){
  return  (
    <div>
      <Header/>
      <MainContent/>
    </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Logopage/>);

文件分割

我希望将之前的Hello World代码中显示 “Hello World!” 的部分分割到另一个名为App.js的文件中。

import React from 'react';
import ReactDOM from 'react-dom/client';
    import App from './App';//App.jsから関数Appを読み込む

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />//Appの中身を反映したコンポーネント
);

import React from 'react';

function App() {
  return(
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
};

export default App;//関数Appを他のファイルから読み込めるようにする。

这样，将以与之前相同的方式输出Hello World！顺便提一下，将使用index.js。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>//追加部分
    <App />
  </React.StrictMode>//追加部分
);

如果这样做的话，即使是微小的错误或故障也会被检测为错误。index.js将使用它来基本上修改App.js的内容以执行各种操作。

加载CSS文件

在className的部分，您可以设置自己创建的绘制样式。写有设置内容的文件称为CSS文件。

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

import logo from './react-logo.png'
import './style.css'//cssファイルの読み込み


function Header(){
    return(
      <header>
        <img src={logo} className="nav-logo" alt="logo" />//styel.cssファイルで設定したものを使った
        <ul className='nav-items'>//styel.cssファイルで設定したものを使った
          <li>Pricing</li>
          <li>about</li>
          <li>list</li>
        </ul>
      </header>
    );
  };

function MainContent(){
  return (
    <div>
        <h1>Reasons I'm excited to learn React</h1>
        <ol>
            <li>It's a popular library, so I'll be 
            able to fit in with the cool kids!</li>
            <li>I'm more likely to get a job as a developer
            if I know React</li>
        </ol>
    </div>
  );
};

function Logopage(){
  return  (
    <div>
      <Header/>
      <MainContent/>
    </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Logopage/>);

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

.nav-logo{
    width: 60 px;
}

.nav-items{
    list-style: none;
    display: flex;
}

.nav-items > li{
    padding: 10px;
}

参考文献

    • https://scrimba.com/learn/learnreact

 

    https://ja.reactjs.org/
bannerAds