React学习笔记01-2018年3月

计划学习掌握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>
===========================================================
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页