前端入门之React入门指南

初识React

React是什么

react、vue、angular俗称前端框架三驾马车
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）

React的特点

脚手架 - 我的第一个react项目

什么是脚手架？

“脚手架”是一种元编程的方法，输入一行命令就可以帮助我们快速构建代码模版。

image

全局安装脚手架

npm install -g create-react-app // window 平台
sudo npm install -g create-react-app // mac/linux 平台

使用脚手架新建项目

create-react-app react-demo // react-demo 是你的项目名称

启动项目

cd react-demo
npm run start

启动成功

image

React必备基础知识

JSX

我们来看一下如下代码：

const element =

Hello, world!

;

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，事实上它具有 JavaScript 的全部功能。

JSX表达式怎么写？

普通渲染

    <h1>我就是jsx</h1>

数学表达式

    <h1>{1 + 1}</h1>

字符串

    <h1>{\'hello world\'}</h1>

bool类型-无法渲染

    <h1>{isBoy}</h1>

使用变量

    <h1>{msg}</h1>

三目运算符

    <h1>{isBoy ? "男生" : "女生"}</h1>

调用方法

  const format = (msg) => {
     return \'---\' + msg + \'---\';
   }    

  <h1>{format(msg)}</h1>

使用对象

   const lamian = {
     name: "拉面"
   };

  <h1>{lamian.name}</h1>

JSX嵌套语法与循环

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

const list = [\'苹果\', \'香蕉\', \'雪梨\', \'西瓜\'];

const App = () => {
  return (
    <div >
      {
        <div>
          {
            list.map(v => <h1 key={v}>{v}</h1>) // 遍历数组
          }
        </div>
      }
    </div>
  )
}

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

JSX标签属性

jsx标签上可以设置绝大部分html标签的属性，如 checked、图片的src等，但需要注意几个点：

html的class属性改为className

     <div className="redCls">