reactjs快速如夢_幫助您理解和創建ReactJS應用的快速指南

reactjs快速如夢

此帖子分為2部分 (This Post is divided into 2 parts)

  1. The First Part demonstrates how to create a simple React app using ‘create-react-app’ CLI and explains the project structure.

    第一部分演示了如何使用“ create-react-app” CLI創建簡單的React應用，并說明了項目結構。
  2. The Second Part explains an existing code that I have posted in Github. This code demonstrates the use of components, communication between components, making HTTP calls and React Bootstrap (bootstrap which is written for React).

    第二部分介紹了我在Github中發布的現有代碼。 該代碼演示了組件的使用，組件之間的通信，進行HTTP調用以及React Bootstrap(為React編寫的Bootstrap)。

第1部分 (Part 1)

如果尚未安裝NodeJS，請安裝 (Install NodeJS if not already present)

NodeJS is needed since the Libraries Required for React are downloaded using node package manager ( npm ). Refer to https://nodejs.org/en/ to install NodeJS.

需要NodeJS，因為使用節點包管理器(npm)下載了React所需的庫。 請參閱https://nodejs.org/en/安裝NodeJS。

安裝create-react-app節點軟件包 (Install create-react-app Node Package)

create-react-app node package helps to set up a React project. Install create-react-app node package globally using the following command.

create-react-app節點包有助于建立一個React項目。 使用以下命令全局安裝create-react-app節點程序包。 

npm install -g create-react-app

創建項目 (Create The Project)

The project can be created using create-react-app. Use the following command to create the project.

可以使用create-react-app創建項目。 使用以下命令創建項目。 

npx create-react-app first-react-app

first-react-app is the name of the application. The above command creates a folder called first-react-app which is the project folder. In order to test if everything has been set up properly, go into the project folder and start the application using the following command.

first-react-app是應用程序的名稱。 上面的命令創建一個名為first-react-app的文件夾，它是項目文件夾。 為了測試是否一切都已正確設置，請進入項目文件夾并使用以下命令啟動應用程序。 

cd first-react-app
npm start

Go to your browser and go the following URL localhost:3000You should be able to see that your application is running. The Application will look like this in your browser:

轉到瀏覽器并轉到以下URL localhost：3000，您應該能夠看到您的應用程序正在運行。 該應用程序在您的瀏覽器中將如下所示：

基本文件夾結構介紹 (Basic Folder Structure Explained)

When you created the project, you would have noticed that it created a bunch of files. Here I will list out some of the important files and folders that you should be aware of .

創建項目時，您會注意到它創建了許多文件。 在這里，我將列出您應該注意的一些重要文件和文件夾。

  1. package.json: This File has the list of node dependencies which are needed.

    package.json：此文件包含所需的節點依賴項列表。

  2. public/index.html: When the application starts this is the first page that is loaded. This will be the only html file in the entire application since React is generally Written using JSX which I will cover later. Also, this file has a line of code <div id=”root”></div>. This line is very significant since all the application components are loaded into this div.

    public / index.html：應用程序啟動時，這是加載的第一頁。 這是整個應用程序中唯一的html文件，因為React通常是使用JSX編寫的，我將在稍后介紹。 此外，該文件還有一行代碼<div id =” root”> </ div> 。 這條線是非常顯著，因為所有的應用組件loade d扎成這個div。

  3. src/index.js: This is the javascript file corresponding to index.html. This file has the following line of code which is very significant. ReactDOM.render(<App />, document.getElementById(‘root’));

    src / index.js ：這是與index.html對應的javascript文件。 該文件包含以下非常重要的代碼行。 ReactDOM.render(<App />，document.getElementById('root'));

  4. The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root. This is nothing but the div element present in index.html.

    上面的代碼行告訴我們，必須將App Component(即將覆蓋App Component)加載到id為root的html元素中。 這只是index.html中存在的div元素 。

  5. src/index.css: The CSS file corresponding to index.js.

    src / index.css ：與index.js對應CSS文件。

  6. src/App.js : This is the file for App Component. App Component is the main component in React which acts as a container for all other components.

    src / App.js ：這是應用組件的文件。 App Component是React中的主要組件，它充當所有其他組件的容器。

  7. src/App.css : This is the CSS file corresponding to App Component

    src / App.css ：這是與應用程序組件相對應CSS文件

  8. build: This is the folder where the built files are stored. React Apps can be developed using either JSX, or normal JavaScript itself, but using JSX definitely makes things easier to code for the developer :). But browsers do not understand JSX. So JSX needs to be converted into javascript before deploying. These converted files are stored in the build folder after bundling and minification. In order to see the build folder Run the following command

    build：這是存儲構建文件的文件夾。 可以使用JSX或常規JavaScript本身來開發React Apps，但是使用JSX無疑使開發人員更容易編寫代碼：)。 但是瀏覽器不了解JSX。 因此，在部署之前，需要將JSX轉換為javascript。 捆綁和縮小后，這些轉換后的文件將存儲在build文件夾中。 為了查看構建文件夾，請運行以下命令 

