Rendering with reactjs - javascript

I am creating a sample app using reactjs. I am very new in reactjs. I set up all the things for reactjs like
1) Babel
2)Webpack
Using webpack I am genrating a file code.js which is included in the index file where all the code runs.
I am creating my first page but i got error like:
ERROR in ./components/Login/Login.js
Module build failed: SyntaxError: C:/xampp/htdocs/reactApp/components/Login/Logi
n.js: Expected corresponding JSX closing tag for <img> (18:33)
I dont know why the html rendering gives me error.
My code is like:
import React, {Component} from 'react';
import {Link} from 'react-router'
export default class Home extends Component {
render () {
return (
<div class="page-content container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="box">
<div class="content-wrap">
<h6>Sign In</h6>
<div class="social">
<a class="face_login" href="#">
<span class="face_icon">
<img src="images/facebook.png" alt="fb">
</span>
<span class="text">Sign in with Facebook</span>
</a>
<div class="division">
<hr class="left">
<span>or</span>
<hr class="right">
</div>
</div>
<input class="form-control" type="text" placeholder="E-mail address">
<input class="form-control" type="password" placeholder="Password">
<div class="action">
<a class="btn btn-primary signup" href="index.html">Login</a>
</div>
</div>
</div>
<div class="already">
<p>Dont have an account yet?</p>
Sign Up
</div>
</div>
</div>
</div>
</div>
)
}
}
Please help me to solve this problem

There is at least one more problem: You used class= instead of className= everywhere. Obviously you did try to copy & paste html code. There is a great online converter which i use. It allows you to do that without errors: http://magic.reactjs.net/htmltojsx.htm
import React, {Component} from 'react';
import {Link} from 'react-router'
export default class Home extends Component {
render () {
return (
<div className="page-content container">
<div className="row">
<div className="col-md-4 col-md-offset-4">
<div className="login-wrapper">
<div className="box">
<div className="content-wrap">
<h6>Sign In</h6>
<div className="social">
<a className="face_login" href="#">
<span className="face_icon">
<img src="images/facebook.png" alt="fb" />
</span>
<span className="text">Sign in with Facebook</span>
</a>
<div className="division">
<hr className="left" />
<span>or</span>
<hr className="right" />
</div>
</div>
<input className="form-control" type="text" placeholder="E-mail address" />
<input className="form-control" type="password" placeholder="Password" />
<div className="action">
<a className="btn btn-primary signup" href="index.html">Login</a>
</div>
</div>
</div>
<div className="already">
<p>Dont have an account yet?</p>
Sign Up
</div>
</div>
</div>
</div>
</div>
)
}
}
Hope you found this useful.

The error clearly mentions what needs to be done. In JSX you need to close the singleton tags like <br> , <img> and <input>
import React, {Component} from 'react';
import {Link} from 'react-router'
export default class Home extends Component {
render () {
return (
<div class="page-content container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="box">
<div class="content-wrap">
<h6>Sign In</h6>
<div class="social">
<a class="face_login" href="#">
<span class="face_icon">
<img src="images/facebook.png" alt="fb" />
</span>
<span class="text">Sign in with Facebook</span>
</a>
<div class="division">
<hr class="left">
<span>or</span>
<hr class="right">
</div>
</div>
<input class="form-control" type="text" placeholder="E-mail address" />
<input class="form-control" type="password" placeholder="Password" />
<div class="action">
<a class="btn btn-primary signup" href="index.html">Login</a>
</div>
</div>
</div>
<div class="already">
<p>Dont have an account yet?</p>
Sign Up
</div>
</div>
</div>
</div>
</div>
)
}
}

Related

Vue Js component wont display in Blade view Laravel

