React安装及基本使用

愚伕發表於 2019-12-1 00:09:00

从本栏起，我们开始系统的学习 React，本篇文章主要讲述正式学习知识点之前需要做一些准备工作。 
既然是学习，那么还是要看官方的文件，这边提供了预习资源：
<h3 id="预习资源">预习资源</h3>
<ol>
<li>React</li>
<li>create-react-app</li>
</ol>
同时我的开发环境是：
<h3 id="开发环境">开发环境</h3>
<ol>
<li>vscode下载</li>
<li> node.js下载</li>
</ol>
<h3 id="起步">起步</h3>
可以直接运行下面的命令行，也可以使用 npx ：
<pre><code class="language-Shell"># 安装官方脚手架并初始化
npm install -g create-react-app
create-react-app react01
# 或者可以直接运行
npx create-react-app react01
</code></pre>
运行完成之后，我们可以看到文件结构如下图：
<img src="https://muzikou.github.io/img/react/tree.png" alt="index.html" loading="lazy">
下面我们来分析一下文件结构，此时我们打开 src -> index.js ，可以看到这句代码：
<pre><code class="language-js">ReactDOM.render(<App />, document.getElementById('root'));
</code></pre>
这个就是一个项目最重要的两个组成部分，React 和 reactDom ，其中 react 负责逻辑控制，最终渲染的内容是由 reactDom 控制 
此时 reactDom 渲染的是一个纯粹的组件 App ，那么我们打开 app.js 并找到下面这段代码：
<pre><code class="language-js">function App() {
return (
<div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 
 Edit <code>src/App.js</code> and save to reload.
 
 <a
 className="App-link"
 href="https://reactjs.org"
 target="_blank"
 rel="noopener noreferrer"
 >
 Learn React
 </a>
 </header>
</div>
);
}
</code></pre>
此时的你是否会疑惑，这个标签语法既不是字符串也不是 HTML，那么是什么呢？请继续往下看 
上面我们初始一种新的语法，其实它被称为 JSX ，是一个 JavaScript 的语法扩展，实际核心的逻辑完全是 JavaScript 实现的。
<h2 id="jsx">JSX</h2>
<ul>
<li>表达式</li>
</ul>
我们打开此时项目的起始点是 app.js ，删除 header 标签及其内容，并更改以下内容，
<pre><code class="language-js">function App() {
const name = 'name is muzi'
return (
<div>
 {/* 表达式 */}
 <h1> { name } </h1>
</div>
);
}
</code></pre>
然后在终端运行如下指令，启动项目可以看到我们定义的 name 变量的值：
<pre><code class="language-shell">npm run start
</code></pre>
注意： 在 { } 中只要是合法的 js 表达式即可，例如加减乘除、函数表达式等
下面我们列举一个函数表达式的使用，新定义一个 formatName 函数和 user 变量并调用，修改代码如下：
<pre><code class="language-js">function formatName(user){
return user.firstName + ' ' + user.lastName
}
function App() {
const user = {
firstName: 'mu',
lastName: 'zi'
}
return (
<div>
 {/* 此处做一个函数表达式的使用 */}
 <h1>{formatName(user)}</h1>
</div>
);
}
</code></pre>
注意： 中合法是表达式不是条件语句，不能在 { } 中写条件语句或者 for 循环
<ul>
<li>属性值</li>
</ul>
如以 img 标签为例，我们设置其 src 属性和 style 样式，新增代码如下：
<pre><code class="language-js">function App() {
const styles = { width:'100px' }
return (
<div>
 {/* 属性 */}
 <img src={ logo } style={ styles }/>
</div>
);
}
</code></pre>
此时 style 样式为一个对象，修改完成之后可以去浏览器看结果。
<ul>
<li>jsx 也是表达式</li>
</ul>
此时我们定义一个 jsx 的变量，修改代码如下：
<pre><code class="language-js">function App() {
const jsx = hello,jsx 也是表达式
return (
<div>
 {/* jsx 也是表达式 */}
 { jsx }
</div>
);
}
</code></pre>
上面这些就是基本语法，下一篇我们来介绍组件的创建方式和传值 React中组件的创建方式和传值 
来源：https://www.cnblogs.com/-muzi/p/11964716.html

頁: [1]

琼殿技术论坛's Archiver

React安装及基本使用