npm run build

創建組件 (Creating Components)

A Component in React does a specific functionality. An Application is nothing but a collection of components. Each component can have multiple child components and the components can communicate with each other.

React中的組件具有特定功能。 應用程序不過是組件的集合。 每個組件可以具有多個子組件，并且這些組件可以相互通信。

Let's create a React Component now.

現在創建一個React組件。

Inside src folder create a file called as FirstComponent.js and copy the following code into FirstComponent.js.

在src文件夾中，創建一個名為FirstComponent.js的文件，并將以下代碼復制到FirstComponent.js中。 

import React, {Component} from 'react';export default class FirstComponent extends Component {constructor(props) {super(props)}render() {const element = (<div>Text from Element</div>)return (<div className="comptext"><h3>First Component</h3>{this.props.displaytext}{element}</div>)}
}

  1. The Component name is FirstComponent which is denoted by the file name as well as in the statement export default class FirstComponent extends Component

    組件名稱是FirstComponent ，它由文件名以及在語句export default class FirstComponent extends Component

  2. The props attribute in the constructor will contain all the parameters which are passed as input to this component.

    構造函數中的props屬性將包含所有作為輸入傳遞到此組件的參數。

  3. render(): The return value of this function is rendered ( displayed ) on the screen. Whenever the render() function is called the Screen is rerendered. This is generally done automatically by the application. The code which looks very similar to html in this function is nothing but JSX.

    render()：此函數的返回值在屏幕上呈現(顯示)。 每當調用render()函數時，都會重新渲染屏幕。 通常，這是由應用程序自動完成的。 在此函數中看起來與html非常相似的代碼不過是JSX。

JSX (JSX)

JSX looks very similar to HTML but has the full power of javascript. Here I will Explain the JSX code and what it is trying to do.

JSX看起來非常類似于HTML，但是具有javascript的全部功能。 在這里，我將解釋JSX代碼及其作用。 

render() {const element = (<div>Text from Element</div>)return (<div className="comptext"><h3>First Component</h3>{this.props.displaytext}{element}</div>)}

The first line const element = (<div>Text from Element</div>) Creates a div element and assigns it to a constant called element. This peculiar Syntax that you see is nothing but JSX.

第一行const element = (<div>Text from Element</div>)創建一個div元素，并將其分配給一個稱為element的常量。 這種奇特的語法，你看到的是荷蘭國際集團使者諾斯但JSX。

Inside the Return statement, you see the following code syntax.

在Return語句內，您將看到以下代碼語法。 

<div className="comptext"><h3>First Component</h3>{this.props.displaytext}{element}
</div>

Here className is used to point to a CSS class. <h3>First Component</h3> is just normal html Syntax. {this.props.displaytext} is used to access an attribute called as displaytext from props ( so displaytext is passed as an input whenever this component is called ). Here displaytext is just a custom name that I have Given. {element} is the constant which was created, which in turn contains the div element.

在這里， className用于指向CSS類。 <h3>First Component</h3>只是普通的html語法。 {this.props.displaytext}用于訪問來自props的稱為displaytext的屬性(因此，只要調用此組件， {this.props.displaytext} displaytext作為輸入傳遞)。 這里displaytext只是我給定的一個自定義名稱。 {element}是創建的常量，而常量又包含div元素。

