Use Parcel packaged React HelloWorld app. GitHub address: github.com/justjavac/p…

0. Create a directory

mkdir react-helloworld
cd react-helloworld
Copy the code

1. Initialize the NPM

yarn init -y
Copy the code

or

npm init -y
Copy the code

The package.json file will be created with the following contents:

{
  "name": "parcel-example-react-helloworld"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"
}
Copy the code

2. Add the React

Yarn:

yarn add react react-dom
Copy the code

npm:

npm install react react-dom --save
Copy the code

Package. json file contents:

{"name": "parcel-example-react-helloworld", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "",- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+ "react" : "^ 16.2.0",
+    "react-dom": "^16.2.0"
+}
 }
Copy the code

3. Add the Babel

Create a new.babelrc file

touch .babelrc
Copy the code

Input content:

{
  "presets": ["react"]}Copy the code

Add the Babel – preset – react:

Yarn:

yarn add babel-preset-react -D
Copy the code

npm:

npm install babel-preset-react --D
Copy the code

At this point, the package.json file contents:

{"name": "parcel-example-react-helloworld", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies" : {" react ":" ^ 16.2.0 ", "the react - dom" : "^ 16.2.0"-}
+},
+ "devDependencies": {
+ "Babel - preset - react" : "^ 6.24.1"
+}
 }
Copy the code

5. Add the Parcel

Yarn:

yarn add parcel-bundler -D
Copy the code

npm:

npm install parcel-bundler --D
Copy the code

At this point, the package.json file contents:

{"name": "parcel-example-react-helloworld", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies" : {" react ":" ^ 16.2.0 ", "the react - dom" : "^ 16.2.0"}, "devDependencies" : {- "Babel - preset - react" : "^ 6.24.1"
+ "Babel - preset - react" : "^ 6.24.1",
+ "parcel - bundler", "^ 1.0.3"}}Copy the code

6. Create the index. HTML file

content

<html>

<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>

</html>
Copy the code

7. Create the index.js file

import React from "react";
import ReactDOM from "react-dom";

const App = (a)= > {
  return <h1>Hello World!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));
Copy the code

8. Add the package command

{" name ":" parcel - example - the react - the helloworld ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "parcel index.html"}, "keywords" : [], "author" : ""," license ":" ISC ", "dependencies" : {" react ":" ^ 16.2.0 ", "the react - dom" : "^ 16.2.0"}, "devDependencies" : {" Babel - preset - react ":" ^ 6.24.1 "" Babel - preset - react" : "^ 6.24.1", "parcel - bundler" : "^ 1.0.3"}}Copy the code

9. Complete

run

yarn start
Copy the code

or

npm start
Copy the code

Open http://localhost:1234 in your browser

Cache and dist directories are generated during the packaging process. Gitignore files can be created to ignore these two directories.

.cache
dist
node_modules
Copy the code

GitHub address: github.com/justjavac/p…