React学习3(React安装使用)

长孙鸿波

2023-12-01

React的使用

1. 最简单的方式是通过 react cdn库引入开发

这样的好处是不用npm搭建环境，会更加简单方便，但是不利于生态的使用

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react.min.js - React 的核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 提供与 DOM 相关的功能 的核心库 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<!-- 如果需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel -->
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
// 将一个h1标题插入id 为example 的dom元素中.
</script>
 
</body>
</html>

2. 通过npm使用React

使用npm搭建

1 第一步安装全局包

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

2.第二步、创建根目录
创建一个根目录，目录名为：reactApp，再使用 npm init 初始化，生成 package.json 文件：

$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) youj-react-test
version: (1.0.0) 
description: W3Cschool教程 react 测试
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/laolan/www/reactApp/package.json:

{
  "name": "youj-react-test",
  "version": "1.0.0",
  "description": "W3Cschool教程 react 测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)

1. 第三步、添加依赖包及插件
  因为我们要使用 React, 所以我们需要先安装它，–save 命令用于将包添加至 package.json 文件。
```
$ npm install react --save
$ npm install react-dom --save
```
同时我们也要安装一些 babel 插件
```
$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015
```
4.第四步、创建文件
创建index.html、App.jsx、main.js、webpack.config.js等文件
1. 第五步、设置编译器，服务器，载入器
  打开 webpack.config.js 文件添加以下代码:

 var config = {
   entry: './main.js',
   output: {
      path:'./',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 7777
   },
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
}
module.exports = config;

entry: 指定打包的入口文件 main.js。
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称。
devServer：设置服务器端口号为 7777，端口后你可以自己设定。
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

打开 package.json 文件，找到 "scripts" 中的 “test” "echo “Error: no test specified” && exit 1" 使用以下代码替换：

"start": "webpack-dev-server --hot"

现在我们可以使用 npm start 命令来启动服务。--hot 命令会在文件变化后重新载入，这样就不需要在代码修改后重新刷新浏览器就能看到变化。

6.第六步、index.html
设置<div id = "app"> 为我们应用的根元素，并引入 index.js 脚本文件。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>
</html>

7.第七步、App.jsx 和 main.js
这是第一个 react 组件,这个组件将输出 Hello World!!!。
App.jsx 文件代码

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

需要引入组件并将其渲染到根元素 App 上
main.js 文件代码

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

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

使用create-react-app工具

首先需要配置好本地的npm命令。就可以使用create-react-app 快速构建 React 开发环境，create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境,但是此工具要求的node版本为14以上

# 首先安装create-react-app 工具
npm install -g create-react-app
# 使用create-react-app创建了 项目名my-app的react项目 
create-react-app my-app
# 在项目目录下执行 start 启动项目
npm start
# 在浏览器中打开 http://localhost:3000/ 就可以访问了

创建的项目目录为：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头

src/App.js就是定义的组件，src/index.js是入口文件，一般就是将app组件挂在到index.html中的dom节点上，一般可以在src/index.js中修改要挂载的节点为自己定义的组件。

React元素的使用

react是通过将组件挂载到指定的某个dom节点来进行渲染页面的。

示例:

function ShowTime(props)=>{
	return <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.now.toLocaleTimeString()}.</h2>
    </div>
}
function moount(){
	ReactDOM.render(
    <ShowTime now={new Date()} />,
    document.getElementById('example')
);
setInterval(moount, 1000);

以上代码就是react的组件挂载, 他是使用ReactDOM.render方法将定义的funA组件挂载到了页面中id为example的dom节点上。每次更新组件都会使用diff算法,比较出改变的内容,进行更新组件,react 使用虚拟dom和diff算法使得页面渲染性能有了极大的提升.

React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX(JavaScript Xml) 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
代码示例:

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element,document.getElementById('root');

这种类似HTML的标签语法被称为 JSX，是一种 JavaScript 的语法扩展。在 React 中推荐使用 JSX 来描述用户界面。
JSX 是在 JavaScript 内部实现的。
元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
要将 React 元素渲染到根 DOM 节点中，通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上.

JSX支持js表达式

js表达式要用{ }包裹起来

const str = 'hello ';
const element = <span>{str + 'World!'}</span>

jsx只支持js表达式，不支持js代码，所以不能写if else等语句。如果要使用条件判断，一般使用三元运算，在react项目中会遇见大量的三元表达式，但是要慎用，如果使用嵌套层级太多的三元运算会使代码不可读，难以维护。

const num = 5;
const expressionElement = <span>{num}{ num%2 === 1 ? '是奇数' : '是偶数' }</span>; // 5是奇数

jsx支持内联样式，style使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px ，也可以使用原有的css写法，只不过需要键和值都需要加引号。

const styleElement = <span style={{backgroundColor: 'red',fontSize:'16'}} ></span>;
  {/* 传入内联样式需要两层{}，第一层表示要放js表达式，第二层表示是一个css对象， */}
  {/* 内联对象的属性就是css的样式，只不过之前 '-'连接的属性现在需要转成小驼峰的形式   */}
  const styleElement = <span style={{'background-color': 'red','font-size':'16'}} ></span>;

JSX 允许在模板中插入数组，数组会自动展开所有成员：

const domArr = [ <p>java</p>,<p>js</p> ];
const ele = <React.Fragment> {domArr} </React.Fragment>;
ReactDOM.render(ele ,document.getElementById('root');

注意： React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。他是处理一个元素,所以如果我们直接传入一个jsx数组，可能会报错，导致无法渲染，我们就需要一个标签来对数组进行包裹，直接用html标签包裹的话会导致渲染会多一层标签，如果不想包裹的这一层标签渲染，就可以使用<React.Fragment></React.Fragment>包裹，在react16.8以后也可以使用<></>,Fragment标签相比较空标签，可以支持key属性的传入。

JSX 中如何遍历展示数组 , 如果想在vue中想v-for那样遍历数组并自定义展示元素效果,就可以利用js 数组对象的map方法会返回数组对象,然后利用react 自动展开数组所有成员的特点来进行展示数组

const data = ['JS','JAVA','C','C++'];
  const dataElementArr = <React.Fragment>
    {data.map((item,index) => {
      return <p>这是第{index+1}行 元素为:{item}</p>
    })}
  </React.Fragment>
  ReactDOM.render(
          dataElementArr,
          document.getElementById('example')
  );

React学习3(React安装使用)

React的使用

1. 最简单的方式是通过 react cdn库引入开发

2. 通过npm使用React

使用npm搭建

使用create-react-app工具

React元素的使用

React JSX

JSX支持js表达式

相关阅读

相关文章

相关问答

相关文档