使用組件 (Using the Component)

FirstComponent has been created but is not being used anywhere yet. Let's add FirstComponent to App Component. Here is the modified code for App.js

FirstComponent已創建，但尚未在任何地方使用。 讓我們將FirstComponent添加到App Component中。 這是App.js的修改后的代碼 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import FirstComponent from './FirstComponent'
class App extends Component {render() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><h1 className="App-title">Welcome to React</h1></header><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p><FirstComponent displaytext="First Component Data"/></div>
);}
}
export default App;

FirstComponent needs to be imported into App Component First which is done in the line import FirstComponent from ‘./FirstComponent’

首先需要將FirstComponent導入到App Component First中，這是import FirstComponent from './FirstComponent'中的import FirstComponent from './FirstComponent'行中完成import FirstComponent from './FirstComponent'

Then FirstComponent is added to App Component using the line <FirstComponent displaytext=”First Component Data”/>

然后使用<FirstComponent displaytext=”First Component Data”/> 行將FirstComponent添加到App Component。

Here displaytext is passed as an attribute to the FirstComponent.

這里displaytext作為屬性傳遞給FirstComponent。

Now you can run the Application using the command npm start

現在，您可以使用命令npm start運行該應用npm start

You should see the following result in the browser.

您應該在瀏覽器中看到以下結果。

恭喜😄 (Congrats😄)

Now you know how to create a React Application and how to create and use React Components. You also know a bit about JSX :)

現在您知道了如何創建React應用程序以及如何創建和使用React組件。 您也對JSX有所了解:)

The next part will explain an existing React Code from Github. Part 2 code is different from the code that we wrote in Part 1.

下一部分將解釋來自Github的現有React Code。 第2部分的代碼與第1部分中編寫的代碼不同。

第2部分 (Part 2)

碼 (Code)

The Following Code is being explained here so clone the repo into your computer. The Repo has instructions on how to clone and set up the code in your computer.

此處說明了以下代碼，因此請將存儲庫克隆到您的計算機中。 存儲庫包含有關如何在計算機中克隆和設置代碼的說明。

https://github.com/aditya-sridhar/simple-reactjs-app (https://github.com/aditya-sridhar/simple-reactjs-app)

申請網址 (Application URL)

To see how the final Application looks like you can click on the following URL. This will give a good idea as to what the Application is trying to do

要查看最終應用程序的外觀，可以單擊以下URL。 這樣可以很好地了解應用程序正在嘗試做什么

https://aditya-sridhar.github.io/simple-reactjs-app (https://aditya-sridhar.github.io/simple-reactjs-app)

The Application would look like this in a mobile screen

該應用程序在移動屏幕上看起來像這樣

該應用程序做什么 (What does this Application do)

This application displays a list of customers. When a customer is selected, it displays the details of the selected customer. This is a Single Page Application (SPA). React is best suited for Single Page Applications. Single Page Applications display everything within a single page.

該應用程序顯示客戶列表。 選擇客戶后，它將顯示所選客戶的詳細信息。 這是一個單頁應用程序(SPA)。 React最適合單頁應用程序 。 單頁應用程序顯示單個頁面中的所有內容。

申請結構說明 (Application Structure Explained)

客戶組成 (Customers Component)

This Component displays the list of Customers. This corresponds to the file src/Customers.js . This component has the following constructor.

該組件顯示客戶列表。 這對應于文件src / Customers.js 。 該組件具有以下構造函數。 

constructor(props) {super(props)this.state = {selectedCustomer: 1}
}

props were already explained. But here you also see this.state. Whenever state changes, the component is rerendered. Here state has one parameter called selectedCustomer which is to keep track of which customer is selected. If selectedCustomer changes then the component and its child components are rerendered. The Constructor is used only to set props and state. Also, props should never be edited inside a component.

