從本欄起，我們開始系統的學習 React，本篇文章主要講述 正式學習知識點之前需要做一些准備工作。
既然是學習，那么還是要看官方的文件，這邊提供了預習資源：
預習資源
同時我的開發環境是：
開發環境
起步
可以直接運行下面的 命令行，也可以使用 npx ：
# 安裝官方腳手架 並 初始化
npm install -g create-react-app
create-react-app react01
# 或者可以直接運行
npx create-react-app react01
運行完成之后，我們可以看到文件結構如下圖：
下面我們來分析一下文件結構，此時我們 打開 src -> index.js ，可以看到這句代碼：
ReactDOM.render(<App />, document.getElementById('root'));
這個就是一個項目最重要的兩個組成部分，React 和 reactDom ，其中 react 負責邏輯控制，最終渲染的內容是由 reactDom 控制
此時 reactDom 渲染的是 一個 純粹的組件 App ，那么我們打開 app.js 並找到下面這段代碼：
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
此時的你是否會疑惑，這個標簽語法既不是字符串也不是 HTML，那么是什么呢？請繼續往下看
上面我們初始一種新的語法，其實它被稱為 JSX ，是一個 JavaScript 的語法擴展，實際核心的邏輯完全是 JavaScript 實現的。
JSX
- 表達式
我們打開此時項目的起始點是 app.js ，刪除 header 標簽及其內容，並更改以下內容，
function App() {
const name = 'name is muzi'
return (
<div>
{/* 表達式 */}
<h1> { name } </h1>
</div>
);
}
然后在終端運行如下指令，啟動項目可以看到我們定義的 name 變量的值：
npm run start
注意： 在 { } 中只要是合法的 js 表達式即可，例如 加減乘除、函數表達式等
下面我們列舉一個函數表達式的使用，新定義一個 formatName 函數 和 user 變量並調用，修改代碼如下：
function formatName(user){
return user.firstName + ' ' + user.lastName
}
function App() {
const user = {
firstName: 'mu',
lastName: 'zi'
}
return (
<div>
{/* 此處做一個函數表達式的使用 */}
<h1>{formatName(user)}</h1>
</div>
);
}
注意： 中合法是表達式不是條件語句，不能在 { } 中寫 條件語句或者 for 循環
- 屬性值
如以 img 標簽為例，我們設置其 src 屬性 和 style 樣式，新增代碼如下：
function App() {
const styles = { width:'100px' }
return (
<div>
{/* 屬性 */}
<img src={ logo } style={ styles }/>
</div>
);
}
此時 style 樣式為一個對象，修改完成之后 可以去瀏覽器看結果。
- jsx 也是表達式
此時我們定義一個 jsx 的變量，修改代碼如下：
function App() {
const jsx = <p>hello,jsx 也是表達式</p>
return (
<div>
{/* jsx 也是表達式 */}
{ jsx }
</div>
);
}
上面這些就是基本語法，下一篇我們來介紹組件的創建方式和傳值 React中組件的創建方式和傳值