創(chuàng)建日期: 2020年2月22日
官網(wǎng)
中文官方文檔
React入門系列 目錄導引
一.使用create-react-app命令創(chuàng)建
React 官方提供了一個腳手架用于初始化React項目杀迹，使用 create-react-app 可以簡化手動設(shè)置流程寨辩。 官方網(wǎng)站的 Tutorial 也是以此為例桌肴。
注意：項目命名時班挖，不支持大寫字母偿衰。
STEP 1:
$ npm install -g create-react-app
$ create-react-app my-app
或者低匙，npm版本在5.2.0+ 可以使用 npx 命令，簡潔
$ npx create-react-app my-app
運行成功后避消，最后一句是“Happy hacking低滩！”召夹。
使用 create-react-app ，你只需要執(zhí)行命令之后等待安裝完依賴恕沫，就可以創(chuàng)建一個已經(jīng)配置好的 React 應(yīng)用程序监憎，并可以基于此開始你的項目開發(fā)。創(chuàng)建成功后婶溯，項目文件夾如下：
STEP 2:
進入項目目錄鲸阔，啟動項目
$ cd my-app
$ npm start
我使用的$ yarn start啟動項目。關(guān)于npm和yarn的區(qū)別
這里說一下迄委，筆者在啟動現(xiàn)存代碼的時候褐筛，發(fā)現(xiàn)居然所有步驟都正確，畫面是空白的叙身。然后筆者刷新了一下畫面死讹，就可以了。
<br >
二.使用webStorm創(chuàng)建React項目
打開webStorm曲梗，F(xiàn)ile → New → Project... → React App
選好路徑，填上項目名妓忍，點擊Create虏两，創(chuàng)建新項目。
如下圖：
項目剛創(chuàng)建時世剖，先出現(xiàn)package.json, yarn.lock定罢，然后node_modules文件夾。繼續(xù)自動運行之后旁瘫，出現(xiàn)了初始項目的完整文件夾祖凫。
運行時，直接點擊run按鈕即可酬凳。
以上惠况，部分參考https://zhuanlan.zhihu.com/p/36137966 該鏈接里面提到項目初始化，其中npm init會對package.json進行修改宁仔，如果沒有package.json這個文件稠屠，會自動生成，但是在生成過程中翎苫，entry point必須填寫权埠，否則會出現(xiàn)Aborted的錯誤提示，文件不會被生成煎谍。鏈接的作者攘蔽，最后一次編輯是在2018年5月份，不知道是否這期間react的版本更新原因呐粘，筆者創(chuàng)建的新項目满俗，已經(jīng)自動擁有package.json這個文件转捕，并不需要通過npm init對項目初始化。之后的開發(fā)過程中漫雷，是否需要瓜富，待定。降盹。与柑。
三.已有工程中，導入react
如果你希望在老項目中引入 React蓄坏，或著探究 React 到底是怎么運行起來的价捧。那就需要自己動手來配置了。我們使用 Babel 和 Webpack 來解決這個問題涡戳。
筆者沒有老項目结蟋，這部分，之后再補吧渔彰。嵌屎。。參考
下面這個鏈接恍涂，涉及到Babel和Webpack這兩個概念宝惰，說的比較細致，可以參考再沧。https://segmentfault.com/a/1190000016661311
四.擴展——顯示Hello world尼夺！
我們找到項目的啟動文件src/index.js，將文件所有內(nèi)容替換成下面代碼：
import React from 'react'
import ReactDOMfrom 'react-dom'
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
運行炒瘸，之后會看見界面顯示Hello world淤堵。
我們觀察下上述語法，待你多寫幾個demo的時候顷扩，你會發(fā)現(xiàn)拐邪，最后要先啟動哪個界面，是由
ReactDOM.render(parameter隘截，document.getElementById('root'));
的parameter決定的庙睡。
'root'是根DOM節(jié)點，想要將一個 React 元素渲染到根 DOM 節(jié)點中技俐，只需把它們一起傳入 ReactDOM.render()乘陪。詳細
下一篇：React入門（2）–––React中使用css / less文件
======================== 分割線 ==========================
http://huziketang.mangojuice.top/books/react/lesson7
看阮一峰的教程：http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
創(chuàng)建第一個components：http://www.reibang.com/p/324fd1c124ad
