├── Body Background Color Changer
├── index.html
└── main.jsx
├── README.md
└── React-Font-Tester
├── main.jsx
└── index.html
/Body Background Color Changer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React JS
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Beginner React.js Projects
2 |
3 | Hey there! I am learning Facebook’s React! These are the projects I have built along the way. I will be updating the projects as I discover new and more efficient techniques.
4 |
5 | #About the build directory
6 | build/ directory holds `react.min.js` and `JSXTransformer.js` required files.
7 |
8 | Some of these Projects are inspired by Egghead.io's React tutorials that I am going through.
9 |
10 | #If you want to clone
11 | If you would like to clone and try out some of the projects on your machine, make sure you test the examples in a browser that allows corss origin file lookups like Firefox. Or you can run a simple HTTP server and test these in any browser.
12 |
13 | #Projects
14 |
15 | ##1. Body Background color Changer
16 | 
17 |
18 | ##2. React font tester
19 | 
20 |
--------------------------------------------------------------------------------
/React-Font-Tester/main.jsx:
--------------------------------------------------------------------------------
1 | var App = React.createClass({
2 | render: function() {
3 | return(
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 | });
17 |
18 | // The main input field
19 | var Input = React.createClass({
20 | // Now we need a funciton that fires up everytime we start typing in the input and then updates the relevant text
21 | update: function() {
22 | var currentValue = this.refs.main_input.getDOMNode().value;
23 | var outputNodes = document.getElementsByClassName('output');
24 | for(outputNode in outputNodes) {
25 | if(outputNodes.hasOwnProperty(outputNode)) {
26 | outputNodes[outputNode].textContent = currentValue;
27 | }
28 | }
29 | },
30 | render: function() {
31 | return(
32 |
33 |
34 |
35 | );
36 | }
37 | });
38 |
39 | // This is the component in which the output text will be displayed
40 | var Output = React.createClass({
41 | componentWillMount: function () {
42 | this.props.val = this.props.children || "Hello, world" ;
43 | },
44 | render: function() {
45 | var divStyle = {
46 | fontFamily : this.props.font,
47 | fontSize : 28
48 | };
49 | return(
50 |
51 |
52 | {this.props.font}
53 |
54 |
55 | {this.props.val}
56 |
57 |
58 | );
59 | }
60 | });
61 |
62 | React.render(, document.getElementById('app'));
--------------------------------------------------------------------------------
/React-Font-Tester/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React JS
5 |
6 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/Body Background Color Changer/main.jsx:
--------------------------------------------------------------------------------
1 |
2 | // refs are a way to keep track of your components in react
3 |
4 | var APP = React.createClass({
5 | // To specify the types and required options for the properties of this component
6 | propTypes:{
7 | txt: React.PropTypes.number.isRequired
8 | },
9 | // A component has state and props
10 | // Props are immutable 'options' that are passed into the components
11 | // State are like private mutable variables whose values can change by events triggered on the component
12 | getInitialState: function() {
13 | return {txt: ''}
14 | },
15 | // A custom user defined function
16 | update: function() {
17 | this.setState({
18 | red: this.refs.red.refs.range.getDOMNode().value,
19 | green : this.refs.green.refs.range.getDOMNode().value,
20 | blue: this.refs.blue.refs.range.getDOMNode().value
21 | });
22 |
23 | // Update the background color of the body
24 | var color = 'rgb(' + this.state.red + ', ' + this.state.green + ', ' + this.state.blue + ')';
25 | document.body.style.backgroundColor = color;
26 | },
27 | // We will initialize a new component (Slider) inside of another component(APP)
28 | // This establishes a Owner ownee relation ship, APP component is owner of Slider component
29 | render: function() {
30 | return (
31 |