Tutorial for React To run the project:
- Clone this repo
- Run
npm install
- Run
npm start
visist https://zerotomastery.io/ for more
Tutorial for ZTM course - React
Home Page: https://aneagoie.github.io/robofriends/
Tutorial for React To run the project:
npm install
npm start
visist https://zerotomastery.io/ for more
Hey Sorry I'm kind of new can you help me with this it can't read the property of state as it says so here is my code
`class App extends Component{
constructor(){
super()
this.state ={
robots:robots,
searchfield:''
}
}
onSearchChange(event){
const filteredRobots= this.state.robots.filter(robot=>{
return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
})
console.log(filteredRobots);
}
render (){
return(
<div className="tc">
<SearchBox searchChange={this.onSearchChange}/>
<CardList robots={this.state.robots}/>
</div>
);
}
}
export default App;`
Cloned the github without an issue but the robot images are not displaying?
Hello Andrei,
I guess in cardlist component the "robots[i]" is bad practice :) .
It's better to be "user" instead.
At last, you're one the best Instructor i've seen in my life <3 i love you bro <3,
and I hope to some day to meet with you <3
sorry for my bad english... :)
I've used this files as a basement for setup redux as it shown in tutorials, but, there is might me some misconceptions, because the purpose way isn't working. I did all as in tutorial and even download this folder and make redux setup from scratch, but there is an error with searchRobots variable.
`typeError: Cannot read property 'searchField' of undefined
Function.mapSateToProps [as mapToProps]
src/containers/App.js:12
9 |
10 | const mapSateToProps = state => {
11 | return {
12 | searchField: state.searchRobots.searchField
13 | }
14 | }`
[OS]=LINUX(UBUNTU)
BROWSER:CHROME
Hi @aneagoie
Actually I am trying to complete your webdev course and i am having a hard time completing the react part. It is my first steps with react. On passing multiple stores, i have this notification:
"Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function."
`const rootReducer = combineReducers({ searchRobots, requestsRobots });
const store = createStore(
rootReducer,
searchRobots,
applyMiddleware(thunkMiddleware, logger)
);
ReactDOM.render(
<React.StrictMode>
</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();
`
Thanks in advance for helping.
There is no issue
Getting "TypeError : instance.render is not a function" on adding ErrorBoundry
This is the code in my App.js file
import React, {Component} from 'react';
import Cardlist from '../components/Cardlist';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import './App.css';
class App extends Component {
constructor() {
super()
this.state={
robots: [],
searchfield: ''
}
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response=> response.json())
.then(users=> {this.setState({robots: users})});
}
onSearchChange = (event) => {
this.setState({searchfield: event.target.value})
}
render(){
const { robots,searchfield }= this.state;
const filteredRobots=robots.filter(robot=> {
return robot.name.toLowerCase().includes(searchfield.toLowerCase());
})
return !robots.length ?
<h1> Loading </h1>:
(
<div className='tc'>
<h1>RoboFriends</h1>
<SearchBox searchChange={this.onSearchChange}/>
<Scroll>
<ErrorBoundry>
<Cardlist robots={filteredRobots}/>
</ErrorBoundry>
</Scroll>
</div>
);
}
}
export default App;
And this is in my ErrorBoundry.js file
import React, { Component } from 'react';
class ErrorBoundry extends Component {
constructor(props) {
super(props);
this.state={
hasError: false
}
}
componentDidCatch (error,info) {
this.setState({ hasError:true })
}
rendor() {
if(this.state.hasError){
return<h1>Ooooops. That is not good</h1>
}
return this.props.children
}
}
export default ErrorBoundry;
I am trying to serve the robofriends on the gh-pages for some reason I am not sure what I am doing wrong but it keeps throwing the error below, I have created the repository in Github and followed the commands but I am sure its something very silly I am not doing right. can you kindly help, please. thanks
Gifteds-MacBook-Pro:robofriends designunleash$ echo "# robofriends" >> README.md
Gifteds-MacBook-Pro:robofriends designunleash$ git init
Reinitialized existing Git repository in /Users/designunleash/Desktop/robofriends/.git/
Gifteds-MacBook-Pro:robofriends designunleash$ git add README.md
Gifteds-MacBook-Pro:robofriends designunleash$ git commit -m "first commit"
[main f9aeef0] first commit
1 file changed, 1 insertion(+)
Gifteds-MacBook-Pro:robofriends designunleash$ git branch -M main
Gifteds-MacBook-Pro:robofriends designunleash$ git remote add origin https://github.com/Quartelai/robofriends.git
fatal: remote origin already exists.
Gifteds-MacBook-Pro:robofriends designunleash$ git push -u origin main
ERROR: Repository not found.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
The search box fails to filter.
render(){
const filteredRobots = this.state.robots.filter(robots =>{
return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
})
this part of the code could not be reach
My Robofriends app isn't opening on the web. I don't know what may be the problem. Can you help?
-<-div style="overflow: scroll; border: 5px solid black; height: 800px;"->-
This style scroll that you used is causing problems in the app, for people who use Firefox browsers it creates two scroll bars, one vertical and one horizontal.
To solve this, just replace the code above with this:
-<-div style="overflow-y: scroll; border: 5px solid black; height: 800px;"->-
only change de overflow for overflow-y, this change can fixe de problem...
Hi Andrei today I deploy my app (for the proyect with react robofriends) in Github but the pages doesn't load, I view the console and I found this problem and Is the same in this app:
Access to fetch at 'https://jsonplaceholder.typicode.com/users' from origin 'https://aneagoie.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.