React基础知识扫盲

React开发环境搭建

在搭建React开发环境前,需要安装Node

Node.js安装

使用React.js可以使用最原始的

这实在太low,工作中也不会有这种引入形式

因此采用脚手架形式的安装,需要Node.js,用里面的npm来进行安装

Node中文网址:http://nodejs.cn/

node -v

npm -v

脚手架安装

Node安装好后,使用npm命令安装脚手架工具

npm install -g create-react-app

create-react-app是React官方出的脚手架工具

创建第一个React项目

D:  //进入D盘
mkdir ReactDemo  //创建ReactDemo文件夹
create-react-app demo01   //用脚手架创建React项目
cd demo01   //等创建完成后,进入项目目录
npm start   //预览项目,如果能正常打开,说明项目创建成功

项目目录介绍

用脚手架生成目录后,需要对目录有个基本认识

最起码指导都是做什么用的,否则如何编写程序?

项目根目录中的文件

  • README.md 主要是对项目的说明
  • package.json 是webpack配置和项目包管理文件
    • 项目中依赖的第三方包和一些常用命令配置都在这里边
  • package-lock.json 是锁定安装时的版本号,并且需要上传到git,以保证其他人 npm instal时依赖能保证一致
  • gitignore 这是git的选择性上传的配置文件
    • 比如node_modules文件夹,就需要配置不上传
  • node_modules 这个文件夹就是项目的依赖包
  • public 公共文件,里面有公用模板和图标
  • src 主要代码编写文件,这里就是最重要的地方

public文件夹介绍

项目中的公共文件,就是共用的

  • favicon.ico 这是网站/项目的图标,在浏览器标签页的左上角显示
  • index.html 首页的模板文件,稍微改动下,可以看到效果
  • mainifest.json 移动端配置文件

src文件夹介绍

这里就是源代码,平时操作最多的目录

  • index.js 项目的入口文件
  • index.css
  • app.js 相当于一个方法模块,一个简单的模块化编程
  • serviceWorker.js 这是用于写移动端开发的,PWA必须用到,有了它就相当于有了离线浏览的功能

HelloWorld与组件化

先把src目录里的全部删除,编写一个HelloWorld程序,通过这个程序来了解React中的组件化编程

写一个项目一般从入口文件进行编写,在src目录下,新建一个index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(,document.getElementById('root'))
  • 首先引入React两个必要的文件
  • 然后引入一个APP组件,当前还没有,待会建立
  • 最后用React的语法把APP模块渲染到rootID上
  • rootID在public\index.html文件中

入口文件写好了,接下来写APP组件

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            
Hello Leon zhao
) } } export default App;

import React,{Component} from 'react'

这是ES6的语法-解构赋值,等价于

import React from 'react'
const Component = React.Component

两个文件编写完成后,使用npm start命令运行

React的主要优势之一就是组件化编写,这是现代前端开发的一种基本形式

JSX语法简介

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App' //App这是一个组件

// JSX javascript and xml 方便使用HTML、H5代码创建虚拟DOM
// 虚拟DOM不是真实的DOM节点,是虚拟化的,可以快速反应,不占用页面的渲染机制,快速反应动作
// 当JSX遇到< ,会把语法当做HTML解析;遇到{ ,会把语法当做JavaScript解析
ReactDOM.render(,document.getElementById('root'))
                        // 把组件挂载的地方
// App.js
import React,{Component} from 'react'
// 结构化赋值,相当于下面语句
// import React from 'react'
// const Component = React.Component

// App这个类继承于Component
class App extends Component{
// React中 大写字母开头的JSX是自定义组件 ,小写字母开头的就是HTML的标签
	render(){
		// JSX简单理解,就是在React的JAvaScript中写HTML代码
		return(
		// 无序列表
			
  • {false?'Leonzhao.com':'赵沐阳'}
  • I Love React
); // 传统JS写法 /* var child1 = React.createElement('li',null,'JSPang.com') var child2 = React.createElement('li',null,'I Love React') var root = React.createElement('ul',{className:'my-list'},child1,child2) */ } } // 将APP这个类暴露出去 export default App;

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