reactjs组件，渲染，个人尝试后总结的注意事项，VScode或HBuilder中创建【诗书画唱】

2021-04-29 12:01 作者:诗书画唱 0人读过 | 我要投稿

http://127.0.0.1:3000/

讲义

视频学习记录

初学者等人学习reactjs框架时，建议既要会在HBuilder中创建reactjs项目，也要会在VScode中创建reactjs项目

一个简单的reactjs的项目搭建：网页上打印出“Hello,world"（每学个内容其实都要先会搭建环境和会创建出打印出“Hello,world"等的基础功能）

用Nodejs在VScode中创建一个简单的REACTJS应用

用HBuilder了解渲染，添加元素到div中，刷新元素，计数器

HBuilder中用ES6语法（建议常常用ES6语法）定义组件（组件就是计数器之类的东西）

渲染元素.html

计数器.html

定义组件.html

创建REACTJS程序.html

VScode中创建自定义名称的组件的方法

index.js

index.html

个人尝试后总结的注意事项

单词：

作业：

通过reactjs方式完成页面的布局：

1、在页面中渲染一个登录表单，表单中包含账号输入框和密码输入框以及提交按钮。

<!DOCTYPE html>

<html>

<head>

let e1 =<form>

用户名:<input type="text" placeholder="请输入用户名" />

<br/>

密码:<input type="password" placeholder="请输入用户密码" />

<br/>

</form>;

ReactDOM.render(e1,

document.getElementById('formId'));

</script>

</head>

<body>

</body>

</html>

2、在页面中渲染一个科目列表，包含语文数学英语。

<!DOCTYPE html>

<html>

<head>

let e= <ul>

</ul>;;

ReactDOM.render(e,

document.getElementById('divId'));

</script>

</head>

<body>

</body>

</html>

3、在页面中渲染一个表格，包含学生学号姓名和生日。

<!DOCTYPE html>

<html>

<head>

let e1= <table border="1">

</tr>

</tr>

</tr></table>

;

ReactDOM.render(e1,document.getElementById('Id1'));

// let e2=

// <tbody border="1px"><tr>诗书画唱</tr>

// <tr>2020</tr>

// </tbody>;

// ReactDOM.render(e2,document.getElementById('Id2'))

</script>

</head>

<body>

<!--<table id="Id1" border="1px" >

</table>-->

</div>

</body>

</html>

4、在页面渲染一个下拉框，显示学历。

<!DOCTYPE html>

<html>

<head>

let e1=

<option>高中

</option>

<option>大学

</option></select>;

ReactDOM.render(e1,document.getElementById('Id1'));

</script>

</head>

<body>

</div>

</body>

</html>

5、在页面渲染显示一张图片。

<!DOCTYPE html>

<html>

<head>

let e1= <img srcc="img/1.jpg"></img>;

//<img srcc="img/1.jpg"/>

ReactDOM.render(e1,document.getElementById('Id1'));

</script>

</head>

<body>

<div>

</body>

</html>

通过两种方式自定义以下组件，并显示在页面上

1、爱好多选框。

<!DOCTYPE html>

<html>

<head>

//定义组件方法一(ES5语法)：

// 组件的首字母必须大写

function ZuJianName1(){

return (<div><input type="checkbox" name="one" value="给诗书画唱点赞!" />给诗书画唱点赞!

<input type="checkbox" name="two" value="给诗书画唱投币!" />给诗书画唱投币!</div>);}

ReactDOM.render(<ZuJianName1 />,

document.getElementById('div1'));

//定义组件方法二(ES6语法)：