My Blade View 'chat.blade.php'
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading"</div>
<div class="panel-body">Chats
<chat-messages :messages="messages"></chat-messages>
</div>
<div class="panel-footer">
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}"
></chat-form>
</div>
</div>
</div>
</div>
</div>
#endsection
This code is extend from app.blade.php, which probably its not really the main focus of the problem
and here is My 2 Component From My Vue JS
'ChatMessages.vue'
<template>
<ul class="chat">
<li class="left clearfix" v-for="message in messages">
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">
{{ message.user.name }}
</strong>
</div>
<p>
{{ message.message }}
</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages']
};
</script>
and here is the 'ChatForm.vue'
<template>
<div class="input-group">
<input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="newMessage" #keyup.enter="sendMessage">
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendMessage">
Send
</button>
</span>
</div>
</template>
<script>
export default {
props: ['user'],
data() {
return {
newMessage: ''
}
},
methods: {
sendMessage() {
this.$emit('messagesent', {
user: this.user,
message: this.newMessage
});
this.newMessage = ''
}
}
}
</script>
and here is the following screenshot of the problem
Click here for the Picture
as you can see in the screenshot, the chat component from vue.js listed below, wont show up, its just appear blank, only displaying scrollbar,navbar and 'Chats' text. which is came from app.blade.php]
Please help me :). Thanks
You do not commit any messages to your component. :messages="messages" is Vue syntax.
Assuming your controller assigns $messages to your view:
<chat-messages messages="{{ json_encode($messages) }}"></chat-messages>
should do it. You need to use blade variables to assign

How to Integrate html with ReactJS

