怎么搭建腳手架環(huán)境和創(chuàng)建React項目

1、React簡介

React起源于Facebook的內(nèi)部項目，因為該公司對市場上所有JavaScript MVC框架都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，于是就在2013年5月開源了。

2、腳手架環(huán)境搭建

第一步：安裝node.js

node.js下載網(wǎng)址： https://nodejs.org/zh-cn/download/

第二步：安裝React腳手架

cnpm install -g create-react-app

更換國內(nèi)鏡像

npm config set registry https://registry.npm.taobao.org
-- 配置后可通過下面方式來驗證是否成功
npm config get registry
-- 如果顯示出上述地址的話就是更換成功

第三步：創(chuàng)建項目

create-react-app todolist

進入項目目錄 cd todolist

第四步：啟動項目

npm start

3、項目目錄說明

node_modules ===> npm 下載的相關(guān)依賴
package.json ===> node包文件 包括項目的一些介紹 以及 相關(guān)文件版本

public文件夾：

   index.html ===> 項目的首頁

   favico.ico ===> 項目圖標

   mainfest.json ===> 定義網(wǎng)頁快捷方式

src 文件夾:

   index.js ===> 整個項目的入口文件
       registerServiceWorker.js ===> 離線緩存

代碼工程精簡

在 src 目錄下僅保存 App.js 和 index.js 文件

index.js 是入口文件，精簡代碼如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js 文件精簡代碼如下：

import React from 'react';

function App() {
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;