编写第一个react程序

编写第一个react程序

• 全局安装create-react-app

cnpm install create-react-app -g

• 创建项目

create-react-app mytest
create-react-app ./     //在当前文件夹下创建项目

• 查看版本号

create-react-app -V

• 更新npm

npm install -g npm@latest

如果不想全局安装，可以直接使用npx

$ npx create-react-app your-app //也可以实现相同的效果

这需要等待一段时间，这个过程实际上会安装三个东西

• react: react的顶级库，用以创建React组件、组件生命周期等
• react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

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

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  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
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

• 常见问题

1. npm安装失败，切换为npm镜像为淘宝镜像( npm config set registry http://registry.npm.taobao.org/ )

2. 如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行

3. 清除npm缓存npm cache clean --force

• 入口文件main.js中必须要引入react和react-dom

//基础库，支持jsx
import React from 'react';
//帮助我们把组件渲染到页面上
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
 <h1>hello world</h1>,
  document.getElementById('root')
);

使用 ReactDOM 把元素渲染到页面指定的容器中

ReactDOM.render('要渲染的虚拟DOM元素', '要渲染到页面上的哪个位置中',’回调函数’)

注意： ReactDOM.render() 方法的第二个参数，和vue不一样，不接受 "#app" 这样的字符串，而是需要传递一个 原生的 DOM 对象

• 还可以这样写

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

const app = <h1>hello world</h1>

ReactDOM.render(
 app,
  document.getElementById('root')
);

• start启动项目(默认端口号3000)

cnpm run start