I am working on the reactjs project.
what happened
I have following reactjs code written into javascript file.
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactBootstrap, { Jumbotron, Container, Row, Col, Column, Image, Button } from 'react-bootstrap';
class Homepage extends Component {
render() {
return (
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(../../Assets/images/img_bg_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center slider-text">
<div class="slider-text-inner">
<h1>abc</h1>
<p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
);
}
}
export default Homepage;
what is issue
when i try to compile using npm start , it throws following error :
Error: The style prop expects a mapping from style properties to
values, not a string. For example, style={{marginRight: spacing +
'em'}} when using JSX.
in li (at homePage.js:13)
in ul (at homePage.js:12)
in div (at homePage.js:11)
in aside (at homePage.js:10)
in Homepage (created by Context.Consumer)
not able to understand, how to integrate html code into reactjs router dom. is this something style issue OR the version mismatch issue.
version details :
react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
please suggest.
ReactJs uses JSX instead of html (https://reactjs.org/docs/introducing-jsx.html). There are some differences, for example, instead of "class" you must use "className". Instead
style="background-image: url(images/img_bg_2.jpg)";
you must use
style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}
Your code should look like this:
<aside id="fh5co-hero">
<div className="flexslider">
<ul className="slides">
<li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
<li style={{backgroundImage: 'url(images/img_bg_3.jpg)'}}>
<div className="overlay-gradient" />
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2 text-center slider-text">
<div className="slider-text-inner">
<h1>abc</h1>
<p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
by default react( aka: JSX ) can't have inline styles like what you pasted therem you need to convert them to JSS style like below:
// for example "background-image: url(images/img_bg_3.jpg);
<li style={{ backgroundImage: 'url(SOME_IMAGE_URL)' }}> ... </li>
<li style={{ backgroundImage: `url(${IMPORTED_IMAGE})` }}> ... </li>
This code <li style="background-image: url(../../Assets/images/img_bg_1.jpg);">
Should be <li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>
The style prop in React expects an object and not a CSS string.
The style attribute is written in react js as follows
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
Note that we can't use dash between words (-) flex-direction is turned to felxDirection and so on
also the value has to be put inside single or double quotes

close toggle in javascript by default

I have this code
$(".filter-tag-group .tag-group .show_filter_content").on('click', function() {
var $icon = $(this).find('i').toggleClass('fa-plus fa-minus');
var $group = $icon.closest('.tag-group');
$group.find('.filter-title').toggleClass('active');
$group.find('.filter-content').toggle();
});
which the result is:
As you see all my groups are open by default, I want them to be closed when page loads (default).
HTML
<div class="collection-leftsidebar sidebar col-sm-3 clearfix">
<div class="sidebar-block filter-block">
<div class="sidebar-title">
<span>{{ __('Advanced Search') }}</span>
<i class="fa fa-caret-down show_sidebar_content" aria-hidden="true"></i>
</div>
<div id="tags-filter-content" class="sidebar-content">
<div class="filter-tag-group">
//this is the part that looping (need to be closed)
<div class="tag-group">
<p class="title">
<span class="filter-title show_filter_content">{{ __('Price Range') }} <span class="pull-right"><i class="fa fa-minus"></i></span></span>
</p>
<div class="row filter-content">
<div class="col-md-6">
<div class="form-group">
<label for="min_price" hidden>{{ __('Min') }}</label>
<input type="text" name="min_price" class="form-control" placeholder="Rp Min">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="max_price" hidden>{{ __('Max') }}</label>
<input type="text" name="max_price" class="form-control" placeholder="Rp Max">
</div>
</div>
</div>
</div>
</div>
</div>
which part of my script should I change to achieve that?
How about hide it by css. coz css will load first than javascript/jquery. So in your case you want to hide it by default so you must done it by css.
.[class-name here] {
display: none;
}
.[class-name here].active {
display: block;
}

jquery geocomplete not working with vue js

When I wrap a form with jquery geocomplete in a Vue modal, the geocomplete stops working. I'm not sure how to fix it so that geocomplete works when the modal is active.
Here is a working example without Vue or a modal:
https://jsfiddle.net/3gzovugy/68/
Here is the same example, wrapped in the vue site's example modal, that won't geocode. Any suggestions?
https://jsfiddle.net/3gzovugy/96/
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<modal v-if="showModal" #close="showModal = false">
<div slot="body">
<form>
<div class="item">
<input id="autocomplete" placeholder="Look up your address" type="text">
</div>
<div class="item">
<input class="cat_textbox" id="houseNo" data-geo="street_number" type="text" placeholder="House Number" maxlength="50" />
</div>
<div class="item">
<input class="cat_textbox" id="street" data-geo="route" type="text" placeholder="street" maxlength="50" />
</div>
<div class="item">
<input class="cat_textbox red" id="BillingAddress" data-geo="street_address" type="text" placeholder="Billing Address" maxlength="50" name="BillingAddress" />
</div>
</form>
</div>
</modal>
</div>
<template id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
I see your geocomplete related code is in $(document).ready(function(). Taking inspiration from this answer, you can move code inside document.ready to one of the lifecycle hooks for this purpose. You can try using mounted as it comes pretty close to $(document).ready():
Vue.component('modal', {
template: '#modal-template',
mounted () {
$("#autocomplete").geocomplete({
details: "form div",
detailsAttribute: "data-geo",
types: ["(cities)"],
componentRestrictions: {
country: "in"
}
});
}
})
With these changes, you code starts to show suggestion: check here. You may need some other UI changes to see the geocomplete dropdown on top.

Call Action method from jquery popup modal

OK I have made many searches before posting this but I couldn't really get what I needed, the thing is I have a popup modal for login/register
<!--Signin/Signup container-->
<div id="modal" class="popupContainer" style="display:none;">
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">سجل عن طريق الفيس بوك</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">سجل عن طريق كوكل</span>
</a>
</div>
<div class="centeredText">
<span>أو استخدم الايميل الخاص بك</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last"> Register</div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>الايميل / اسم المستخدم</label>
<input type="text" />
<br />
<label>كلمة السر</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> رجوع</div>
<div class="one_half last">Login</div>
</div>
</form>
هل نسيت كلمة المرور؟
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>الاسم الكامل</label>
<input type="text" />
<br />
<label>عنوان البريد الألكتروني</label>
<input type="email" />
<br />
<label>كلمة المرور</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Register</div>
</div>
</form>
</div>
</section>
</div>
<!--Signin/Signup End-->
and this is the script:
<script>
// Plugin options and our code
$("#modal_trigger").leanModal({
top: 100,
overlay: 0.6,
closeButton: ".modal_close"
});
$(function () {
// Calling Login Form
$("#login_form").click(function () {
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function () {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
});
/*--------------------------------*/
</script>
</div>
Now what I need is to create an action method so when the user click Register or Login it get called to do what necessary
How can I do that. my knowledge in jquery and javascript is kind of limited
I will appreciate any help.
thank you in advance
Attach ids to your buttons:
<div id = "login_button" class="one_half last">Login</div>
Then attach an event listener to them:
$("#login_button").click(function() {
// Do something
});
Same for the Register button.

Categories