道具已經解釋過了。 但是在這里您也可以看到this.state 。 每當狀態更改時，都會重新呈現組件。 這里狀態有一個稱為selectedCustomer的參數，用于跟蹤選擇了哪個客戶。 如果selectedCustomer更改，則將重新呈現組件及其子組件 。 構造函數僅用于設置道具和狀態。 同樣， 道具 絕不能在組件內部進行編輯 。

The next thing you notice is the following code.

您注意到的下一件事是以下代碼。 

componentDidMount() {this.getCustomerData();
}

componentDidMount() is a function which is called as soon the component is rendered. So this can be used to set some initial values as well as load data. Here it is calling a function called as getCustomerData()

componentDidMount()是一個函數，將在呈現組件后立即調用它。 因此，可用于設置一些初始值以及加載數據。 在這里它調用了名為getCustomerData()的函數

The next piece of code that you see is

您看到的下一段代碼是 

getCustomerData() {axios.get('assets/samplejson/customerlist.json').then(response => {this.setState({customerList: response})})
};

This function getCustomerData() makes an HTTP call to read the sample json containing the list of customers from assets/samplejson/customerlist.json. On successfully getting a response, the state of the system is changed, by assigning the response to customerList. You may wonder why we never added customerList in the constructor. The reason is you can add parameters dynamically into State at any point in the code. The only requirement is that in the constructor at least an empty state has to be defined.

此函數getCustomerData()進行HTTP調用，以從資產/samplejson/customerlist.json中讀取包含客戶列表的示例json 。 成功獲得響應后，通過將響應分配給customerList來更改系統狀態。 您可能想知道為什么我們從未在構造函數中添加customerList。 原因是您可以在代碼中的任何位置將參數動態添加到State中。 唯一的要求是在構造函數中至少必須定義一個空狀態。

Here axios library is used to make the HTTP call. I have provided the Documentation for axios in the References section.

在這里， axios庫用于進行HTTP調用。 我在“參考”部分中提供了axios的文檔。

The next function is the render() function which returns what elements have to be rendered on screen. The main points of focus in the render function are

下一個函數是render()函數，該函數返回必須在屏幕上呈現的元素。 渲染功能的主要重點是 

<Button bsStyle="info" onClick={() => this.setState({selectedCustomer: customer.id})}>Click to View Details</Button>

Every customer in the list has a button called as Click to View Details. The above code snippet tells that whenever the button is clicked, then change the state of selectedCustomer to the selected customers' id. Since the state changes here, the component and its child component will be rerendered.

列表中的每個客戶都有一個名為“ 單擊以查看詳細信息”的按鈕。 上面的代碼片斷告訴每當按鈕被點擊，然后selectedCustomer的狀態改變到所選擇的客戶的ID。 由于狀態在此處更改，因此將重新呈現組件及其子組件。

The other code snippet which is important is

另一個重要的代碼段是 

<CustomerDetails val={this.state.selectedCustomer}/>

This snippet tells that CustomerDetails is a child component of Customers component and also passes the selectedCustomer id as an input to CustomerDetails component

此代碼段表明CustomerDetails是Customers組件的子組件，并且還將selectedCustomer id作為輸入傳遞給CustomerDetails組件

客戶詳細信息組件 (CustomerDetails Component)

This component displays the details of the selected Customer. Some important code snippets from this component will be explained here:

此組件顯示所選客戶的詳細信息。 這里將解釋該組件的一些重要代碼片段： 

componentDidUpdate(prevProps) {//get Customer Details only if props has changed
//(props is the input) if (this.props.val !== prevProps.val) {this.getCustomerDetails(this.props.val)}
}

componentDidUpdate() function is called whenever the component is rerendered. Here we are calling getCustomerDetails() Function if the input to this component has changed when the component rerendered. The input passed to getCustomerDetails() function is this.props.val. this.props.val in turn, gets its value from Customers Component( selectedCustomer was passed as an input to this ). To know if the input has changed, the code snippet used is this.props.val !== prevProps.val

每當重新呈現組件時，都會調用componentDidUpdate()函數。 如果重新渲染組件時此組件的輸入已更改，則在此調用getCustomerDetails()函數。 傳遞給getCustomerDetails()函數的輸入是this.props.val 。 this.props.val依次從客戶組件獲取其值(selectedCustomer作為對此this的輸入傳遞)。 要知道輸入是否已更改，使用的代碼段是this.props.val !== prevProps.val 

