How to create a React Hello World from scratch
Directory structure
|
1 2 3 4 5 6 7 8 9 |
/ │ package.json │ webpack.config.js │ └───src/ │ index.html │ └───js/ index.js |
Initialize the project
|
1 2 3 4 |
mkdir -p reactHelloWorld mkdir -p reactHelloWorld/src mkdir -p reactHelloWorld/src/js cd reactHelloWorld |
Install dependencies
Content of the package.json file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "dependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.3.2", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "http-server": "^0.9.0", "react": "^15.4.2", "react-dom": "^15.4.2", "webpack": "^2.2.1" } } |
And then, install dependencies:
|
1 |
npm install |
Webpack configuration
Content of the webpack.config.json file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var webpack = require('webpack'); var path = require('path'); var SRC_DIR = path.resolve(__dirname, 'src'); module.exports = { entry: SRC_DIR + '/js/index.js', module: { loaders: [ { test: /\.js?$/, loader:'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, output: { path: SRC_DIR, filename: 'app.min.js' } }; |
App files
index.html
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <meta charset="utf-8" /> <title>ReactJS</title> </head> <body> <div id="app" /> <script async src="app.min.js" type="text/javascript"></script> </body> </html> |
src/js/index.js
|
1 2 3 4 5 6 7 8 9 10 |
import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render () { return <p>Hello World!</p>; } } render(<App/>, document.getElementById('app')); |
Built and Run
|
1 2 |
./node_modules/.bin/webpack -d ./node_modules/.bin/http-server src |
That’s it !
Comments (0)