Day03 建立一个 React 专案

1.建立一个新的React 专案

npx create-react-app first-app
cd first-app
npm start

• 开启命令提示字元cmd，使用 npx 指令建立命称为 first-app的 React专案

• 建立好 React 专案之後，使用cd指令进入至first-app专案

• 进入至first-app专案後，输入npm start执行专案
  程序会在http://localhost:3000/ 自动开启网页浏览画面

  

2.React 专案结构

• node_module ： React 专案所需的所有的模组套件都会存放在此资料夹中，是存放经由npm下载而来的外部套件原始码存放的地方, 这些套件的版本等等讯息都记录在package.json里面。

• public ： 放置index.html和静态档案，网页设定、描述…等。

• src ：专案中主要的档案都会放置在此资料夹下，其中 index.js 是整个专案的程序进入点， App.js 是 React 建立专案预设的元件。另自订Component元件资料夹中可将 UI 拆分成独立的页面元件，都将集中於置於此资料夹中。

• package.json ：管理套件用的的描述文件，包含用哪些套件/开发者/版本/测试指令..等，方便程序部署到不同环境时使用。

备注：可以copy package.json 档案至别的专案，下npm install指令，即可在别的专案安装package.json里所有的套件。

3.index.js程序的进入点

此档案为 React 专案启动时的进入点，会把放在ReactDOM.render里面的程序渲染在html档里面的root标签内，一般会将App.js页面元件放置於此进行渲染。

4.App.js专案预设的第一个页面元件

建立专案後预设的第一个页面元件，之後会将建构 web 页面的UI页面元件集中放置於此。