buckyroberts / react-redux-boilerplate Goto Github PK
View Code? Open in Web Editor NEWAwesome React / Redux boilerplate and tutorial.
Home Page: https://www.youtube.com/user/thenewboston
Awesome React / Redux boilerplate and tutorial.
Home Page: https://www.youtube.com/user/thenewboston
Spread operator shows error when compiling. Can you tell me what do I need to do for using Spread operator?
Hey Bucky,
Is there some sort of build task which will create a bundle for your app somewhere? I believe its missing. I can't build static files for my server.
Thanks,
Adrian
Hi Bucky,
First of all thanks a lot for your great ressources,
It's not really an issue but I don't understand why you are using this syntax for the App components.. why are we not using the basic function like render ?
Hi Bucky ...
I'm on very initial stage of react and redux, I have few queries about your boilerplate which is given below.
In your boilerplate, from where I should call api and how to call api ... ? Another thing is why 'stores' layer isn't exist in your boilerplate structure ... ?
If you let me know it will help me.
Thank you.
$ npm i
[email protected] install D:\Prosjekter\Privat\sandbox-react\redux-boilerplate\node_modules\node-sass
node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node":
HTTP error 404 Not Found
...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
After clonin, and running npm install, webpack, and npm run start, the code will run on localhost:3000. However when changes are made to the code, they are not reflected in the browser automatically or even upon refresh. No errors are being shown in the browser developer console.
Hi Bucky!, great job with the tutorials, they are great. I got this nasty error while installing all dependecies or in addition installing webpack.
npm WARN optional Skipping failed optional dependency /webpack/chokidar/fsevents
:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]
I'm using windows.
class UserDetail extends Component { render() { if (!this.props.user) { return (<div>Select a user...</div>); } return ( <div> <img src={this.props.user.thumbnail} /> <h2>{this.props.user.first} {this.props.user.last}</h2> <h3>Age: {this.props.user.age}</h3> <h3>Description: {this.props.user.description}</h3> </div> ); } }
In the above example by you, the user props is checked inside render.
What if I want to check it outside render to perform something else (like axios request).
I checked the following code outside render,
if (!this.props.user) { return (<div>Select a user...</div>); }
But this always returns <div>Select a user...</div>
.
Any suggestions on this?
Thanks in advance
PS C:\Users\p-c\Downloads\Github\React-Redux-Boilerplate> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/redux
npm ERR! redux@"^3.5.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer redux@"^4" from [email protected]
npm ERR! node_modules/redux-thunk
npm ERR! redux-thunk@"^2.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\p-c\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\p-c\AppData\Local\npm-cache_logs\2022-05-25T09_26_40_767Z-debug-0.log
Hey Bucky,
You are awesome! man, ok let's get serious now :-) . I have the following structure
UserPage -> Container
|-----UserList -> Dumb Component
|--- User ->Dumb Component
My action and dispatch obviously is connected to container which is UserPage
function mapStateToProps(state) {
return {
users: state.users
};
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({deleteUser: deleteUser}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(UserPage);
Now I am passing deleteUser action to the UserList Component as
and then from UserList to the User as
userList() {
return this.props.users.map(function(user, i){
return(
<User key={i} user={user} deleteUser={this.props.deleteUser} />
);
});
}
and finally my leaf component User has this code
class User extends React.Component {
render() {
console.info(this.props.deleteUser);
var user = this.props.user
return(
<tr>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.createdAt}</td>
<td>{user.updatedAt}</td>
<td>
<a href="#" onClick={()=>this.props.deleteUser(user)}> Delete</a>
</td>
</tr>
);
}
}
export default User;
Now when I pass delete user from UserList to User I get this error
app.bundle.js:29210 Uncaught TypeError: Cannot read property 'props' of undefined
I am not sure what am I doing wrong here mate? Would you know what's going ?
BTW I tried treating deleteUser as function by passing it as ()=>delete user, but I still get that error
I got a doubt about your explanation on README.md inside components folder. You say that "components are aware of application state". However, I understand that containers are aware of state. Perhaps you wanted to say "components are NOT aware of application state". And this is just a bacon, tuna, typo, whatever ๐ .
Anyways, I came around here after watching some talks from Rob Pike on youtube and I really enjoy how you flow smoothly across a lot of explanations (just to make a ๐ ). You're awesome Sir!. Have you ever wanted to try Golang btw? I sincerely think that you might shine over there. Saludos!
How can use mongodb in react? i can able to fetch directly in component data but i am not able to get record with combineReducers. please provide solution. I used following code for combineReducers :-
detailReducer = () => {
Meteor.subscribe('detail');
var detail = Detail.findOne();
console.log("-----> ",detail.data)
return detail.data;
}
export default createContainer(() => {
Meteor.subscribe('detail');
var detail = Detail.findOne();
console.log("-----> ",detail.data)
return {
detail: detail.data
};
}, detailReducer);
Hi,
I have a quick question, how is it possible to update your userdata List dynamically? (React-Redux-Boilerplate/dev/js/reducers/reducer-users.js)
I want to update this data every x seconds and render the webpage without a complete reload.
I spent a lot of time to figure out how this is working but without any success. I hope you can help me.
Thank you!
I am failing to start the server here ...
I npm install everything,
I webpack
Then i do npm run start and I get this error ...
pm ERR! code ELIFECYCLE
npm ERR! [email protected] start: webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server'.
Hey @buckyroberts, I am following your redux tutorial in youtube and it's awesome. You made redux concept so easy.
But now, i am facing one issue in redux. If you can help me out from this, i will be very thankful.
I am trying to use socket.io in my react-native project. I created one SocketHelper.js file and i put all my events over there. Please check my code below.
import React from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
window.navigator.userAgent = 'react-native';
import io from 'socket.io-client/dist/socket.io'
import { setRouteAction } from '../../ReduxModel/Actions/BusRouteAction'
var socket;
export function socketListener () {
socket = io('localhost://3000', {jsonp: false});
socket.on('connectionCheck', (response)=> {
console.log('socket connection' + response.message);
});
socket.on('getRoutesResponse', (response) => {
console.log('route json response : ' + response);
console.log(props)
});
}
function mapStateToProps(state) {
return {
user: state.user
};
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({
routes: setRouteAction
}, dispatch)
}
export default connect(mapStateToProps, matchDispatchToProps);
and the issue is as i am not using a class here, how i can use routes (i.e. inside the matchDispatchToProps) as props to dispatch my data.
Please let me know, if i am missing any concept or anything i am doing wrong.
I just started following your video tutorial but when I type in $ webpack
I get the following error:
ERROR in ./~/css-loader!./~/sass-loader!./dev/scss/style.scss Module build failed: ReferenceError: Promise is not defined at LazyResult.async (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:237:31) at LazyResult.then (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:141:21) at processCss (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/lib/processCss.js:198:5) at Object.module.exports (/home/user/Code/React-Redux-Boilerplate/node_modules/css-loader/lib/loader.js:24:2) @ ./dev/scss/style.scss 4:14-122
What should I do now?
In index.js, in the line
import App from './components/app';
change it to
import App from './components/App';
when I run npm install
it shows the below warning
npm WARN [email protected] No repository field
and when I run webpack
it shows webpack: command not found
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.