React学习笔记01-2018年3月

最新推荐文章于 2023-10-22 21:45:01 发布

MauveDragon

最新推荐文章于 2023-10-22 21:45:01 发布

阅读量930

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/MauveDragon/article/details/79743654

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

  计划学习掌握React这个前端，发现网上很多资料介绍都过时了， 
 
最新版rReact已是 
 
create-react-app@1.5.2 这个版本了。 
 
很意外发现github上React的官方介绍里有开发指南readme.md，看着不错，可以先看看。

 
User Guide – How to develop apps bootstrapped with Create React App. 
 
用户指南-如何开发始于建立React App的应用 
 
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md 
 
 附：create-react-app： 
 
npm install -g create-react-app 
 
create-react-app my-app 
 
cd my-app/ 
 
npm start 
 
============================================================================= 
 
npm install -g create-react-app 
 
>+ create-react-app@1.5.2 
 
D:\react>create-react-app my-app 
 
Creating a new React app in D:\react\my-app. 
 
Installing packages. This might take a couple of minutes. 
 
Installing react, react-dom, and react-scripts... 
 
> uglifyjs-webpack-plugin@0.4.6 postinstall D:\react\my-app\node_modules\uglifyjs-webpack-plugin 
 
> node lib/post_install.js 
 
+ react-dom@16.2.0 
 
+ react@16.2.0 
 
+ react-scripts@1.1.1 
 
added 1324 packages in 840.51s 
 
Success! Created my-app at D:\react\my-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 my-app 
 
  npm start 
 
Happy hacking! 
 
D:\react>cd my-app 
 
D:\react\my-app>npm start 
 
> my-app@0.1.0 start D:\react\my-app 
 
> react-scripts start 
 
Compiled successfully! 
 
You can now view my-app in the browser. 
 
  Local:            http://localhost:3000/ 
 
  On Your Network:  http://10.50.5.136:3000/ 
 
Note that the development build is not optimized. 
 
To create a production build, use npm run build. 
 
============================================================================= 
 
package.json 
 
{ 
 
  "name": "my-app", 
 
  "version": "0.1.0", 
 
  "private": true, 
 
  "dependencies": { 
 
    "react": "^16.2.0", 
 
    "react-dom": "^16.2.0", 
 
    "react-scripts": "1.1.1" 
 
  }, 
 
  "scripts": { 
 
    "start": "react-scripts start", 
 
    "build": "react-scripts build", 
 
    "test": "react-scripts test --env=jsdom", 
 
    "eject": "react-scripts eject" 
 
  } 
 
} 
 
=========================================================== 
 
package-lock.json 
 
{ 
 
  "name": "my-app", 
 
  "version": "0.1.0", 
 
  "lockfileVersion": 1, 
 
  "requires": true, 
 
  "dependencies": { 
 
    "abab": { 
 
      "version": "1.0.4", 
 
      "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz", 
 
      "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=" 
 
    }, 
 
    "accepts": { 
 
      "version": "1.3.5", 
 
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 
 
      "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 
 
      "requires": { 
 
        "mime-types": "2.1.18", 
 
        "negotiator": "0.6.1" 
 
      } 
 
    }, 
 
... 
 
} 
 
=========================================================== 
 
manifest.json  //货单 
 
{ 
 
  "short_name": "React App", 
 
  "name": "Create React App Sample", 
 
  "icons": [ 
 
    { 
 
      "src": "favicon.ico", 
 
      "sizes": "64x64 32x32 24x24 16x16", 
 
      "type": "image/x-icon" 
 
    } 
 
  ], 
 
  "start_url": "./index.html", 
 
  "display": "standalone", 
 
  "theme_color": "#000000", 
 
  "background_color": "#ffffff" 
 
} 
 
=========================================================== 
 
app.js 
 
import React, { Component } from 'react'; 
 
import logo from './logo.svg'; 
 
import './App.css'; 
 
class App extends Component { 
 
  render() { 
 
    return ( 
 
      <div className="App"> 
 
        <header className="App-header"> 
 
          <img src={logo} className="App-logo" alt="logo" /> 
 
          <h1 className="App-title">Welcome to React</h1> 
 
        </header> 
 
        <p className="App-intro"> 
 
          To get started, edit <code>src/App.js</code> and save to reload. 
 
        </p> 
 
      </div> 
 
    ); 
 
  } 
 
} 
 
export default App; 
 
=========================================================== 
 
index.html 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
  <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta name="theme-color" content="#000000"> 
 
    <!-- 
 
      manifest.json provides metadata used when your web app is added to the 
 
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ 
 
    --> 
 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 
 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
 
    <!-- 
 
      Notice the use of %PUBLIC_URL% in the tags above. 
 
      It will be replaced with the URL of the `public` folder during the build. 
 
      Only files inside the `public` folder can be referenced from the HTML. 
 
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will 
 
      work correctly both with client-side routing and a non-root public URL. 
 
      Learn how to configure a non-root public URL by running `npm run build`. 
 
    --> 
 
    <title>React App</title> 
 
  </head> 
 
  <body> 
 
    <noscript> 
 
      You need to enable JavaScript to run this app. 
 
    </noscript> 
 
    <div id="root"></div> 
 
    <!-- 
 
      This HTML file is a template. 
 
      If you open it directly in the browser, you will see an empty page. 
 
      You can add webfonts, meta tags, or analytics to this file. 
 
      The build step will place the bundled scripts into the <body> tag. 
 
      To begin the development, run `npm start` or `yarn start`. 
 
      To create a production bundle, use `npm run build` or `yarn build`. 
 
    --> 
 
  </body> 
 
</html> 
 
运行时增加： 
 
<script type="text/javascript" src="/static/js/bundle.js"></script></body> 
 
===========================================================