<img className="image" src={"images/" + this.props.image} />
class MyComponent extends React.Component {
render() {
return (
<div onClick={this.handleClick}>
<input ref={input => this.inputElement = input} />
</div>
);
}
handleClick = (e) => {
this.inputElement.click();
}
}
$ sudo npm install -g create-react-app
$ create-react-app my-app
Success! Created my-app at /home/system/Dropbox/dev/projects/melhor-investimento/mi-app-cordova/my-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
class List extends React.Component {
constructor(props){
super();
this.props = props;
}
render() {
var el = [];
for(var i=0; i < this.props.letters.length; i++){
el.push(<li>Item {i} - {this.props.letters[i]}</li>);
}
return (
<div>
Using Map
<ul>
{
this.props.letters.map((v, k) => {
return <li>Item {k} - {v}</li>
})
}
</ul>
Using for
<ul>
{el}
</ul>
</div>
);
}
}
var letters = ['a', 'b', 'c'];
ReactDOM.render(
<List letters={letters} />,
document.getElementById('root')
);
rm -f `find build/static/ -name *.map`
class MyLink extends React.Component {
constructor(){
super()
}
loadPage(e, page){
console.debug(e, page)
}
render() {
return (
<a onClick={(e) => {this.loadPage(e, this.props.page)}} {...this.props}>
{this.props.children}
</a>
);
}
}
ReactDOM.render(
<div>
<MyLink href="https://google.com/" page="google" >
Go to Google.com
</MyLink>
</div>,
document.getElementById('root')
);
./node_modules (nao funciona)Instalando os comandos necessarios de forma global
sudo npm install -g react-scripts create-react-app
Criando o app
create-react-app myapp
A esse passo ele ja deve ter instalado um kilo de dependencias na sua ./node_modules, vamos torna-las globais
npm install -g
Se isso nao funcionar ou falhar vamos fazer na mao
cp -r node_modules/* /usr/lib/node_modules/
No meu caso copiei para a lib porque esse eh o lugar em que o meu npm esta instalado
$ ls -lha `which npm`
/usr/bin/npm -> ../lib/node_modules/npm/bin/npm-cli.js
Copie para onde o seu estiver
Remova as coisas da pasta atual, elas nao sao mais necessarias
rm -rf node_modules/*
componentDidMount(){
fetch(`http://jsonplaceholder.typicode.com/posts`)
.then(result=>result.json())
.then(items=>this.setState({items}))
}
ou quando seu elemento mudar e precisa chamar o rest denovo, nesse caso ele vai receber properties e nao state
componentDidMount(){
console.debug('m=componentDidMount');
this.load(this.props.id);
}
componentWillReceiveProps(nextProps){
console.debug('m=componentWillReceiveProps');
this.load(nextProps.id);
}
load(id){
fetch(`http://localhost:3030/data/` + id)
.then(result=>result.text())
.then(content => {
console.debug('m=loadPage, status=done');
this.setState({content})
})
}
render() {
return (
<p>{this.state.content}</p>
);
}
<div dangerouslySetInnerHTML={{__html: this.state.content}} ></div>
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
reactjs, reactjs commands, react commands