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

运行完成之后,我们可以看到文件结构如下图:

index.html

下面我们来分析一下文件结构,此时我们 打开 src -> index.js ,可以看到这句代码:

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

这个就是一个项目最重要的两个组成部分,ReactreactDom ,其中 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中组件的创建方式和传值

posted @ 2019-12-01 00:09  木子蔻  阅读(2320)  评论(0编辑  收藏  举报