This article mainly introduces the use of React-router and webpack how to quickly build a react program, the following words not to say, interested can learn together.
Initializing a project
We first create an empty folder, then initialize the Package.json and fill in some basic information.
$ NPM Init
Next we start to install the dependencies, and my Package.json dependencies are as follows
"Devdependencies": {"
Babel": "^5.5.6",
"Babel-core": "^5.5.6",
"Babel-loader": "^5.1.4",
"history ":" ^1.13.1 ","
React ":" ^0.13.3 ",
" React-hot-loader ":" ^1.2.7 ",
" React-router ":" ^0.13.3 ",
" Webpack ":" ^1.12.6 ","
webpack-dev-server ":" ^1.12.1 "
To run the command:
After the project is created, we then create the necessary files and directories;
$ mkdir js css && touch index.html webpack.config.js
Webpack
Webpack is a modular processor that packs all your code into a static file and puts it in your development app.
Open Webpack.config.js, and then add the following code:
var webpack = require (' Webpack ');
Module.exports = {
entry: [
' webpack/hot/only-dev-server ', '
./js/app.js '
],
output: {
path : __dirname + '/build ',
filename: "Bundle.js"
},
module: {
loaders: [
{test:/\.js?$/, Loaders: [' React-hot ', ' Babel '], exclude:/node_modules/},
{test:/\.js$/, exclude:/node_modules/, Loader: ' Babel-loader '
{test:/\.css$/, Loader: "Style!css"}
]
},
plugins: [
new Webpack. Noerrorsplugin ()
]
};
This document has about four configuration items,,entry,outputmoduleplugins.
entry: Specifies the packaged entry file, each with a key value pair, which is a portal file.
output: Configure package results, path defines the output folder, filename defines the name of the packaged result file, and the [name] inside the filename is replaced by the key in the entry, and the/build/bundle.js in the example is the generated file.
Resolve: Defines the resolution module path configuration, commonly used is extensions, can be used to specify the suffix of the module, so when the introduction of the module does not need to write a suffix, will automatically complement.
module: Defines the processing logic for a module, where a series of loaders can be defined with loaders, as well as some regular. When a file that needs to be loaded matches the regular of test, it is processed. Here we use React-hot and Babel. Babel-loader is used to generate JS files when we use ES-6 for development. Finally we generated a style.css just an example that tells us how to introduce a style file, and we can actually load a loader such as Sass-loader.
loaderprocessing the file, which is why Webpack is powerful. For example, this definition of the general. JS end of the file is done with Babel-loader, and. Jsx end of the file will be Jsx-loader processing, and then after Babel-loader processing. Of course, these loader also need to be installed via NPM install.
plugins: This defines the plug-ins that need to be used, such as commonsplugin, when packaging multiple portal files, extracts the common parts, generating common.js.
NoErrorsPlugin: Defines whether the code is automatically reloaded when an error occurs.
This time we add the Script field to the Package.json.
"Scripts": {
"start": "Webpack-dev-server--hot--progress--colors",
"Build": "Webpack,--progress--colors"
}
This time we enter anpm startcommand time we will start a webpack server this time you can accesslocalhost:8080/webpack-dev-server/#/;if you use thenpm run buildtime to automatically generate the file under Bulid/.
Next we create a new index.html file
<!doctype html>
Now that we have access to the browser, we can introduce the newly created bundle.js, and you can actually bring in any resources you want.
React-router
To complete the basic creation of the project, we then create the entry file for the App.js project.
The code is as follows:
Import react from ' react ';
Import Router from ' React-router ';
Import {defaultroute, Link, Route, Routehandler} from ' React-router ';
Import Loginhandler from './components/login.js ';
Let App = React.createclass ({
render () {return
(
<div classname= "nav" >
<link to= "APP" > home</link>
<link to= "Login" >Login</Link>
{* * * * is the importtant part/}
< routehandler/>
</div>
}
);
Let routes = (
<route name= "app" Path= "/" handler={app}> <route name=
"Login" path= "/login" handler={ loginhandler}/>
</Route>
);
Router.run (routes, function (Handler) {
react.render (
The head of the article is the introduction of the React and React-router plug-in package we will be using. Colleagues we also introduced login.js as our login react component. Next, we use react to create a class. In this case, a simple navigation bar appears in all of the subassemblies. We simply link to our routing: app and login. Then react route will be initialized by the Routehandler component.
In this app, we define the route and specify the appropriate handler (react component). We have defined our root path as the app, and the other address will be a subassembly of the app. In this example, we added a login page for the user to log in to the app.
Finally, React-router will load everything we have defined into thedocument.bodymiddle. This is index.html turn into our react App.
Components
Here we are, we need to add the component (components). In our/js directory, we need to start creating components.
We create Login.js:
Import react from ' react ';
Let Login = React.createclass ({
render () {return
(<div>welcome to login</div>);
}
});
It's actually a very simple component that shows "Welcaome to Login." This time we can run our app.npm startthen accesshttp://localhost:8080/webpack-dev-server/#
At this point, you can see that there are two links home and login on a navigation bar. If you click Login this time you can show what we just created.
If all goes well, now you can create more content yourself to enrich your app. If you use flux in your project, you can use any structure under your JS folder.
Release
We actually have a lot of ways to get your services online, but the very good thing is that Webpack can easily use the generated files. Where you can quickly put these resource files on the CDN, and then put the index.html on the host, update our script path on it.
Summarize
The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange. Thank you for your support to the cloud-dwelling community.
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