class ZuJianName2 extends React.Component {

render(){

return (<div><input type="checkbox" name="one" value="给诗书画唱点赞!"></input>给诗书画唱点赞!

<input type="checkbox" name="two" value="给诗书画唱投币!"></input>给诗书画唱投币!</div>);

}

ReactDOM.render(<ZuJianName2 />,

document.getElementById('div2'));

</script>

</head>

<body>

定义组件方法一(ES5语法)：

定义组件方法二(ES6语法)：

</body>

</html>

2、每隔一秒钟就减一的计数器。

<!DOCTYPE html>

<html>

<head>

//定义组件方法一(ES5语法)：

//组件的首字母必须大写

function ZuJianName1(){

return (<div>

</div>);}

function f1(){

ReactDOM.render(<ZuJianName1 />,

document.getElementById('div1'));

}

let num1 = 0;

setInterval(f1,1000);

//定义组件方法二(ES6语法)：

class ZuJianName2 extends React.Component {

render(){

return (<div>

</div>);

}

function f2(){

ReactDOM.render(<ZuJianName2 />,

document.getElementById('div2'));

}

let num2 = 0;

setInterval(f2,1000);

</script>

</head>

<body>

定义组件方法一(ES5语法)：

定义组件方法二(ES6语法)：

</body>

</html>

3、登录组件。

<!DOCTYPE html>

<html>

<head>

//定义组件方法一(ES5语法)：

// 组件的首字母必须大写

function ZuJianName1(){

return (<form>

用户名:<input type="text" placeholder="请输入用户名" />

密码:<input type="password" placeholder="请输入用户密码" />

</form>);}

ReactDOM.render(<ZuJianName1 />,

document.getElementById('div1'));

//定义组件方法二(ES6语法)：

class ZuJianName2 extends React.Component {

render(){

return (<form>

用户名:<input type="text" placeholder="请输入用户名" />

密码:<input type="password" placeholder="请输入用户密码" />

</form>);

}

ReactDOM.render(<ZuJianName2 />,

document.getElementById('div2'));

</script>

</head>

<body>

定义组件方法一(ES5语法)：

定义组件方法二(ES6语法)：

</body>

</html>

4、友情赞助组件。（可以跳转到赞助单位的主页去）

<!DOCTYPE html>

<html>

<head>

//定义组件方法一(ES5语法)：

// 组件的首字母必须大写

function ZuJianName1(){

return (<div>友情赞助:<a href="https://space.bilibili.com/434918741";>诗书画唱</a></div>);}

ReactDOM.render(<ZuJianName1 />,

document.getElementById('div1'));

//定义组件方法二(ES6语法)：

class ZuJianName2 extends React.Component {

render(){

return (<div>友情赞助:<a href="https://space.bilibili.com/434918741";>诗书画唱</a></div>);

}

ReactDOM.render(<ZuJianName2 />,

document.getElementById('div2'));

</script>

</head>

<body>

定义组件方法一(ES5语法)：

定义组件方法二(ES6语法)：

</body>

</html>

一般写界面的话，以后都不用HBuilder（混合开发，而且用JSX语法时不会提示具体错在哪里，有些在HTML中是单标签的写法，但在JSX中写的HTML代码的时候就是要写成双标签），一般都用VScode（单页面开发,几乎不用再写html界面了，有打包的过程。同时记得写JSX部分时，被加入的元素可以是多层，但是根元素的话就是只能一个。）

个人尝试后总结的注意事项：

<img src="img/1.jpg"/>或<img src="img/1.jpg"></img>的写法都可以，

在HTML中的写可能是因为是弱语言，一些简写的方法没有关系,比如<img src="img/1.jpg"/>写成<img src="img/1.jpg">，<input type="password" placeholder="请输入用户密码" />写成<input type="password" placeholder="请输入用户密码" >等等都不会报错，但是在JSX中会变严格,斜杠是不可以少的，同时<table><th><td><tr>等的标签在JSX中要写在一起，比如

let e1= <table border="1">

</tr>

</tr>

</tr></table>;

这里不写<table>标签是会报错的。同时组件的首字母必须大写：

function ZuJianName1(){

return (<form>

用户名:<input type="text" placeholder="请输入用户名" />

密码:<input type="password" placeholder="请输入用户密码" />

</form>);}

不然调用组件的时候也会报错。

目前在VScode中使用reactjs项目时，启动方法是在终端中输入npm start的cmd命令后按回车键，默认跳转到public文件夹中的index.html，是单页面模式的开发，有时几乎不用写很多的html文件。HBuilder的是混合模式的开发。后面如果想指定界面跳转的话可能要使用express，路由......。

而组件的话是写在自己创建的comp文件夹中的（当然，文件夹的名字自自定义，记得项目目录下的index.js中的路径写对就行。

http://127.0.0.1:3000/是默认的VScode的reactjs项目的npm start 的cmd命令启动后的访问路径。

讲义

NODEJS：后台程序

前端JS：REACTJS，VUEJS

微信小程序

创建项目：

1、Hbuilder中创建项目

2、VSCODE中创建项目（单页面开发）

定义组件（自定义标签）

视频学习记录

初学者等人学习reactjs框架时，建议既要会在HBuilder中创建reactjs项目，也要会在VScode中创建reactjs项目

REACTJS的安装包，可在官方网站下载。

运行REACTJS的js文件清单如下：

react.js：REACTJS核心库（下载地址：https://unpkg.com/react@16/umd/react.development.js）

react-dom.js：提供与 DOM 相关的功能（下载地址：https://unpkg.com/react-dom@16/umd/react-dom.development.js）

browser.js：将JSX语法转为JavaScript语法，这一步很消耗时间，应该将它放到服务器完成，也就是在服务器端转换成js脚本以后引入。（下载地址：https://unpkg.com/babel-standalone@6.15.0/babel.min.js）

一个简单的reactjs的项目搭建：网页上打印出“Hello,world"（每学个内容其实都要先会搭建环境和会创建出打印出“Hello,world"等的基础功能） START

<!DOCTYPE html>

<html>

<head>

//ReactDOM是Reactjs框架的核心对象

//html代码不需要使用引号引起来

ReactDOM.render(<h1>Hello,world</h1>,

document.getElementById('app'));

</script>

</head>

<body>

</body>

</html>

一个简单的reactjs的项目搭建：网页上打印出“Hello,world"（每学个内容其实都要先会搭建环境和会创建出打印出“Hello,world"等的基础功能） END

用Nodejs在VScode中创建一个简单的REACTJS应用（含个人尝试）START

在终端执行npx create-react-app myapp的cmd命令

【个人对这个cmd命令的理解创建名为myapp的reactjs项目

npx create-react-app 项目名】

在终端中输入npm start

终端输入npm start后自动跳转到其运行结果的界面：

用Nodejs在VScode中创建一个简单的REACTJS应用 END

用HBuilder了解渲染，添加元素到div中，刷新元素，计数器 START

<!DOCTYPE html>

<html>

<head>

//定义一个元素

let e1 = <h1>Hello Kitty</h1>;

let e2 = <input type="button" value="点击" />;

let e3 = <ul>

</ul>;

//定义的元素的最外层必须只有一个根元素

let e4 = <div><input type="text" name="act"/>

<button>点击</button></div>;

let e5 = <tbody><tr></tr><tr></tr><tr></tr></tbody>;

ReactDOM.render(e1,

document.getElementById('title'));

ReactDOM.render(e2,

document.getElementById('click'));

ReactDOM.render(e3,

document.getElementById('subject'));

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function add(){

const ele = (<div>

<h1>计数器演示</h1>

</div>);

ReactDOM.render(ele

,document.getElementById('exp'));

}

let num = 0;

setInterval(add,1000);

</script>

</head>

<body>

</body>

</html>

用HBuilder了解渲染，添加元素到div中，刷新元素，计数器 END

HBuilder中用ES6语法（建议常常用ES6语法）定义组件（组件就是计数器之类的东西） START

<!DOCTYPE html>

<html>

<head>

//定义组件方法一：

//组件的首字母必须大写

// function Counter(){

// return (<div>

// <h1>计数器演示</h1>

// <h2>{num ++}</h2>

// </div>);

// }

//定义组件方法二：

class Counter extends React.Component {

render(){

return (<div>

<h1>计数器演示</h1>

</div>);

}

function add(){

ReactDOM.render(<Counter />,

document.getElementById('app'));

}

let num = 0;

setInterval(add,1000);

</script>

</head>

<body>

</body>

</html>

HBuilder中用ES6语法（建议常常用ES6语法）定义组件（组件就是计数器之类的东西） END

VScode中创建自定义名称的组件的方法 START

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

//导入Hello组件

import Hello from './comp/Hello';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

<Hello />,

document.getElementById('root')

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

//src/comp/Hello.js

//引入react.js文件

import React from "react";

//方法一：

// function Hello(){

// return (<h1>Hello world</h1>);

// }

//方法二：

class Hello extends React.Component{

render(){

return (<h1>我的第一个组件</h1>);

}

export default Hello;

<!DOCTYPE html>

<head>

<meta

name="description"

content="Web site created using create-react-app"

<!--

manifest.json provides metadata used when your web app is installed on a

user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

-->

<!--

Notice the use of %PUBLIC_URL% in the tags above.

It will be replaced with the URL of the `public` folder during the build.

Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will

work correctly both with client-side routing and a non-root public URL.

Learn how to configure a non-root public URL by running `npm run build`.

-->

<title>React App</title>

</head>

<body>

<!--

This HTML file is a template.

If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.

-->

</body>

</html>

VScode中创建自定义名称的组件的方法 END

标签：

reactjs组件，渲染，个人尝试后总结的注意事项，VScode或HBuilder中创建【诗书画唱】

讲义

视频学习记录

讲义

视频学习记录