# Bắt đầu dự án xây dựng WordpresJs (ok)
## Ví dụ 1: Tạo theme và id root
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\package.json
```
{
"name": "twentyseventeen",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^0.11.3",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.3",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\webpack.config.js
```
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require("path");
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/image.scss'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css",
chunkFilename: '[id].css',
}),
new HtmlWebpackPlugin({
title: 'Wordpress 😋 ReactJs',
template: 'src/index.html',
filename: 'index.html'
})
],
module: {
rules: [{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: 'dist/',
},
},
'css-loader'
],
},
{
test: /\.s[ac]ss$/i,
use: [{
loader: 'file-loader',
options: {
name: 'style.css',
},
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
}]
}
],
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
};
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\image.scss
```
$body-color: blue;
body {
color: $body-color;
}
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\index.html
```
WordPress - React Native
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\index.js
```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\App.js
```
import React from 'react';
class App extends React.Component {
render() {
return (
Hello World
);
}
}
export default App;
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen.babelrc
```
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\functions.php
```
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\index.php
```
Wordpress ReactJs Demo
>
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\style.css
```
/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
```
## Ví dụ 2: Tạo Component Header
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\App.js
```
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './Header';
class App extends React.Component {
render() {
return (
);
}
}
export default App;
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\src\Header.js
```
import React from "react";
import { Link } from "react-router-dom";
const Header = () => (
);
export default Header;
```
C:\xampp\htdocs\celestial\wp-content\themes\twentyseventeen\functions.php
```
add_data('celestial-script', 'data',
sprintf('var CelestialSettings = %s;',
wp_json_encode(
array(
'title' => get_bloginfo('name', 'display'),
'path' => $path,
'URL' => array(
'api' => esc_url_raw(get_rest_url(null, '/wp/v2/')),
'root' => esc_url_raw($url),
),
)
)
)
);
}
add_action('wp_enqueue_scripts', 'celestial_scripts');
?>
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://learnphp.gitbook.io/learnphp/wordpress/bat-dau-du-an-xay-dung-wordpresjs-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
 ?>/wp-content/themes/twentyseventeen/loading-icon.gif){kind=icon}