初学react 环境搭建

npm install create-react-app -g

create-react-app my-project // 自己定义的文件名称

cd my-project // 进入项目

cat package.json // 项目依赖  script命令

npm start // 启动服务器

启动编辑器打开文件

README.md // create-react 的帮助文档  

Render方法 代表组件的最终渲染结果

ReactDOM.render方法

把写好的组件挂载到DOM节点上

严格模式（Strict Mode）

严格模式在官网中这样介绍：

StrictMode 是一个用以标记出应用中潜在问题的工具。就像 Fragment ，StrictMode 不会渲染任何真实的UI。它为其后代元素触发额外的检查和警告。

 

ReactDOM.render(
　　<React.StrictMode>
　　　　<Welcome />
　　</React.StrictMode>,
document.getElementById('root')
);

语法糖（Syntactic sugar）/sɪnˈtæktɪk ˈʃʊɡər/，也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。 JSX是一种语法糖 React.createElement() 返回的是ReactElement对象  但是会有很多复杂的属性     新建JS文件定义自己的第一个react组件

import React from 'react'

class welcome extends React.Component {
render() {
return <h1>Hello React</h1>
}
}

export default welcome

在index.js中导入

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Welcome from './welcome.js'

ReactDOM.render(
// <React.StrictMode>
<Welcome />,
// </React.StrictMode>,
document.getElementById('root')
);

标签：React,render,react,初学,语法,import,ReactDOM,搭建
来源： https://www.cnblogs.com/hekeying/p/14596815.html