getCustomerDetails(id) {axios.get('assets/samplejson/customer' + id + '.json').then(response => {this.setState({customerDetails: response})})
};

getCustomerDetails() function makes an HTTP call to get the sample json which contains the customer details. The id parameter is used to know which customers details are required. id is nothing but this.props.val. When the response is successfully received the state of this component is changed by assigning response to customerDetails.

getCustomerDetails()函數進行HTTP調用以獲取包含客戶詳細信息的示例json。 id參數用于了解需要哪些客戶詳細信息。 id就是this.props.val。 成功接收到響應后，可以通過將響應分配給customerDetails來更改此組件的狀態。

The render() function for this component is pretty straightforward and simple so will not be covering that here

該組件的render()函數非常簡單明了，因此這里不再贅述

參考文獻 (References)

create-react-app: Refer to https://github.com/facebook/create-react-app to learn what all can be done using create-react-app

create-react-app：請參閱https://github.com/facebook/create-react-app以了解使用create-react-app可以完成的所有操作

ReactJS: Refer to https://reactjs.org/ to understand the concepts of ReactJS. The documentation is very good.

ReactJS：請參閱https://reactjs.org/以了解ReactJS的概念。 該文檔非常好。

React Bootstrap: Refer to https://react-bootstrap.github.io/getting-started/introduction/ to understand how to use React Bootstrap

React Bootstrap：參考https://react-bootstrap.github.io/getting-started/introduction/了解如何使用React Bootstrap

axios: Refer to https://www.npmjs.com/package/axios to know more about how to use axios library to make HTTP requests

axios：請訪問https://www.npmjs.com/package/axios，以了解有關如何使用axios庫發出HTTP請求的更多信息

再次恭喜😄 (Congrats Again 😄)

Now you know how to use components, how to communicate from a parent to a child component and also a little about rendering

現在，您知道了如何使用組件，如何從父組件與子組件進行通信以及有關渲染的一些知識。

The basic concepts have been covered in this post and hope this is helpful

這篇文章已經涵蓋了基本概念，希望對您有所幫助

關于作者 (About the author)

I love technology and follow the advancements in technology. I also like helping others with any knowledge I have in the technology space.

我熱愛技術，并追隨技術的進步。 我也喜歡以我在技術領域擁有的任何知識來幫助他人。

Feel free to connect with me on my LinkdIn account https://www.linkedin.com/in/aditya1811/

隨時通過我的LinkdIn帳戶與我聯系https://www.linkedin.com/in/aditya1811/

You can also follow me on twitter https://twitter.com/adityasridhar18

您也可以在Twitter上關注我https://twitter.com/adityasridhar18

My Website: https://adityasridhar.com/

我的網站： https : //adityasridhar.com/

我的其他相關帖子 (Other Relevant Posts by Me)

A Quick Guide to Help you Understand and Create Angular 6 Apps

幫助您了解和創建Angular 6應用程序的快速指南

A quick introduction to Vue.js

Vue.js快速介紹

翻譯自: https://www.freecodecamp.org/news/quick-guide-to-understanding-and-creating-reactjs-apps-8457ee8f7123/

reactjs快速如夢

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/393534.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/393534.shtml
英文地址，請注明出處：http://en.pswp.cn/news/393534.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

leetcode1351. 統計有序矩陣中的負數（二分查找）

leetcode1351. 統計有序矩陣中的負數（二分查找）

給你一個 m * n 的矩陣 grid&#xff0c;矩陣中的元素無論是按行還是按列&#xff0c;都以非遞增順序排列。 請你統計并返回 grid 中 負數 的數目。 示例 1&#xff1a; 輸入&#xff1a;grid [[4,3,2,-1],[3,2,1,-1],[1,1,-1,-2],[-1,-1,-2,-3]] 輸出&#xff1a;8 解釋&a…
閱讀更多...
XUbuntu22.04之跨平臺音頻編輯工具(平替Audition):ocenaudio(二百零二)

