ReactJs Examples

Published: 2019-08-04, Updated: 2020-05-28

Exemplos

Links

<img className="image" src={"images/" + this.props.image} />

Reactjs + Java / Gradle

Estudando React JS

Exemplo de projeto compilado

$ 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!

Iterando no conteudo

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')
);

Remover os source maps depois de buildar

rm -f `find build/static/ -name *.map`

Repassar propriedades e o elemento clicado

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')
);

Criando o app sem ter que instalar as coisas na ./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/*

Fazendo Rest com o react

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>
	);
}

Renderizar HTML

<div dangerouslySetInnerHTML={{__html: this.state.content}} ></div>

Setar a pagina raiz do site

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


Cortar video no blender Cordova Commands

Comments