begin React

搭建React环境

官网文档
my-app表示文件夹名称

npx create-react-app my-app

cd my-app

npm start

之后就会自动出蹦出一个页面，可以本地查看

初识React

代码精简

• index.js是文件入口

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

删除掉可能用不到的代码之后为

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

删除serviceworker.js文件
index.css文件定义了index页面的边距之类的样式，也可以暂时不要

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

同时目录下的index.css文件也可以删去
app.test.js是做自动化测试的时候使用的，如果不做也可以删去
app.js文件中div标签里的内容也可删掉，同时app.css文件的引用以及app.css文件也可以删去，logo图片的引用也可以删去，logo也可删去
到目前为止Src目录下就非常简单了

• app.js

  import React from 'react';
  
  function App() {
    return (
      <div></div>
    );
  }
  
  export default App;

• index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  
  
  ReactDOM.render(<App />, document.getElementById('root'));

最最基本的组件的定义和使用

JSX语法的学习