create-react-app
Create React Project
npx create-react-app my-app // creat react application
// npm init react-app my-app, available in npm 6+
cd my-app
npm start //default domain http://localhost:3000/
		
Components
  • put any JS and CSS files inside src
  • Only files inside public can be used from public/index.html
  • /Project
    	README.md
    	node_modules/
    	package.json
    	package-lock.json
    	public/
    		index.html //page template
    	src/
    		App.css
    		App.js
    		App.test.js
    		index.css
    		index.js //JavaScript entry point
    		logo.svg
    		
    Build
    npm run build // Builds the app for production to the build folder
    cp -r ./build/* /Application/AMPPS/www // copy content in build folder to the root of the website
    		
    Test

  • test files have .test.js or .spec.js suffix
  • add test file and code together under /src folder
  • //temp.js
    function hello()
    {
    	console.log("Hello World!");
    }
    
    function sum(a, b)
    {
    	return a+b;
    }
    
    export {hello, sum};
    		
    //temp.test.js
    import {hello, sum} from "./temp.js"
    
    it('hello test', () => {
    	hello();
    });
    
    it('sums numbers', () => {
      expect(sum(1, 2)).toEqual(3);
      expect(sum(2, 2)).toEqual(4);
    });
    
    		
    npm test // under the root directory of the project
    		
    Copy Project
  • Directly copy a project created by create-react-app will cause launching errors
  • $ npm install -g npm@latest  # or, npm install -g npm@latest --prefix "C:\Program Files\nodejs"
    $ rm -rf node_modules        # or, `cmd /c rmdir /s /q node_modules` on Windows
    $ npm install
    		
    Reference
  • npm start fails after copying a generated project to a new directory
  • Tutorial
  • Documentation