react-projects's Issues
Cocktails project Bad Api
I'm following along with the React course I purchased. I am working on the cocktails api project.
The api seems to not work. If I paste the endpoint, from the api's website into browser, doesn't work. 500 error.
same when I run my fetch function in proj.
Same when I clone your final repo.
Just wanted to give you a heads up
About github User
Can you please create repository of Github user application
Project 9 - Color Generator setError(false)
In the 9th project (Color Generator), should not be in the try branch code a 'setError(false);' as well? I can see that in the netlify demo app everything works well, the error state is resetted to false when we sumbit a valid input, but the code that you provided doesn't reflect that. Is there something that i am missing?
Update README.md file
Hey!
The README.md file needs to be updated because as at the start of these projects, It is not up to 23, But as at the moment this issue was opened, It was 23 projects.
Thanks so much for your effort.
Global README.md needs to be updated
John,
it looks like many more projects were added to this repo (thanks for the amazing work!). However, the global README.md file still a little bit behind with the mapping of the sections and the projects: the repo contains 23 projects whereas the README.md lists only 15 of them.
Tes
Issue with babel-loader module
When I cloned the first project I ran
npm install
and it gave me an error
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree
I tried several steps to solve the issue:
1)Update react-scripts - didn't help
2)Install babel-loader separately - didn't help
3)Remove package-lock.json, remove react-scripts and install again - didn't help
The solution was just ignoring the issue and creating .env file
with global variable SKIP_PREFLIGHT_CHECK=true
If you need I could create PR for it
P.S. I tried the second project - it has the same issue
How to tweak the slider code
How can I tweak the slider so I can see 2-3 slides with 'nextSlide' class beside 'activeSlide'?
For example:
active slide | next slide 1 | next slide 2 and then slide 1 becomes active and new one comes in to view (next slide 3)
Project 8 Lorem Ipsum Setup
React
on 15 project
hi i am learning with your 15 projects . there i faced issue in render data using url's .
for example in 6-tab , after loading nd setJobs . i print in console , i got empty array twice nd 4 times data .
i ignore that after doing full 6-tab project similar way you did when i check data is empty while printing in console .
project 19 - stock photos displays first 10 photos twice after fetching additional photos on scroll
Recreate issue by loading the first set of 10 photos, then scrolling down in order to fetch more photos. The first set of 10 photos are displayed twice, then the additional photos are added to the list.
Initial load:
After scroll:
As you can see, the car, bookshelf, camera, and portrait repeat on scroll.
REACT PROJECTS
09-color-generator is missing values.js
App.js imports Values from values.js, which can't be found
React js
Improvement in the existing markdown
Markdown can be improved with contribution guidelines and how to up and run this app on localmachine
Class not included
=> show-container is missing
tours.map is not a function
Running your second project (actually following you on youtube) whenever I pass tours={tours} to the Tours component and In Tours component whenever I try to make a map of the current array it say tours.map is not a function
react-projects/2-tours/final/src/Tours.js
Line 12 in 14e830c
Project Cocktail.
when I set up the project, It was done as the course was indicated, but errors existed again and again. then in the App.js component
I made the following changes : function App() {
return (
<Route path="/" element={} />
<Route path="/About" element={} />
<Route path="/*" element={} />
);
}
export default App. I'm probably wrong or a course update is needed.
Websites images
https://react-projects.netlify.app
In the above website, the websites are collectively shared. I wanted to know if the shared websites' images were taken manually or there is something going on in the backend that automatically takes the images and posts them here. Like in the image below, netlify is actually taking pictures automatically from the published websites:
Need clarification - 02: Tours
While removing tours, I called {fetchTours()} on refresh button instead of {fetchTours}
Then I see Loading.. and the list of tours displayed. It supposed to be Refresh button and text as "No Tours Left". If I click refresh then all tours has to be displayed.
Can you explain difference between calling fetchTours vs fetchTours() onclick event of Refresh button?
React-projects
Repo missing a license
Hi @john-smilga!
Thank you for the React tutorial.
I almost finished it and even started building some of the related projects.
I know the setups are meant to be used as starting point. But unless you add a license that grants us such permissions, we may not use, modify and/or share them.
This is also the case of react-basics-2020 and react-advanced-2020.
Unable to parse color from string remove it
Project-9
Initialize Color State starting with string i remove it
then input field placeholder value also show and no more error to show it.
By default input value also to show it result.
Your State Code
const [color, setColor] = useState("")
React project
react-js
Fix CORS permissions to allow the projects to work from new domain
As per lines
- https://github.com/john-smilga/react-projects/blob/master/02-tours/final/src/App.js#L20
- https://github.com/john-smilga/react-projects/blob/master/06-tabs/setup/src/App.js#L5
- https://github.com/john-smilga/react-projects/blob/master/14-cart/setup/src/context.js#L6
Currently the domain does not allow CORS requests as shown here
Access to fetch at 'https://course-api.com/react-tours-project' from origin 'http://localhost:3000' 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.
The alternative is to curl the file and serve it from the local public folder
curl -o 02-tours/setup/public/tours.json https://www.course-api.com/react-tours-project
and change the url to const url = 'http://localhost:3000/tours.json'
or for the server owner to allow CORS
npm start not working on react-scripts version 3.4.3
I'm cloning this repository in February 2021 with react-scripts
having been upgraded to version 4.0.2. When I ran npm install && npm start
without updating react-scripts
, meaning I'm using the version from the project's package.json
, the dev server doesn't run.
Updating react-scripts fixed the issue, but I had to run npm audit fix --force
which npm doesn't recommend.
I think there should be a more painless way to do this...
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.