├── README.md
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── Components
├── Controls
│ ├── Select.js
│ └── Text.js
└── Output.js
├── index.css
└── index.js
/README.md:
--------------------------------------------------------------------------------
1 | #ReactJS Sample Text Generator
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](#running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sampletextgen",
3 | "version": "0.1.0",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.9.0"
7 | },
8 | "dependencies": {
9 | "axios": "^0.15.3",
10 | "react": "^15.4.2",
11 | "react-dom": "^15.4.2"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test --env=jsdom",
17 | "eject": "react-scripts eject"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/sampletextgen/4fa6a3ac471fb3e21611ab81c1e8b74615785021/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Sample Text Generator
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/sampletextgen/4fa6a3ac471fb3e21611ab81c1e8b74615785021/src/App.css
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './App.css';
3 | import Output from './Components/Output';
4 | import Select from './Components/Controls/Select';
5 | import Text from './Components/Controls/Text';
6 | import axios from 'axios';
7 |
8 | class App extends Component {
9 | constructor(props){
10 | super(props);
11 | this.state = {
12 | paras: 4,
13 | html: true,
14 | text: ''
15 | }
16 | }
17 |
18 | componentWillMount(){
19 | this.getSampleText();
20 | }
21 |
22 | getSampleText(){
23 | axios.get('http://hipsterjesus.com/api?paras='+this.state.paras+'&html='+this.state.html)
24 | .then((response) => {
25 | this.setState({text: response.data.text}, function(){
26 | console.log(this.state);
27 | });
28 | })
29 | .catch((err) => {
30 | console.log(err);
31 | });
32 | }
33 |
34 | showHtml(x){
35 | this.setState({html: x}, this.getSampleText);
36 | }
37 |
38 | changeParas(number){
39 | this.setState({paras: number}, this.getSampleText);
40 | }
41 |
42 | render() {
43 | return (
44 |
45 |
ReactJS Sample Text Generator
46 |
47 |
57 |
58 |
59 |
20 |
24 |
25 | )
26 | }
27 | }
28 |
29 | export default Select;
30 |
--------------------------------------------------------------------------------
/src/Components/Controls/Text.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 |
3 | class Text extends Component{
4 | constructor(props){
5 | super(props);
6 | this.state = {
7 | value: props.value
8 | }
9 | }
10 |
11 | onChange(e){
12 | this.setState({value: e.target.value}, function(){
13 | this.props.onChange(this.state.value);
14 | });
15 | }
16 |
17 | render(){
18 | return (
19 |
20 |
21 |
22 | )
23 | }
24 | }
25 |
26 | export default Text;
27 |
--------------------------------------------------------------------------------
/src/Components/Output.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 |
3 | class Output extends Component{
4 | constructor(props){
5 | super(props);
6 | this.state = {
7 | value: props.value
8 | }
9 | }
10 |
11 | render(){
12 | return (
13 |
14 | {this.props.value}
15 |
16 | )
17 | }
18 | }
19 |
20 | export default Output;
21 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | input{margin-right:20px;}
2 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import './index.css';
5 |
6 | ReactDOM.render(
7 | ,
8 | document.getElementById('root')
9 | );
10 |
--------------------------------------------------------------------------------