初学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 是一个用以标记出应用中潜在问题的工具。就像 FragmentStrictMode 不会渲染任何真实的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学习-创建一个简单的react


下一篇:React 基础文档