Create React App

第一種方式:(請保證你的網路暢通)

新建資料夾,在webstrom中開啟資料夾==>命令框內輸入下方程式碼，四小步解決你的問題

Create React App是開始構建新的React單頁應用程式的最佳方式。它已經為你設定好了開發環境，以便您可以使用最新的JavaScript特性，提供不錯的開發體驗，並且可以優化你的生產環境應用。你需要在你的機器上安裝Node >= 6 。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

第二種方式:(推薦使用)

If you have npm 5.2.0+ installed, you may use npx instead.

npx create-react-

npx create-react-app my-app

cd my-app
npm start

pp my-ap

Create React App不會處理後端邏輯或資料庫；它只是建立一個前端構建管道（build pipeline），所以你可以使用它來配合任何你想使用的後端。它使用像Babel和webpack這樣的構建工具，但是已經為你配置好了，你可以零配置使用。

第三種方式:(推薦使用)

webstorm裡開啟檔案，新建專案

搭建好腳手架後，可以嘗試在src資料夾下修改APP.js的內容,熟悉一下基本操作,再在src資料夾下新建目錄,在新資料夾中新建自己需要書寫頁面的js,

import React from 'react'

將react引入到新建的js頁面中,就可以開始書寫自己的頁面了

注意的是每一個頁面都只有一個根元素,因此,返回時需要一個大的標籤作為根元素將其他元素盛起來

import React from 'react'
//通用寫法
// function person() {
//     return <h1>
//     111
//     </h1>
//
// }

//es5寫法
// var person =function () {
//     return <h2>222</h2>
// }

//es6寫法
const  person = (props)=>{
    return (
        <div className="meimei">
        <p onClick={props.myclick}>我是{props.name},今年{props.age}歲</p>
        <input type='test' onChange={props.changed} defaultValue={props.name} />
        </div>
    )
}
export default person;
 

好了,今天的學習分享到這了,技術咖們歡迎指點