Search
bootstrap form basic
a nice simple bootstrap form layout example template
validate email address from string with jquery working function
Here is a working example of this post validate email address from string. This has very basic checking of an email address by checking that the string has an @ and a . in it. Note: this is still no..
Using props with Stateless Functional Components in React
Here is an example of a Stateless Functional Component but i cant get the PropTypes working correctly in my demo, not sure what im doing wrong here, but the code seems to work in the compiler just not..
How to Access Props Using this.props in React
If you would like to access a class component prop within its self you can do this using the this keyword.
How to Use PropTypes to Define Props in React
React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element. To do this you can define propTypes. You can defin..
How to Override Default Props in React
The following code explains how you can override the default props in react. In this example the default of quantity is set to 0, so we can pass in quantity in the items to override its default..
log the console log output to a div
I do a lot of console logging so i thought it would be nice to be able to see this on my test pages. Apparently you can grab this quite easily with the following code. I had to modify this a b..
How to use default props in React
If you dont want to specify props every time you use an element, you can also specify defaults for these items. This can also be useful to remember which props are needed per component. This can be a..
How to Pass an Array as Props in React
If you need to pass larger amounts of information to a component you can pass in an array rather than just a single variable. More information on the join method on the array can be found here. Here..
How to Pass Props to a Stateless Functional Component in React
Props are like properties that you can pass into a component in react. A prop would be something like this in your component. JSX <div> <MyProp id="1234" /></div> The..
How to Write a React Component from Scratch
Just testing my react component writing skills...
How to Render a React Class Component to the DOM
This shows how you can get react to render a component into the page or DOM. So actually getting and showing the code that you have been writing in react.
How to Compose React Components in React
In this code we nest the components NonCitrus and Citrus into the Fruits Component. Then nest the Fruits within the TypesOfFood component. Also added the additional components, Vegetables, Non..
How to Use React to Render Nested Components
It can be useful to take components and render them inside other components while still making them into seperate items. This shows how you can take each component and nest it within another one and ..
How to Create a Component with Composition in React
This shows how you can compose multiple React components together. In this example we return the parent component which has within it the child component, you can add as many child components as requ..
How to Create a React Component using the ES6 class method
One way to add a react component is to use the Stateless Functional Component method, and another way is to use the ES6 extends syntax. This method seems more complex than the 1st for some reason mayb..
foundation base html template - foundation template
just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.
What is a Stateless Functional Component in React
What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it. This method creates ..
How do Self-Closing JSX Tags Work?
So in JSX all the tags must be closed, other wise it can break the element. for example: <div> must have a closing </div> and also for elements like <br> and <hr> must include..
How to Define a HTML Class in JSX in React
When writing JSX you cant add classes like you would in HTML so this code would not work: JSX <div class="my-class"></div> Instead we have to use className. JSX uses camel case for a l..
How to Render HTML Elements to the DOM with React
Once you have a JSX element defined you can write it to the page with ReactDOM.render(componentToRender, targetNode), In this example we are targeting the div with the id challenge-node. JSX ..
How to Add Comments in JSX
To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text. You do actually need the curley brackets, and have to add it under the other elements for this to wor..
Create a Complex JSX Element
JSX must return a single element, so you must wrap your items in a div element you cant just return a bunch of p tags. Define a new constant JSX that renders a div which con..
Create a Simple JSX Element
The current code uses JSX to assign a div element to the constant JSX. Replace the div with an h1 element and add the text Hello JSX! inside it.
adding react with JSX using babel
just wanted to see how JSX would work with react and babel, so this way you can write JSX and babel compiles it for use with react. This is apparently not a good way to do things and can be qui..
react hello world with time and date updating
here is a react hello world with the date and time updating on setInterval 1000 miliseconds. Again with react it has to be compiled from JSX for it to work, so i have included the original and ..
react hello world with variable name
i was just testing some of the hello world examples on the react site, and as they use JSX they cant be directly entered into your code, so you need to run a pre compiler (not sure of the exact term f..
react basic hello world
the most basic hello world using react js
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
easy section wrap in foundation
i am always writing these wrap sections so i thought i would just add a basic one here, easy to copy and paste into a new section
fancybox load iframe inline
All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going.
center mode slick zoom testing
update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..
add some foundation tabs working example
they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..
Monitoring Visible Objects on Screen
i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..
