react安装及jsx特性

react基础（一）

---

react是用于构建用户界面的 JavaScript 库。

提示：以下是本篇文章正文内容，下面案例可供参考

一、react安装与创建

在命令行中输入npm i -g create-react-app 来安装脚手架

npm i -g create-react-app

然后进入项目目录，输入create-react-app myreact 来创建react项目，作者创建项目名为myreact，可以自己命名

create-react-app myreact

创建完成之后，会给出四条帮助命令

  npm start //启动项目
    Starts the development server.

  npm run build  //打包项目
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject  //暴露webpack配置文件
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

执行以下命令来启动项目

cd myreact
npm start 

执行之后会自动打开浏览器或者通过在浏览器地址栏手动输入生成的地址来访问创建好的项目

 Local:            http://localhost:3000
 On Your Network:  http://192.168.17.3:3000

浏览器显示效果如下就代表你成功了

点击网页中的链接就可以访问react官方网站

二、目录结构

项目目录如下：

以及src目录：

三、jsx语法

jsx是javascript和xml(html)标签混合写法，他的作用是在javascript中书写html模板。
jsx语法有以下特性：

01 有且只有一个根节点
02 class写成className
03 在{}写javascript
04 数组里面可以直接写html标签
05 注释用{/* */}
06 样式可以直接展开

打开App.js文件，然后就是我们最喜欢做的事——全部删除，然后写下以下代码

import './App.css';
function App() {
  var arr = [
    <h3>我喜欢jquery Dom和ajax操作</h3>,
    <h3>我喜欢react的组件</h3>,
    <p>vue很nice</p>
  ]
  var style = {
    fontSize: "48px",
    color: "#f70"
  }
  return (
    <div>你好react
      <p className='active'>react</p>
      <p>{2 + 3}</p>
      {arr}
      <p style={style}>
        我是行很可爱的文本
      </p>
    </div>
  )
}
export default App;

然后保存，打开浏览器

这就是jsx语法的特性。

觉得有用的话，给个三连呗(你们的支持是作者继续下去的最大动力)