Very simple app (in CodePen : https://codepen.io/anon/pen/JOjevM)
const App = () => (
<div>
<h1>Cool App</h1>
</div>
)
ReactDOM.render(<App/>,document.getElementById("app"));
or
import React from 'react'
import { render } from 'react-dom'
render(<App/>,document.getElementById("app"));
const Home = () => (
<div>
<h1>Home</h1>
</div>
);
equals
class Home extends React.Component {
render () {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
ancient :
var Home = React.createClass({
render: function () {
return (
<div>
<h1>Home</h1>
</div>
);
}
});
const Detail = props => {
console.log("Place to execute JS logic before rendering");
return (
<div>
<h1>Home</h1>
</div>
)
}
Creating an API
const PlayerAPI = {
players: [
{ number: 1, name: "Ben Blocker", position: "G" },
{ number: 2, name: "Dave Defender", position: "D" },
{ number: 3, name: "Sam Sweeper", position: "D" },
{ number: 4, name: "Matt Midfielder", position: "M" },
{ number: 5, name: "William Winger", position: "M" },
{ number: 6, name: "Fillipe Forward", position: "F" }
],
all: function() {
return this.players;
},
get: function(id) {
const isPlayer = p => p.number === id;
return this.players.find(isPlayer);
}
};
Using the API
const App = () => (
<div>
<h1>Cool App</h1>
<ul>
{PlayerAPI.all().map(p => (
<li key={p.number}>
<div>{p.name}</div>
</li>
))}
</ul>
</div>
);
Other component
const Detail = (props) => (
<div>
{props.player.name}
</div>
);
or shorter:
const Detail = ({player}) => (
<div>
{player.name}
</div>
);
Using the component:
ReactDOM.render(
<Detail player={PlayerAPI.get(1)} />,
document.getElementById("app"));```
You need to import some stuff :
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './components/App';
or
const { BrowserRouter, Switch, Route, Link } = ReactRouterDOM;
and code:
render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
Your main app should define the top level routes
const App = () => (
<div>
<Header />
<main>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/master-detail" component={MasterDetail} />
<Route path="/about" component={About} />
</Switch>
</main>
</div>
);
Our header section simply displays the links to the routes
const Header = () => (
<header>
<Link to="/">Home</Link>
<Link to="/master-detail">MasterDetail</Link>
<Link to="/about">About</Link>
</header>
);
When we click a link, a certain route is activated and the assoicated component is rendered.
When clicking masterdetail link, the MasterDetail component is rendered:
const MasterDetail = () => (
<Switch>
<Route exact path='/master-detail' component={Master}/>
<Route path='/master-detail/:number' component={Detail}/>
</Switch>
);
The MasterDetail is capable of rendering 2 components. Master or Detail, depending on the path.
There are different ways to import files in react.
https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281
example
import store, { history } from './store'
Means there is a default export that we're assigning to store
//store.js
....
export default createStore(
rootReducer,
initialState,
composedEnhancers
)
And there's also a named export called history
export const history = createHistory()
state = {name:"Davy", age:39}
newState = {...state,age:40}
import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
function mapStateToProps(state) {
return { todos: state.todos };
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) };
}
class MyApp extends React.Component {
// ...define your main app here
}
export default connect(mapStateToProps, mapDispatchToProps)(MyApp);
import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
function mapStateToProps(state) {
return { todos: state.todos };
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) };
}
@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
// ...define your main app here
}