時間以内のReactJSにおけるポートフォリオ🐱‍💻🕺 ReactJS基本概念の使用🔥

始めましょう👋Perquisites

Visual Studioコードのインストール

Nodejsインストール

と基本的なインターネット接続🔌

Firebase CLI(あなたのアプリケーションをホストしたい場合は、コマンドラインインターフェイス)

👉 Github Repo Fork/⭐/Clone it

ステップ1
Mkdir MyPortfolioを使用することができますが、それはちょうどあなたのWindows端末npx create-react-app myportfolioその後、あなたの反応アプリを実行する準備ができて
Windowsのnpm startIOSのyarn start次に、以下のインターフェイスが表示されます🔽

その後、このような構造を持つ必要があります🔽 コンポーネントについて心配しないでください、そして、この記事のすべてのそれら

我々のアプリの主な重要なファイルはアプリです.我々は我々のアプリの全体をレンダリングするのに役立つ予定です.それから、そのフォルダからすべてを削除して、以下のコードを入力して、再びサーバーを起動することによって動作しているのを見てください

import React from 'react';
import './App.css';//already included file in our app



function App() {
  return (
    <div className="App">
   <h1>Your going to Rock The Beatles!</h1>
    </div>
  );
}

export default App;

その後、ブラウザのlocalhostで表示されます:3000ポートあなたのロックに行くビートルズ!
ステップ2
このセクションでは、我々はカップであなたのラップトップを準備する🥛/☕ そして、あなたはすべてのアプリを削除する必要があります.Ctrlキーでコマンドライン内のサーバーを停止してコマンドを実行する必要があるので、このアプリケーションを構築するためのブートストラップライブラリを使用する予定ですnpm install react-bootstrap bootstrapその後、CSSのものをインポートブートストラップウェブサイトからインポートする必要がありますimport 'bootstrap/dist/css/bootstrap.min.css;コンポーネントの下
SRC/コンポーネント内のすべてのコンポーネントを作成するには、1つのフォルダーを作成する必要があります.我々のアプリケーションのホームページの1つのファイルを構築するつもりです

あなたがちょうどJumbotronカードを使用して知っている必要があるものhttps://react-bootstrap.github.io/components/jumbotron/そして、いくつかの基本的なボタンのリンクをHTMLタグで含まれていると我々はここでは、クラスベースのコンポーネントと比較して簡単ですが、同じ構造を使用するつもりですが、複雑な構造を持って、上記のコード行を参照してください.Jumbotronはそのパッケージから反応して、アプリをエクスポートしなければならないので、どこかのものをインポートしなければなりませんし、コードを心配する必要はありません❤また、私は他の生産的な仕事を持っていない!
@アプリケーション内の最初のコンポーネント.js *
最初のセクションとして我々は我々の最初のコンポーネントを作成我々はアプリケーション内のコンポーネントをインポートする必要がある知っている.アプリケーションのブラウザでの変更を見てJSファイル.だから我々のアプリで物事を下に追加することができます.jsファイル.

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import './App.css';
import Jumborton from './components/Jumborton';



function App() {
  return (
    <div className="App">
    <Jumborton/> //Self closing component in react for rendering that 
    </div>
    //Jumborton.js App file in Our App.js that's it if you want more then i can help comment below
  );
}

export default App;

以下のように他のコンポーネントを作成する予定です

フッター.JS

ソーシャル.JS

プロジェクト.js
そして、このすべてのコンポーネントで我々自身のものを加えた後に、それらからそれらのコンポーネントを輸出しなければなりません🔼 上記のファイルとインポートアプリケーション.JSファイルとその自己終了後、これらのすべてのコンポーネントを閉じて、それが行われます.
社会参照.JSファイルはこちら

*フッタ.js

とインデックスのパブリックフォルダで.HTMLでは、リポジトリのパブリックフォルダーインデックスで指定されたすべてのFontaWamy CDNbootstrapを含める必要があります.他のリンクを自分でそれらのサイトを訪問して与えることができる他のリンクタグを含めるには🔽

そして最後に我々が行う必要があるmediaqueriesとアプリケーション内のいくつかのCSSを書く.CSSファイル

.App {
  text-align: center;
}

html {
    font-family: 'Roboto', sans-serif;
}


.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.github{
padding: 10px;
position: relative;
bottom: 0;
font-size: 1.5em;
display: grid;



}
.github:hover{
    color:grey;
}



@media (min-width: 576px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 20px;
    }
}


@media only screen and (max-width: 320px) {
  /* styles for narrow screens */
}







.btn{
  font-size: 10px;
}
.projects{

 margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
display: grid;

}

そして、あなたはそれをしました、そして、私もそれが痛みであるような大きいものを書いていました、しかし、私はFirebase🔽*
まずFireBaseコンソールのインストールとアプリケーションを作成し、FireBaseにログインし、それぞれのプロジェクトフォルダに次のコマンドを実行しますfirebase initは、それぞれのアプリも選択npm run buildfirebase deploy単一のページのアプリケーションのフォルダとyesを選択し、すべてのファイルを書き直して
その後、あなたのアプリケーションを展開
👉 Live Preview OF this Project🔥
👉 Github Repo Fork/⭐/Clone it