React Quick Start – 03 Scaffolding creation project Everything is a component

The target

  • Create projects through scaffolding
  • Run the project
  • Project closure structure
  • Creating components by hand

Create a project

I recommend scaffolding as a starting point. When you start learning, you start messing around with Webpack Babel and setting up your own runtime environment. Then you’ll find yourself with a lot of knowledge to add and forget that I started out just to run React.

This article discusses the nPM-built environment, if you run directly in the browser, you need to write directly in ES5, otherwise you will encounter compatibility issues.

Let’s get started!

1. Install scaffolding

cnpm install -g create-react-appCopy the code

For NPM acceleration, see the previous article

2. Implement scaffolding procedures

cd ~/Documents/labs
create-react-app reactjs-exampleCopy the code

I created a special LABS directory for testing various programs so that you don’t mess up your disk directory

video

3. Run the project

cd reactjs-example
npm startCopy the code

video

Open your browser http://localhost:3000/

See this clean page, you can rest assured that everything is fine

The directory structure

. ├ ─ ─ the README. Md | help explain ├ ─ ─ the build directory released | ├ ─ ─ package. The json | NPM package management ├ ─ ─ public | home page template │ ├ ─ ─ the favicon. Ico │ ├ ─ ─ index. The HTML │ └ ─ ─ the manifest. Json ├ ─ ─ the SRC | source │ ├ ─ ─ App. CSS │ ├ ─ ─ App. Js │ ├ ─ ─ App. Test, js │ ├ ─ ─ index. The CSS │ ├ ─ ─ index. The js │ ├ ─ ─ Logo. SVG │ └ ─ ─ registerServiceWorker. JsCopy the code

Most of our content is done under SRC

Write a simple one to start with

Edit the app.js file

Import React, {Component} from 'React' const Element1 = () => <h2> Component 1 - constant </h2> export default Element1Copy the code

Output: Component 1 – constant

Just three lines, so you can try it yourself

Js objects that can be used as components are as follows:

1. Constant components

Const Element1 = () => <h2> Component 1 - Constant </h2>Copy the code

2. Variable components

Let Element2 = () => <h2> Component 2 - variable </h2>Copy the code

3. Es5 function components

Function Element3() {return <h2> component 3 - es5 function </h2>}Copy the code

4. Es6 arrow function component

Let Element4 = () => {return <h2> component 4 - ES6 arrow function </h2>}Copy the code

5. React.Com Ponent component

Class Element5 extends Component {render() {return <h2> </h2>}}Copy the code

Es6 classes are not componentsImportant! 

Class Element6 {render() {return <h2> component 6 - es6 class object </h2>}}Copy the code

Error after run!

Debug code using codepen

IO /ducafecat/ codepen. IO /ducafecat/

This article code codepen

Codepen. IO/ducafecat /….

Compile the project

cd reactjs-example
npm run buildCopy the code

After successful execution, the /build directory is generated and placed directly on your server to display ~

video

In this paper, the code

  • reactjs-example / 1-introducing.js

Refer to the article

  • Create React App
  • Git create-react-app
  • react-scripts