XUbuntu22.04之跨平臺音頻編輯工具(平替Audition):ocenaudio(二百零二)

加粗樣式 簡介&#xff1a; CSDN博客專家&#xff0c;專注Android/Linux系統&#xff0c;分享多mic語音方案、音視頻、編解碼等技術&#xff0c;與大家一起成長&#xff01; 優質專欄&#xff1a;Audio工程師進階系列【原創干貨持續更新中……】&#x1f680; 優質專欄&#…
閱讀更多...
QueryList4采集-圖片本地化

QueryList4采集-圖片本地化

QueryList4采集圖片本地化 //采集public function cai() {//采集的url地址$data QueryList::get(https://news.ke.com/sh/baike/0033/)->rules([title > [.LOGCLICK , text],content > [.summary , text],image > [.lj-lazy , data-original , ,function($res){//…
閱讀更多...
mysql 從服務器同步設置_mysql主從同步配置

mysql 從服務器同步設置_mysql主從同步配置

1.為什么要主從同步&#xff1f;在Web應用系統中&#xff0c;數據庫性能是導致系統性能瓶頸最主要的原因之一。尤其是在大規模系統中&#xff0c;數據庫集群已經成為必備的配置之一。集群的好處主要有&#xff1a;查詢負載、數據庫復制備份等。其中Master負責寫操作的負載&…
閱讀更多...
int、long、long long取值范圍

int、long、long long取值范圍

short int 1個字節儲存 unsigned short int 0&#xff5e;255short int -128&#xff5e;127 int 2個字節儲存 unsigned int 0&#xff5e;4294967295 int 2147483648&#xff5e;2147483647 long 4個字節儲存 unsigned long 0&#xff5e;4294967295long 21…
閱讀更多...
每天一個LINUX命令（pwd）

每天一個LINUX命令（pwd）

每天一個LINUX命令&#xff08;pwd&#xff09; 基本信息 pwd: /bin/pwd&#xff0c;顯示當前路徑的絕對路徑 語法&#xff1a;pwd 應用程序位置 which pwd PWD作用 pwd --help或者man pwd PWD的使用 pwd 轉載于:https://www.cnblogs.com/shanshanliu/p/6542403.html
閱讀更多...
leetcode69. x 的平方根（二分法）

leetcode69. x 的平方根（二分法）

實現 int sqrt(int x) 函數。 計算并返回 x 的平方根&#xff0c;其中 x 是非負整數。 由于返回類型是整數&#xff0c;結果只保留整數的部分&#xff0c;小數部分將被舍去。 示例 1: 輸入: 4 輸出: 2 代碼 class Solution {public int mySqrt(int x) {int l0,rx;while (…
閱讀更多...
一個swiper 兩個分頁器的寫法【總結】

一個swiper 兩個分頁器的寫法【總結】

寫項目的時候&#xff0c;使用的是swiper插件呈現的效果是一個swiper要實現兩個分頁器&#xff0c;下面就來總結一下 以swiper3為例來寫&#xff0c;在頁面中引入jquery、swiper.min.js和swiper.min.css文件。 HTML結構&#xff1a; <div class"banner swiper-containe…
閱讀更多...
react路由守衛+重定向_React + Apollo：如何在重新查詢后進行重定向

react路由守衛+重定向_React + Apollo：如何在重新查詢后進行重定向

react路由守衛重定向by Jun Hyuk Kim金俊赫 React Apollo&#xff1a;如何在重新查詢后進行重定向 (React Apollo: How to Redirect after Refetching a Query) GraphQL is hot, and for a good reason. In short, it is a query language that allows you to ask for exact…
閱讀更多...
python 爬蟲可視化編程_Python爬蟲爬取博客實現可視化過程解析

python 爬蟲可視化編程_Python爬蟲爬取博客實現可視化過程解析

源碼&#xff1a;from pyecharts import Barimport reimport requestsnum0b[]for i in range(1,11):linkhttps://www.cnblogs.com/echoDetected/default.html?pagestr(i)headers{user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko…
閱讀更多...
tp6常用命令

tp6常用命令

