React安装及基本使用

从本栏起，我们开始系统的学习 React，本篇文章主要讲述 正式学习知识点之前需要做一些准备工作。
既然是学习，那么还是要看官方的文件，这边提供了预习资源：

预习资源

1. React
2. create-react-app

同时我的开发环境是：

开发环境

1. vscode下载
2. node.js下载

起步

可以直接运行下面的 命令行，也可以使用 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 = { '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中组件的创建方式和传值