React安装及基本使用
从本栏起，我们开始系统的学习 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中组件的创建方式和传值