react 初学(1)

1.安装环境

需要Node.js   自行下载安装

react 初学(1)_第1张图片

然后全局安装create-react-app

npm install -g create-react-app

如果出现报错请参考

create-react-app -V 报错无法将“create-react-app”项识别为 cmdlet、函数、脚本文件或可运行程序的名称_Java-请多指教的博客-CSDN博客

 2.创建一个项目

  在你的项目文件夹下打开Windows PowerShell  执行命令

  create-react-app your-app

安装过程会有点久,耐心等待即可

react 初学(1)_第2张图片

出现下面的界面,表示创建项目成功:

react 初学(1)_第3张图片

 然后进入你创建的项目目录下  我们执行npm start

react 初学(1)_第4张图片

react 初学(1)_第5张图片

也可以在vscode里面的终端打开

react 初学(1)_第6张图片

3.编写第一个react应用程序

react开发需要引入多个依赖文件:react.js、react-dom.js,分别又有开发版本和生产版本,create-
react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空

react 初学(1)_第7张图片

 清空后页面就是空白的了

然后我们可以看public目录下index.html    body里面就只有个div   id=root

react 初学(1)_第8张图片

后面我们需要使用js往这个div里面加东西

然后在里面重新创建一个index.js. 写入以下代码: 

//从react的包当中引入了React。
//只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX,要写JSX,就必须引入React
import React from 'react';
//ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用.它是从 react-dom 中引入的,而不是从 react 引入。
import ReactDom from 'react-dom';

// ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上
ReactDom.render("欢迎来到react世界",document.getElementById("root"));

 document.getElementById("root")  获取index.html中的id=root    然后渲染

react 初学(1)_第9张图片

也可以修改为:

ReactDom.render(
欢迎来到react世界
,document.getElementById("root"));

自动识别html标签  这就是JSX语法

4.JSX语法与组件

4.1 语法

JSX 将 HTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中,JSX 在产品打包阶段都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。


原理是什么呢?
要明白JSX的原理,需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?
看下面的DOM结构

欢迎进入React的世界

React.js 是一个帮助你构建页面 UI 的库

上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示:

{
tag: 'div',
attrs: { className: 'app', id: 'appRoot'},
children: [
{
tag: 'h1',
attrs: { className: 'title' },
children: ['欢迎进入React的世界']
},
{
tag: 'p',
attrs: null,
children: ['React.js 是一个构建页面 UI 的库']
        }
    ]
}

但是用 JavaScript 写起来太长了,结构看起来又不清晰,用 HTML 的方式写起来就方便很多了。
于是 React.js 就把 JavaScript 的语法扩展了一下,让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法,这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX结构转换成 JavaScript 的对象结构。

4.2 Class组件

可以新建一个文件夹,专门存放组件

在classmodule.js中写入代码

import React, { Component } from "react";

class ClassApp extends Component{ //只有继承了Component才算是组件   组件名称首字母必须大写

    //渲染效果是靠render()方法
    render(){
        //render()函数必须要有个返回值
        return 
hello classApp Component
; } } //export把组件导出去 export default ClassApp;

1.首先导入React和Component

2.class类名必须首字母大写,继承Component才算是组件

3.render()方法是渲染效果,必须有返回值

4.必须把组件暴露出去  使用export default 组件名

然后在index.js中导入      或者都可,看你自己喜欢

import ClassApp from './base/01_classmodule';

ReactDom.render(
    ,document.getElementById("root")
    );

//ReactDom.render(,document.getElementById("root"));

react 初学(1)_第10张图片

注意

1.return后面可以加小括号换行   代码多的时候可以对齐好看

 return (
            
hello classApp Component
)

2.return 里面只能有一个最大的标签,不能并排

比如这就会报错:

react 初学(1)_第11张图片

改为

react 初学(1)_第12张图片

4.3 函数式组件

function FunctionalApp(){
    return (
        
hello Functional Component
) } export default FunctionalApp;

react 初学(1)_第13张图片

还可以这样写函数式组件

const FunctionalApp=()=>{
    return (
hello Functional Component
) } export default FunctionalApp;

你可能感兴趣的:(react,react.js,javascript)