lydiahallie / javascript-react-patterns Goto Github PK
View Code? Open in Web Editor NEWRepo related to the FrontendMasters course on JavaScript and React patterns
Home Page: javascriptpatterns.vercel.app
Repo related to the FrontendMasters course on JavaScript and React patterns
Home Page: javascriptpatterns.vercel.app
This is not an issue but a question. I love the images and videos used to explain things like in https://javascriptpatterns.vercel.app/patterns/design-patterns/module-pattern. How were these created?
Hi
I see extra files counter.js, test1.js, test2.js in module pattern / solution section.
Do we need them there?
Thank you :)
Can I fork and translate your repo? (English to Chinese)
I think this can help more developers.
There are some typos in
https://github.com/lydiahallie/javascript-react-patterns/blob/main/pages/patterns/design-patterns/factory-pattern.mdx
The fullName method is the same for all the objects that were created. By creating new instances, the fullName method is available on the prototype instead of on the objec, which saves memory.
It should be ... on the prototype instead of on the object...
.
In this section, the fullName
method doesn't exist in the User class. There is the getPosts
method instead.
https://javascriptpatterns.vercel.app/patterns/design-patterns/factory-pattern#tradeoffs
As the title suggests, sometimes the timing of page transitions causes the page to scroll to an unintended position.
As shown in the following video, the page will automatically move to the Excercise
area instead of the Overview
area at the time of page transition.
Before the Context API was available, we often ended up we often end up with
Before the Context API was available, we often ended up
Caught a small typo while reading:
https://javascriptpatterns.vercel.app/patterns/react-patterns/hooks-pattern#overview
- React Hooks are functions special types of functions that you can use in order to:
+ React Hooks are special types of functions that you can use in order to:
ps - Incredible stuff @lydiahallie thank you for sharing with the community!
can i commit on your repo? for example test files for get pr badge?
export function withStyles(Component) {
return (props) => {
const style = {
color: "red",
fontSize: "1em",
// Merge props
...props.style,
};
return <Component {...props} style={style} />;
};
}
import { withStyles } from "./hoc/withStyles";
const Text = () => <p style={{ fontFamily: "Inter" }}>Hello world!</p>;
const StyledText = withStyles(Text);
In the Higher Order Component Pattern section, the example of withStyles
higher order component and Text
component. Since withStyles
returns a new component with style
props, should Text
component receive the props.style
as well? Otherwise the paragraph style inside Text
component won't be updated.
I think the Text
component should look like this.
import { withStyles } from "./hoc/withStyles";
const Text = (props) => <p style={{ fontFamily: "Inter", ...props.style }}>Hello world!</p>;
const StyledText = withStyles(Text);
https://javascriptpatterns.vercel.app/patterns/react-patterns/higher-order-component
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.