TP6常用命令 1.創建控制器 php think make:controller --plain index** (php think make:controller --plain 控制器名稱&#xff08;首字母大寫&#xff09;)2.創建模型 php think make:model 【模塊名】/模型名 模型名為表名相當3.創建中間件 php think make:middleware 中…
閱讀更多...
Problem B: 字符類的封裝

Problem B: 字符類的封裝

Description 先來個簡單習題&#xff0c;練練手吧&#xff01;現在需要你來編寫一個Character類&#xff0c;將char這一基本數據類型進行封裝。該類中需要有如下成員函數&#xff1a; 1. 無參構造函數。 2. 構造函數Character(char)&#xff1a;用參數初始化數據成員。 3. void…
閱讀更多...
leetcode852. 山脈數組的峰頂索引（二分法）

leetcode852. 山脈數組的峰頂索引（二分法）

我們把符合下列屬性的數組 A 稱作山脈&#xff1a; A.length > 3 存在 0 < i < A.length - 1 使得A[0] < A[1] < … A[i-1] < A[i] > A[i1] > … > A[A.length - 1] 給定一個確定為山脈的數組&#xff0c;返回任何滿足 A[0] < A[1] < … A[i…
閱讀更多...
linux 一鍵安裝lnmp

linux 一鍵安裝lnmp

運行下面這天命令&#xff0c;回車 wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz && tar zxf lnmp1.5.tar.gz && cd lnmp1.5 && ./install.sh lnmp 選擇數據庫版本&#xff0c;回車 設置MySQL的root密碼&#xff08;為了安全不…
閱讀更多...
圖標下載

圖標下載

個人認為非常好的一個網站&#xff1a; http://www.easyicon.net/
閱讀更多...
以太坊ipfs_動手：Infura和以太坊上的IPFS入門

以太坊ipfs_動手：Infura和以太坊上的IPFS入門

以太坊ipfsby Niharika Singh由Niharika Singh 動手&#xff1a;Infura和以太坊上的IPFS入門 (Hands On: Get Started With Infura and the IPFS on Ethereum) 為什么選擇Infura&#xff1f; (Why Infura?) There are a lot of pain points being faced by blockchain which …
閱讀更多...
suse required-start: mysql_suse linux 安裝MySql步驟

suse required-start: mysql_suse linux 安裝MySql步驟

今天下午終于把mysql搞定了&#xff0c;我安裝的這個linux版本(suselinux10.0)自己帶的有Mysql&#xff0c;但是&#xff0c;在網上查的版本要比這高&#xff0c;所以就上網找了一個然后自己裝&#xff0c;但是從來沒有接觸過MySql也不知道該怎么裝&#xff0c;于是就上網找&am…
閱讀更多...
PHP上傳文件到七牛云和阿里云

PHP上傳文件到七牛云和阿里云

七牛云上傳 注冊七牛云賬號并認證 進入控制臺找到對象存儲添加一個新的倉庫 添加完成之后看文檔 安裝 使用 Composer 安裝 Composer是 PHP 依賴管理工具。你可以在自己的項目中聲明所依賴的外部工具庫&#xff0c;Composer 會自動幫你安裝這些依賴的庫文件。 ???1. 安裝…
閱讀更多...
變態青蛙跳

變態青蛙跳

2019獨角獸企業重金招聘Python工程師標準>>> 題目描述 一只青蛙一次可以跳上1級臺階&#xff0c;也可以跳上2級……它也可以跳上n級。求該青蛙跳上一個n級的臺階總共有多少種跳法。 相比普通青蛙跳&#xff0c;這個 n級的就有點難了&#xff0c;重點是 能跳n級&…
閱讀更多...
中間的數（若已經排好序）

中間的數（若已經排好序）

描述&#xff1a; 奇數個&#xff0c;輸出中間那個 偶數個&#xff0c;輸出中間那倆 代碼&#xff1a; #include<iostream>using namespace std;int main(){ int *a; int n; cin>>n; anew int[n]; for(int i0; i<n; i) cin>>a[i]; …
閱讀更多...
最新文章

Copyright @ 2022~2023