How to add react to the wordpress
WordPress has a wp-element object. It is a react you can include by using next code
|
1 2 3 4 5 6 7 8 |
wp_enqueue_script( 'main', // plugin_dir_url(__FILE__).'js/main.js', plugin_dir_url(__FILE__).'js/main.js', ['wp-element', 'babel'], time(), // Change this to null for production true ); |
Now you can use react by using an object wp.element it has a render() function and others here is code of main file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
// import Test from 'components/Test.js' const Hello = () => <p>Hello World</p>; class Form extends wp.element.Component { render() { return ( <div> <div> <h1>Enter Your Text</h1> </div> <div> <input placeholder="Enter Your Text" /> </div> <div> <div> <label>Choose Font</label> </div> <div> <input /> </div> </div> <div> <div> <label>Paint Coverage</label> </div> <div> <select> <option>Choose Paint Coverage...</option> <option>Unpainted</option> <option>WallMount</option> <option>Standing</option> </select> </div> </div> <div> <div> Approx.Width: </div> <div> Enter text and select a Height to see Approx. Width. </div> </div> <div> Total Letter Count: 0 </div> <div> <input type="checkbox" /> </div> <div> <div>Starting At: $8.19</div> <div>Qty: <input /></div> <div><button type="submit" name="add-to-cart" value="12" class="single_add_to_cart_button button alt">Add to cart</button></div> </div> <div class="pr-field-wrap"> <label for="pr-field">Your name:</label> <input type="text" name='pr-field' id='pr-field' value='' /> </div> </div> ) } } let root = document.getElementById("root") if (root) { wp.element.render(<Form />, document.getElementById("root") ); } |
It won’t work without including babel
to include babel use
|
1 2 3 4 5 6 7 |
wp_enqueue_script( 'babel', plugin_dir_url(__FILE__).'js/babel.min.js', ['wp-element'], time(), // Change this to null for production true ); |
and we have to replace “<script type=’text/javascript‘” on “<script type=’text/babel‘”. We are using
|
1 2 3 4 5 6 7 8 9 |
function md_modify_jsx_tag( $tag, $handle, $src ) { // Check that this is output of JSX file if ( 'main' == $handle ) { $tag = str_replace( "<script type='text/javascript'", "<script type='text/babel'", $tag ); } return $tag; } add_filter( 'script_loader_tag', 'md_modify_jsx_tag', 10, 3 ); |
That’s it Now you can write JSX code.
Remember this is a not production build and will work slow. To make a production main.js have to transform es6 and JSX into es5 by using babel and save the code to the main.js file. A lot better use webpack and immediately bundle files and modules to the main.js
How to pass a json file from php to JavaScript react app
We need to pass a config.json file to the react app. To do this we have to use a wp_localize_script function. After including a react script we call this function with the passed parameters like in the code below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
wp_enqueue_script( 'main', plugin_dir_url(__FILE__).'js/app1/dist/app1.js', null, time(), // Change this to null for production true ); $dataToBePassed = array( 'home' => get_stylesheet_directory_uri(), 'pleaseWaitLabel' => __( 'Please wait...', 'default' ) ); wp_localize_script( 'main', 'php_vars', $dataToBePassed ); |
It will add a variables initialization before the main script wp passing variables to the frontend
Now we can reach them from a React Component by window.php_vars
|
1 2 3 4 5 6 7 |
class App extends React.Component { constructor(props) { super(props) // alert(window.php_vars) console.log('window.php_var = ', window.php_vars) } //... |
That’s it
How to remove quantity in woocommerce
I added my own react app by using the hook woocommerce_before_add_to_cart_button and after this app appeared quantity and the button, so I want to remove this because my react app were using its own quantity. To remove we need to add in the componentDidMount() the code
|
1 2 3 4 5 6 |
componentDidMount() { let quantity = document.querySelector('input[id*="quantity"]') if (quantity) { quantity.outerHTML='' } } |
That’s it
the end
And your contact form is not working!