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中组件的创建方式和传值