├── .babelrc
├── .gitignore
├── Readme.md
├── dist
├── angular.min.js
└── react.min.js
├── index.html
├── main.js
├── package.json
├── src
├── angular
│ └── reactDirective.js
└── react
│ └── Layout.js
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015","stage-0","react"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | node_modules
3 | *.log
4 | coverage
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # Use ReactJS along with Angular 1.X
2 |
3 | This repository shows how you can use ReactJs in your existing AngularJS 1.X app.
4 |
5 | ----------
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Angular 1.x with React
12 |
13 |
14 |
15 |
16 |
34 |
35 |
36 |
37 |
38 |
Angular TO-DO
39 |
{{remaining()}} of {{todos.length}} remaining
40 |
41 | -
42 | {{todo.text}}
43 |
44 |
45 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
14 |
15 |
React TO-DO
16 |
{this.props.todos.map((todo,key)=>{
17 | return - {
18 | this.props.markComplete(todo)
19 | }
20 | } className={["list-item", todo.done === true? "done-true":"done-false"].join(" ")}>{todo.text}
21 |
})
22 | }
23 |
27 |