At the initial stage, you can use the online editing site to learn react basic grammar.
Starting with Hello world, you can write on Codepen, or Codesandbox.
Of course, you can also use NPM or yarn to install dependencies and develop locally.
This first explains how to create a react project through Create-react-app, which will explain in detail how to create a react project with Webpack.
Detailed documentation can go to GitHub to view Github.com/facebook/create-react-app.
First install node. js, which downloads the installation package directly on the node website. It is recommended to download the long-term support version with fewer bugs.
After installation, enter in terminal or cmd
npm -v
If you want to use NPX, make sure that the NPM version is greater than 5.2. If the NPM version is low, use
npm i -g npm
Update NPM to the latest version, you can use NPX. For more information about NPX, you can view this article.
If you use yarn, you can also go to the yarn website to download the installation.
Official introduction of 3 ways to create a react-app.
1.npx
npx create-react-app my-app
2.NPM init xxx Your-app
npm init react-app my-app
NPM init is equivalent to a NPX command package, which explains the NPM document-INIT|NPM.
It is important to note that this method requires a higher version of npm,6+.
3.yarn
yarn create react-app my-app
I personally recommend using yarn to manage NPM dependencies, faster and easier to get started. The version of yarn here requires 0.25+.
Wait until the dependent installation is complete and enter into the newly created My-app directory.
├── node_modules ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lock
Create-react-app only installs a dependency that can run at least one react-app, and the example is simple, now let's run it.
yarn start
After running successfully, you can see this example in http://localhost:3000.
Now the most common building tool for front-end development is webpack. The next step is to build a simple react-app with Webpack.
Create a new directory first.
mkdir webpack-react-appcd webpack-react-appnpm init -y
At this time, there will be a Package.json in the catalogue. Next, we create a new HTML file that is stored in the Dist directory as a vector.
mkdir distcd disttouch index.html
Its code is as follows
<!DOCTYPE html>
<html>
<head>
<title>webpack react app</title>
</head>
<body>
<div id="app"></div>
<script src="/main.js"></script>
</body>
</html>
The id here defaults to app, which can be modified during specific writing. main.js is also generated by webpack itself and can be modified.
Install webpack
Next install some webpack dependencies.
yarn add -D webpack webpack-dev-server webpack-cli
After installation, configure the startup command in package.json.
...
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
...
},
...
--mode is used to configure the mode. It can distinguish between build or development mode. If it is a build release, remove some plug-ins such as tips during development.
--config points to the webpack configuration file. The default is webpack.config.js in the same directory.
Configure webpack
Next we create webpack.config.js.
touch webpack.config.js
Its basic code is as follows:
module.exports = {
entry: './src/index.js', // webpack entry file
output: {// Output directory configuration
path: __dirname + '/ dist',
publicPath: '/',
filename: 'main.js'
},
devServer: {// Configuration of the server during development
contentBase: './dist'
}
};
By convention, src / index.js is our default entry. After packaging is complete, generate a main.js to the dist directory. After DevSever is configured, we can access the files under dist in the browser.
Next you need to write src / index.js.
console.log ('webpack test');
Terminal run
yarn start
Open http: // localhost: 8080 to see the console output.
The webpack test is output normally.
The next step is to introduce react.
Install babel
React uses jsx syntax. It needs to be escaped with babel to be read by the browser.
Install babel and dependencies
yarn add -D babel-core babel-loader babel-preset-env babel-preset-react
New babel configuration file
touch .babelrc
The configuration is as follows:
{
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions", "safari> = 7"]
}
}]
]
}
For specific babel-preset-env configuration, you can view the babel documentation-babel-preset-env configuration.
After installation, the new webpack.config.js is configured as
module.exports = {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: / node_modules /,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
...
};
Then you can install react dependencies.
yarn add -D react react-dom
Rewrite index.js.
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'Hello World!';
ReactDOM.render (
<div> {title} </ div>,
document.getElementById ('app')
);
Run it
yarn start
Ok, a simple react-app was created successfully.
The next article will explain the basic concepts and syntax of react.
thanks for reading.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
