Create React App 提供了快速建立React App環境的方法:
1. 安裝node.js
2. 建立React project:
$ npx create-react-app my-app
3. 啟動app
$ cd my-app
$ npm start

npm start之後即打

學習

職場產業

健康與情感

<div class="draft-block draft--p left"><a href="https://github.com/facebook/create-react-app#create-react-app--" target="_blank" class="draft--a">Create React App</a> 提供了快速建立React App環境的方法:</div>
<div class="draft-block draft--p left">1. 安裝node.js<br>2. 建立React project:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">$ npx create-react-app my-app</pre></pre>
<div class="draft-block draft--p left"><br>3. 啟動app</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">$ cd my-app</pre><pre class="draft--code-block">$ npm start</pre></pre>

<div class="draft--imgNormal draft-block"><div><div style="height:1912px" class="image-block-prerender" data-src="https://images.vocus.cc/7086e68d-eae6-488b-90f1-9bc5c9de92ea.jpg" data-width="1912" data-height="999" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">npm start之後即打開http://localhost:3000/網頁，每次修改都會直接refresh網頁.若是用VSCode開發, 直接從NPM Scripts用按的也很方便。<br>上線時使用npm run build，然後把build資料夾下的所有檔案丟到server即可。</div>
<div class="hr__AtomHrContainer-sc-1afmttx-0 dsBIOm draft-block"><pre class="hr__HrWrapper-sc-1afmttx-1 hUbgX draft--hr"><hr class="hr__Hr-sc-1afmttx-2 dOXRXF"></pre></div>
<div class="draft-block draft--p left">App.js:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:523px" class="image-block-prerender" data-src="https://images.vocus.cc/aa0c050c-5daf-4d79-96f1-02059d80aa68.jpg" data-width="523" data-height="560" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">App.css:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:465px" class="image-block-prerender" data-src="https://images.vocus.cc/a92ed22c-1e09-4532-b116-b72e21c7499b.jpg" data-width="465" data-height="799" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">最後build出來的class name如下:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1115px" class="image-block-prerender" data-src="https://images.vocus.cc/255d4737-52d6-4c6a-a187-b4e3e3757490.jpg" data-width="1115" data-height="781" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">將App.css改成App.module.css:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:597px" class="image-block-prerender" data-src="https://images.vocus.cc/a4fe9b2e-fdc9-4cac-8661-818d02d9254d.jpg" data-width="597" data-height="561" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">好處是在不同檔案的css class name可以取成一樣，不用擔心會有衝突，因為最後build出來的class name會編譯成不重複的名稱。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1130px" class="image-block-prerender" data-src="https://images.vocus.cc/55479795-2792-4213-abff-75104244d46d.jpg" data-width="1130" data-height="773" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">Note: </span></div>
<ul>
  <li class="draft-block draft--li">這是用React Hook的寫法(function component)，比class component的寫法簡潔許多。</li>
  <li class="draft-block draft--li">若是從git上剛clone下來，記得下npm install安裝相關的dependencies。</li>
</ul>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"><span style="font-style: italic; ">本筆記參考:<br>1. </span><a href="https://zh-hant.reactjs.org/docs/create-a-new-react-app.html" target="_blank" class="draft--a"><span style="font-style: italic; ">https://zh-hant.reactjs.org/docs/create-a-new-react-app.html</span></a><span style="font-style: italic; "><br>2. </span><a href="https://michaelceber.medium.com/how-to-setup-and-use-css-modules-in-react-with-webpack-7f512b946ae0" target="_blank" class="draft--a"><span style="font-style: italic; ">https://michaelceber.medium.com/how-to-setup-and-use-css-modules-in-react-with-webpack-7f512b946ae0</span></a></div>

<p><a href="https://github.com/facebook/create-react-app#create-react-app--">Create React App</a> 提供了快速建立React App環境的方法:</p>
<p>1. 安裝node.js<br>
2. 建立React project:</p>
<pre><code>$ npx create-react-app my-app</code></pre>
<p><br>
3. 啟動app</p>
<pre><code>$ cd my-app</code></pre>
<pre><code>$ npm start</code></pre>
<p><br></p>
<p>npm start之後即打開http://localhost:3000/網頁，每次修改都會直接refresh網頁.若是用VSCode開發, 直接從NPM Scripts用按的也很方便。<br>
上線時使用npm run build，然後把build資料夾下的所有檔案丟到server即可。</p>
<p><br></p>
<p>App.js:</p>
<p><br></p>
<p>App.css:</p>
<p><br></p>
<p>最後build出來的class name如下:</p>
<p><br></p>
<p>將App.css改成App.module.css:</p>
<p><br></p>
<p>好處是在不同檔案的css class name可以取成一樣，不用擔心會有衝突，因為最後build出來的class name會編譯成不重複的名稱。</p>
<p><br></p>
<p><strong>Note:&nbsp;</strong></p>
<ul>
  <li>這是用React Hook的寫法(function component)，比class component的寫法簡潔許多。</li>
  <li>若是從git上剛clone下來，記得下npm install安裝相關的dependencies。</li>
</ul>
<p><br></p>
<p><em>本筆記參考:<br>
1. </em><a href="https://zh-hant.reactjs.org/docs/create-a-new-react-app.html"><em>https://zh-hant.reactjs.org/docs/create-a-new-react-app.html</em></a><em><br>
2. </em><a href="https://michaelceber.medium.com/how-to-setup-and-use-css-modules-in-react-with-webpack-7f512b946ae0"><em>https://michaelceber.medium.com/how-to-setup-and-use-css-modules-in-react-with-webpack-7f512b946ae0</em></a></p>

Create React App 提供了快速建立React App環境的方法:

npm start之後即打開http://localhost:3000/網頁，每次修改都會直接refresh網頁.若是用VSCode開發, 直接從NPM Scripts用按的也很方便。
上線時使用npm run build，然後把build資料夾下的所有檔案丟到server即可。

好處是在不同檔案的css class name可以取成一樣，不用擔心會有衝突，因為最後build出來的class name會編譯成不重複的名稱。

這是用React Hook的寫法(function component)，比class component的寫法簡潔許多。

若是從git上剛clone下來，記得下npm install安裝相關的dependencies。

本筆記參考:
1. https://zh-hant.reactjs.org/docs/create-a-new-react-app.html
2. https://michaelceber.medium.com/how-to-setup-and-use-css-modules-in-react-with-webpack-7f512b946ae0

Getting Started with React Hooks

React Hook onclick call a callback function with params, and change css style example:


本筆記參考:
1. https://www.codegrepper.com/code-examples/javascrip