What are /r/learnreactjs' favorite Products & Services?

You’re looking for the <code>pattern</code> attribute on the input.

You probably want its value here to be [A-Za-z\s] which is all letters in upper and lower case, and white space characters (space, tab, new line...).

If that’s not quite what you want, I’d encourage you to spend some time learning regular expressions which is the syntax here. You can do a lot with regular expressions (regex) but also, it’s like punching yourself in the face sometimes.

I think my biggest mistake was thinking that I knew enough ReactJS when in fact I only knew how to certain things in ReactJS. I was able to grasp the basic concepts about props and class-based components vs functional components, etc. all the stuff you cover in the intro tutorials. However, when I landed my first real job it was a total mess. The org I joined didn't have any code standards and no code reviews, other than required 2 people PR approvals. So one dev could be passing props from one component to another, yet another dev prefers to use Redux even though both are direct children of their parents. Other people will organize their code a certain way where as another set of devs organize their code differently, some use styled components and others don't, blah, blah. Then there was the task of getting data from one component to another, sure I've done this. Only thing here is that the components communicate via a complicated sequence of API calls and then mapping this in your head is difficult because things are not very well apparent as a beginner. So what I'm saying is that in my experience, there wasn't this "wonderful" subject or concept that I was missing. I just had to get more experience understanding other peoples code/patterns and getting comfortable doing things in more than one way, because that is the double-edge sword with ReactJS. It's so forgiving and easy to get started, that if some of those initial bad habits aren't corrected, they can cause you a lot of headaches.

The first resource is really great at rounding you to become ready for a real job, it's up-to date, FREE, also time consuming. The second resource is where you can grab project ideas for you to challenge yourself, just use ReactJS instead of vanilla JS.

Regarding UI and React business logic, React has recommendations (I like grouping by type).

Since you're talking about Network Layer (which could be "API" in the example above)... some people will, at the project root, have a client (all react / front end stuff) and server (node, api, etc) folder. From there, you can break down whatever is needed (components, etc on the client side and routes, controllers?, whatever on the server side).

React Context API can be used for your problem. It helps you to share a piece of state to whatever components you want just by wrapping them.

Here's a link to official docs.

This is a classic example of needing to “lift up state”. In order have two components use the same data, they need to share a common ancestor component with that information. That’s usually where Redux comes in, because that ancestor often is many layers away in your App structure, and prop drilling is annoying.

If you don’t want to learn/bundle Redux into your app, you could build something with Context instead.

React Portals!

Would recommend against showing two modals at once. Better to replace one with the other and allow the user to go back/return to it upon completion

It can, and before you use a frontend framework like React you can make a basic frontend by manipulating the DOM directly.

The problem is that its computationally intensive and slow.

The virtual dom lived in memory, and so can be read and written from super fast.

React internally tries to reconcile the virtual dom and the real dom. As stated in the docs, chanting the real dom is an O(n^3) operation where n is the number of elements in the tree. Reconcilliation however is an O(n) operation, much faster.

Basically react diffs changed to the virtual dom and then only changes exactly what it has to.

TLDR: There are no plans to remove classes from React.
https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy

> without the empty jsx tags in place, I get this error

Syntax error: Unexpected token, expected ","

22 | sortedImages.push( 23 | > 24 | {products[i].image1 && <Image {...imageProps(i, "image1")} layout='fill' alt={products[i].heading} />} | ^ 25 | ,

This is because once you removed the <></> you are no longer writing JSX, you are writing regular javascript. So you do not need the {} surrounding your expression.

sortedImages.push ( products[i].image1 && <Image {...imageProps(i, "image1")} layout='fill' alt={products[i].heading} />, ... )

The react docs cover this here.

I am not sure if this is the root of your issue as I am unfamiliar with the library you are using. But hopefully this can help unblock you.

The problem with "check", is that going by the logic of your component, you do want them to re-render when check changes, otherwise the Item won't update to reflect if it is checked or not.

One way to deal with that is to do the checked logic in the parent component, so that you're only passing true/false to the Item. e.g.

As to your question, yes, you can define the logic for whether a component should update or not. React.memo takes a second argument where you can choose your own conditions. See the docs for an example https://reactjs.org/docs/react-api.html#reactmemo

But, if you find yourself needing to use that, either you have a very good grasp of things and are sure it's the right choice, or it's probably not the ideal solution for your problem and you should keep asking questions.

You can call the API in a parent component, set the state as the response from the API and pass them down to the two children components as props.

https://reactjs.org/docs/components-and-props.html

Right here:

ReactDOM. render(<App/>, document. querySelector('#root'))

JSX is a domain specific language which is actually performing the instantiation under the hood.

Here's what's actually going on

The return value is a function that expects to take in a single parameter, which it calls product.

This is an example of a higher-order function in JavaScript; the useAddItem hook is a function that returns another function.

If you know hooks, useState is also a higher-order function. It returns an array containing the thing in state, and a function that sets the value of the thing in state.

const [bananas, setBananas] = useState(0);

setBananas(6); // this is a function

If you look in src/components/CartButtons.js you'll see how the author expects this hook to be used:

const add = useAddItem();

// later...

&lt;button onClick={() =&gt; add(item)} className="ui button positive"&gt;
  +
&lt;/button&gt;

Here, the returned function is stored in const add, and is then executed by the button's onClick callback.

Glad that helped! We're building a new Next site from scratch too and the starter kits really helped to illustrate how it all works.

Next handles both!

Routing

Image transformations - it just works if you decide to host with Vercel, or you can use Cloudinary, Imgix, Cloudflare etc. with or without next/image if you're using other hosts (Cloudflare Pages, Netlify, etc.)

You need to set up a redirects rule so that any address that's not the root will know to load your app.

here's a blog post on how to deploy react apps to netlify. look towards the bottom for the part about redirects

The problem was that my backend script did not returned anything as a result...

Check https://codeshare.io/ayLY7e and notice line 37... only returns an error if there is one, but no other result...

Thank you for your help, you made me realize some stuff

I should have asked clarifying questions before I wrote this, but is this what you're trying to achieve?
https://codesandbox.io/s/checkbox-tree-eiue1?file=/src/App.js

I should have asked clarifying questions before I wrote this, but is this what you're trying to achieve?

https://codesandbox.io/s/checkbox-tree-eiue1?file=/src/App.js

What you’ve tried to do so far is pretty clever but unfortunately you cannot rely on props.children to work that way. Unless you are sending exactly one string of text to the component, children is going to be an array of string and sub-components, which is what is happening here; you’re trying to output that array which is getting toStringed into [object] [Object]

You might find this useful https://reactjs.org/docs/react-without-jsx.html

Have you read the documentation?

https://www.google.com/url?sa=t&source=web&rct=j&url=https://reactjs.org/docs/getting-started.html&ved=2ahUKEwjpv5SxkO_xAhUn8HMBHcLcD1YQFjAAegQIBhAC&usg=AOvVaw2ELKlyujw4msP4lLpv0rOd

Hey

I think the onChange() event handler should do the trick.

You can define a state to store the value of the select element and modify the select element like this

const [value, setValue] = useState('kg_to_lbs')

....

&lt;select value = {value} onChange={(e)=&gt; setValue(e.target.value)} &gt;

            &lt;option value="kg_to_lbs" selected&gt;kg to lbs&lt;/option&gt;
            &lt;option value="kg_to_stone+lbs"&gt;kg to stone {"&amp;"} lbs&lt;/option&gt;
            &lt;option value="lbs_to_kg"&gt;lbs to kg&lt;/option&gt;
            &lt;option value="lbs_to_stone+lbs"&gt;lbs to stone {"&amp;"} lbs&lt;/option&gt;
            &lt;option value="stone+lbs_to_kg"&gt;stone {"&amp;"} lbs to kg&lt;/option&gt;
            &lt;option value="stone+lbs_to_lbs"&gt;stone {"&amp;"} lbs to lbs&lt;/option&gt;
&lt;/select&gt;

You can read more about this here

There are lots of options for managing state in React. You already know about component state. You might also know about state management libraries like Redux and MobX.

In your case though, you’ve already figured out that the values you need can live in some top-level component, and can be passed down to children components. To me, this is a stonewall case for using Context, which is React’s built-in higher-level state management solution.

Check out the docs because they’re pretty good as always. I don’t know how you’ve modelled your state, but I think you probably want some ScheduleContext where the value is the stuff you’re keeping in your top-level component right now. Then your Session and Clock components can access those values with a consumer, or with the <code>useContext</code> hook if that’s your bag.

Admin SDK is not something you use in the browser, that is correct. It will give full admin access to your database (and other services).

Without it you can aslo make changes to the database, if the permissions are set up correctly. A user has to be able to edit his profile name for example.

The fact that that method is called createUserWithEmailAndPassword does not mean it only has those two properties! It just means you create a user by suppying an email and a password. After creation, you can change other stuff as well: https://firebase.google.com/docs/auth/web/manage-users

sorry if I'm confusing you - I tend to mix up terminologies. But by admin account I meant Admin SDK see here. By the second statement, I meant that if I am to use your advice and send requests to the server to make changes to the database, would I be fine using the Admin SDK? Because I wouldn't want to be using that on the client side (for security reasons other than the one that you mentioned above anyways) right? Or am I misunderstanding something

I guess my confusion stems from the fact that I was using the createUserWithEmailAndPassword method from the firebase SDK - If I am to use the Admin SDK and use the createUser method instead, then I could store more information right?

https://codesandbox.io/s/angry-shape-1r71e?file=/src/receberDados.js

thank you, thats the link , now seems more confusing Lol

It's weird when I console.log it before...As i'm typing in the input i get a bunch of undefines like 12 as i type then i hit enter and it shows and then another undefined

here's the sandbox https://codesandbox.io/s/sleepy-lake-ysnm1?file=/src/App.js

Hey,

Thanks for responding. Here is the the link to the sandbox.

https://codesandbox.io/s/frosty-pare-mhx76?file=/src/App.js

im also gonna try your advice with setStates too. I am new at this so, your help is greatly apprecited.

Well this is what I could find, there's something weird with the way the data is handled. The state is updated in my example, but if the data is the same (even after trying to remove lines) you won't see it change. So you can see in my live sandbox here, if the value for "data1" is obviously different, the chart does update. This is just setstate. I think it should work for your current code too, don't have to break it out into a subchild.

Here is your code pretty much exactly the same, but I added 1's in front of the "data1" as I noticed you just chopped off the other lines thinking they'd be removed.

I have not figured out how to remove the other lines, I tried setting no arrays, empty arrays except the labels, wondering if you literally have to call delete or something.

Hey man, I really don't know what it is. CodePen isn't really helpful because the code doesn't work. Have you tried stackoverflow? here is a different tool to put samples together. https://codesandbox.io/

React doesn't follow a OOP type structure, we do have classes but that is not OOP classes.

https://reactjs.org/docs/faq-structure.html

That what the React team recommend.

My recommendation is keep your components simple (no too much business logic) and create other files to handle the business logic. (That is what I do)

This is the problem that Suspense will solve. You can try it today, but it's still not stable so don't go using it in production or anything.

Until then, return data ? <Component /> : <LoadingSpinner /> is the best we've got.

Look into React.memo: https://reactjs.org/docs/react-api.html#reactmemo

You can wrap your PanelItem export with a React.memo, which will compare the new props to the previous ones. By default it does a shallow compare, which will work fine for your example but may not be ideal if you have nested objects or arrays in your props. In that case you can include a custom compare function when calling React.memo().

thanks for your response! I've been looking at the react docs for hooks and it looks like they are declaring functions for hooks in the same way, nevertheless I've been trying to define the WebForm() function as below

--- SNIP ---
 const WebForm = () =&gt; {
--- SNIP ---

export default WebForm;

without success, it returns the same error

> this.state={ time:"10", seconds:"00" }

You're declaring time as a string of "10". Your sessionIncrement function is appending a "1" to the end of the string.

Also, take a look at State and Lifecycle. It would be safer to use the functional for of setState for your incrementer/decrementer:

this.setState((prevState) => ({ time: prevState.time + 1 }))

Your data should update and re-render. From your code it looks like you're using filters and not currentFilters which is why it seems to not be re-rendering. If you run into issues in the future where you're not sure if it's re-rendering correctly, try doing a console.log() with the data that seems to not render correctly. Since it will only log when the component renders or re-renders, it's a good way of knowing whether the problem is with an expected re-renders not firing, data not updating, or likely in this case, the wrong data being output.

I'd also recommend adding a unique key to each <Filter> component which helps React identify which items in the array have been added or removed.

https://reactjs.org/docs/lists-and-keys.html

createRef is set to null on unmount, per the docs. If you refactor your component into a functional though, you can use useRef, however, the reference to the DOM node will persist throughout the life of the component and will not be set to null on re-renders. Here a link to the useRef docs

Have you read the React Main Concepts part of the docs? I find them to be surprisingly well written and a good way to wrap your head around things.

Specifically, I think you maybe interested in the Lifting State Up section.

From my experience with react hooks in real projects , they seem to be easier to work with, easier to learn and easier to understand than class based components.

With hooks, you typically split things based on feature, with class based components, you split thing based on which event handler it is placed in.

With class based components, complex computations were difficulty, and you typically resorted to copy &paste code if you wanted a real time updating screen width in your component. With hooks, this is improved and we can now make a function called "useScreenWidth" that returns an automatically updating screenWidth value.

Custom hooks have replaced many HOCS, which improves the performance as there are a significantly reduced number of react components on your stack.

Reading the motivation section is also useful for more convincing proof: https://reactjs.org/docs/hooks-intro.html#motivation

https://reactjs.org/docs/hooks-reference.html#useeffect

>By default, effects run after every completed render.

Your first render phase is run, then useEffect is run for the first time, and then your second render phase would correctly process your conditional logic.

You will have to check valInStorage:

{(contextState !== undefined && valInStorage !== undefined) ? (<Card data= {valInStorage}/>):(<p>Nothing here</p>)}

> Boom roasted.

Oh ok, I'm talking to a child.

> how is less code and concepts not quantifiable in the justification of learning something new?

Because less code means less understanding. When you're a beginner, abstraction can often be a hindrance. useEffect is a pretty good example of this; "What effect, and how am I using it?" are obvious beginners' questions that arise from this abstraction. "Why am I passing it a function? When does that function run? Why am I seeing an error if the function returns a value? Oh I have to return a function? Ok so when does that function run? Why would I want to do that??"

All those questions are avoided just by the method names componentDidMount and componentWillUnmount. Class methods are "objectively" easier to understand than hooks.

Boom. Roasted.

> If you want, we can take a poll of every react developer to see what a beginner should start with.

Let's instead take a poll of what the official docs say a beginner should start with. So far I'm counting 1 in favour of starting with classes. Can you do better?

Let me put it another way. If I were interviewing a React developer above junior level and they didn't know what a class component or a lifecycle method is, then they wouldn't get the job. We love hooks at my place, but we haven't gone back and refactored all our class components into functions, and we have no plans to because that's not what the docs recommend.

So are you saying a beginner should learn the newer way of writing a component, then go back and learn the older way that actually makes total sense to anyone who knows a bit of OO? You're saying that just because you think it's easier, every beginner should do it your way?

You had asked before if there were any drawbacks. You've since edited that out of your post, but I wanted to respond anyway.

Passing state around has been a staple of React since the beginning.

However, the major drawback is that it can get out of hand really quickly, especially if you end up passing state through multiple components.

Like, imagine you had a setting like "language," and you wanted it set on a preferences page, but the value needed to be accessible by the entire application. In that case, you'd need to create the language state and function for setting the state somewhere near the root of the project, and then pass that through to every component in your project.

The main alternatives (at least as far as what I use) are the React Context API and React Redux.

React Redux is a global state manager that is really hard to set up, but after it is set up is great for managing global state in a large application.

The React Context API is a newer solution that is part of React itself. Some people have moved away from Redux to the Context API due to its relative ease of use. It makes it easier to share values within a component tree without relying on state passing.

Lift up state to map. Pass down a handler to the pin or whatever, and pass the state down to your other component as well. Read more about lifting up state on the docs. .

It all depends on what you want to do. I would not think you only want one grid on the app parent, sub grids are a thing but I haven't seen much of it. Generally, if you've got a container you want to treat it's contents as a grid, make that container display:grid, and that child could itself be inside another grid. Or you can mix and match, flex elements inside a grid.

Also take note that a react component doesn't have to have a parent element. Nothing wrong with it either, but don't feel like you're forced into injecting extra divs because you want another component, you can also use fragments

As for the styles themselves, that's a bit more specific to exactly what you want to do for any given section of your layout (also more of a css question)

I'm not sure what you mean by separating view vs action components. In any case, every component should have its own file. As suggested here https://reactjs.org/docs/faq-structure.html#is-there-a-recommended-way-to-structure-react-projects

For example:

/Components/Profile.js

/Components/BlogPost.js

etc.

Maybe you want to do something like this...

/Component/Views/SomeView.js

/Components/Views/AnotherView.js

/Components/Actions/AnAction.js

etc.

I'd follow the documentation. For example, assuming you're using "useState", here's a really clean way to write a component (link below). Ideally, components will be as simple as possible, so other than adding functionality on top of the component, it shouldn't get TOO much more complicated than the examples at the top...

https://reactjs.org/docs/hooks-state.html

I'm working on this tool ^, and would really appreciate if anyone would be open to offering feedback.The goal is to save dev time and make it so you don't have to think about html/css implementation.Here's a link if you want to check it out: https://www.figma.com/community/plugin/1031998871372194709/Rendition%3A-Figma-%3EReact-Components-in-one-click
If you're open to sharing some feedback / chatting in general, please let me know!

This ( making a prop initial state in the child component ) is absolutely a normal thing to do. The problems manifest itself if props.vals change, and you assume it resets the state ( which it doesn't, unless child component unmounts). You can play with it here https://codesandbox.io/s/epic-sun-b974i

Thanks. Here's my fork with your updates. Just FYI, there was a warning of not having unique keys so I made this edit too:

key={value.id}

This code was provided by the Material-UI project and I am puzzled by the below line. Do you know why they're bothering to create a labelId constant when <code>value.id</code> seems a sufficiently unique label id to me? The code:

const labelId = transfer-list-all-item-${value.id}-label;

Also thank you for reminding me about the user presentation point. I was so deep in the unique ID question that I didn't think about this. In this work context, the transfer list could be used for the names of either employees or customers depending on where you are in the application. Maybe an email address alongside the name in the ListItemText will work.

Okay, got your answer although I don't quite know what was causing it so someone more advanced than me can tell you why.

https://codesandbox.io/s/brave-waterfall-bw2ny?file=/src/App.js

Here's the link to my solution, and I had to go look at my own Protected route component and saw that you were passing the props to the child components differently than I was, and so when I updated it to be passed as a true prop and the component as a reference it worked.

My guess as to why was that because you were passing a function to actually render the prop you were getting a different version the component each time due to how the router handles it. That's 100% a guess and hopefully someone else knows actually why.

Gotcha. I threw together a solution here: https://codesandbox.io/s/beautiful-noyce-5o477?file=/src/App.js

Look at the renderChecked function. You already have all the information you already need in state. So rather than creating another array in state, I created a function that merges the two existing state arrays. renderChecked is called within the render function of App. This means any time App re-renders, the output of renderChecked will also updated.

This meant I was able to delete the updateStateList function. If you'd rather keep this function and go the route of having another array in state, what you'd need to do is set up the onChange methods you currently have to also call the updateStateList function in addition to the handleXChange function.

// Before
&lt;input
name="checkAllKatakana"
onChange={this.handleKatakanaChange}
/&gt;

// After
&lt;input
name="checkAllKatakana"
onChange={(e) =&gt; {
    this.handleKatakanaChange(e)
    this.updateStateList(e)
}}
/&gt;

Let me know if you have any questions on this.

> I know it's not very DRY, hoping to get it working and then reduce the code after

This app looks like a great opportunity to practice your DRY skills!

You can use dynamic import(). Here's an example I made on codesandbox:

https://codesandbox.io/s/dynamic-react-icons-cw20m?file=/src/App.js

Just beware, when you build your app, it may try to do code-splitting on the dynamic import and generate chunks for every react-icon icon available.

Shit, I'm dumb as hell.

While building the codesandbox file, I realised that porting Props to State was a massive waste of time, as I could have just used the props outright.

Guess I was porting it to state outta habit this whole time. Feel a lot more confident going ahead!

I'd still like to know why my state is shitting the bed though, Here's the link to my codesandbox. Just a rudimentary print test to check if the state was applying.: https://codesandbox.io/s/goofybullshit-nss90?file=/src/Spinner.jsx

I did some rough edits here: https://codesandbox.io/s/jolly-waterfall-zsvzc?file=/src/components/functional/WordList.js (apologies if the syntax is wrong, been a while since I've worked with class components)

Still anyone's guess if I've understood you correctly, but the idea here is that in WordList, you keep track of which word is the active word.

I'm using state in that example and just left it null, but I think for what you're describing, if WordList is displayed alongside WordDisplay, then the route structure isn't quite right either.

Ideally, I don't think you need state, I think word list should be a route where it can take the word id from the url, and use that instead.

But anyways, going with what's there, you'd take the active word and use it to pass an "isActive" prop to the Word component. Then in Word.js, you can see what I'm doing to set inline styles.

I understand what you are saying. My question is , how can i make QuoteBox Component rerender by passing a property or state ?

This is my parent component. Using newQuote attribute how can i make QuoteBox component rerender ??

class Parent extends React.Component { constructor(props) { super(props); this.state = { click: false }; } Please have a look at my codesandbox : https://codesandbox.io/s/random-quote-machine-fl6tc render() { return ( <> <QuoteBox newQuote={this.state.click} /> <button onClick={() => this.setState({ click: !this.state.click })}> Get new quote </button> </> ); } }

Great! Is it working right now? I made an implementation of your project here. If you want to look at how I did, here's its source code.

I'm assuming you want something like tumblrs badges? I went a tiny bit overboard on the styling but this should help you out https://codesandbox.io/s/for-uparcia-4bmie the main thing is just using position: sticky.

According to the docs :

>Keep in mind that useRef
doesn’t notify you when its content changes. Mutating the .current
property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

The functionality you're seeing is working as intended. I think you should be using useState in place of your useRef, if you're wanting anything to re-render upon mutation.

You’re iterating and rendering over the list of networks. React needs a stable identity on these items in order to properly render changes. Try adding unique keys for your rendered items in the .map

https://reactjs.org/docs/lists-and-keys.html

You've got the right idea there. In your function that sorts the array you will need to then setState with your new medication array.

If this update doesn't change the display, you will need to add a componentDidUpdate function and use prevState !== State as a conditional.

https://reactjs.org/docs/react-component.html#componentdidupdate

This question is more related to ReactDOM than Redux. Any function can call ReactDOM.render.

>If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.

https://reactjs.org/docs/react-dom.html#render

It looks like ReactDOM does keep track of what Component instance was rendered in what DOM Node.

Just because you mentioned it in your last line about loading the first 20 items.

Maybe you should read up about shouldComponentUpdate which can be used to render the first set of items and then if the user scrolls down render the next set without re-rendering the initial items.

Here's a good [article](https://www.freecodecamp.org/news/react-shouldcomponentupdate-demystified-c5d323099ef6/) that may help you out.

Those logos typically come from something like Font Awesome. After including font awesome, you can look through the icons list and find the relevant icons you'd like to use, then insert them like so:

Github

this is not a react app. this is a component library using storybook for react. The main component of the library, NLPAnnotator, is meant to be imported into an existing app. I have done very little with storybook, so I'm not the best person to ask questions but I can at least help you get started. after npm install you would do npm run storybook. That will start up the storybook server and should automatically open in your browser. storybook is basically just a playground for testing components in isolation outside of an actual app. you'll probably want to read through the storybook docs, they'll help you a lot more than I can.

https://storybook.js.org/docs/basics/introduction/

It would be much easier to do this with a framework over React, like Gatsby or Next.js, instead of basic React.

React is more of a UI framework for making widgets that update based on data changes. It doesn't handle a lot of the other stuff you'd need to make a full website, such as page routing or image resizing.

As for the template, it might be useful to separate business logic from presentation template (themes, like Shopify has with Liquid).

React can handle the presentation part. But you need some other framework to handle some of the data fetches, caching, routing, etc. That's where Next or Gatsby can come in handy.

You can take a look at the Next.js ecommerce starter kit and dissect it, see how it works together in a project: https://nextjs.org/commerce

Then when you're ready, you can write your own "theme" on top of it by customizing React, or writing a similar thing from scratch using Next. But I found their starter packages very helpful in learning.

Using this sort of framework, you'd host your products/inventory in a headless CMS somewhere (maybe even Shopify, with their API), handle the business logic in Next.js/node, and then tweak the presentation using React on the clientside.

It's not the easiest thing to write from scratch, but the starter kit gives you a complete example to work with.

Kinda, but there's not an easy solution. You want server-side rendering.

You want the React component to live on a server, receive its props and render, but spit out HTML and CSS which is served to the client.

The bit of the React library you want is ReactDOMServer. You might also look into NextJS, which is a widely-used framework for doing exactly this kind of thing.

Looks like it should work but can't really tell whats wrong with just that info since your not showing how mapStateToProps is connected (or not connected) to your components, i.e. you should be using something like 'connect(mapStateToProps)(YourComponentNameHere)'.

I'd recommend following some tutorials (such as https://egghead.io/) to get the basics and when you can the basic bits t

If you open /public/index.html from a Create react App project, you'll see this in the comments:

    &lt;!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the &lt;body&gt; tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    --&gt;

Create React App uses a package called webpack to combine all your JavaScript, HTML, CSS and image files into an app that the browser can run. This process is called "bundling".

As the comment says, "The build step will place the bundled scripts into the <body> tag." If you run your React app with npm start, then right-click the page and click View Page Source (not Inspect!) then you'll see that at the bottom of index.html in the browser, it has added a set of <script> tags that aren't in index.html when you view the file in your editor. For me, using a fresh Create React App build, it looks like this:

  &lt;script src="/static/js/bundle.js"&gt;&lt;/script&gt;&lt;script src="/static/js/0.chunk.js"&gt;&lt;/script&gt;&lt;script src="/static/js/main.chunk.js"&gt;&lt;/script&gt;&lt;/body&gt;

These JS files are what make your React app run when your browser opens index.html.

I would suggest Netlify for your React frontend and Apex Up (which uses AWS lambda under the hood) for your Express server. Both have free tier, so you don't need to pay anything for low traffic site. Also, no need to manage servers.

Heroku is another option with good developer experience, but the free tier has some limitations and the cheapest paid tier is $7 which is expensive compared to other VPS and serverless services.

But if you want to get your hands dirty and manage your own server, Digital Ocean, Vultr, Linode are all good options. Use Caddy server as a reverse proxy to your node server. PM2 for deployment.

Now on your domain registrar, point api.<yourdomain>.com to your Express server. Point <yourdomain>.com and www.&lt;yourdomain&gt;.com to your Netlify subdomain.

Okay, I'm trying to walk through your code and I have re-read this a few times to make sure I'm grepping the problem.

Your:

return <Link to={link}>{key}</Link>;

Isn't returning an actual link? Can you verify the <a> generated has the URL you are expecting?

Can you post an example journal response?

I was walking through it on codesandbox but I don't have enough time myself to mock up a proper API response.

Hi, sorry it's take me so long to get round to doing this I started to put it together before the weekend and got sidetracked. Link below

https://codesandbox.io/s/infallible-platform-ut69j

So this works, but what I'm wondering is when using Redux to manage state should I still do it like this? I haven't implemented redux in the sandbox but suppose I was getting all my items from Redux store, does it still make sense to pass my state along and filter through it like this? Or should there be an action to get the single item?

The items properties will not have changed since they were populated, which I guess would be the point where a redux action becomes necessary

I just forked my sandbox with your updates (https://codesandbox.io/s/parallax-lag-fix-attempt-23v5p), and it doesn't seem error prone at all. It solved my issue of not being able to use state for the important values :)

I have a couple of follow up questions, if you don't mind.

I only recently learned that you can pass a function into useState (called lazy initial state) like you did here, but I'm still not sure why I should use it. Could you explain to me how you knew to create dotData using this method?
If I am using a Single Page App, do I really need to return a removeEventListener? Since I can safely assume the component will never be unmounted? It was my understanding that by passing [] as a second argument to useEffect, it would only be run once.
For me, it still seems to be running a little laggy - definitely not as smooth as the library you linked to. I will probably end up using the library because of how smooth it is, but I would love to understand what it is that makes my app not as smooth. I still believe it is because of the loop on line 107 in my forked sandbox is running every scroll event still. Is that even the problem? Is there any way to avoid having to re-render the individual dots, since it is only their container that is having its value updated?

You've already helped tremendously, so thank you for that!

Yes, thank you! I found this video about <code>forwardRef</code> and used it to successfully make the animation: CodeSandbox

However, it feels like dirty code to me, haha. For a couple of reasons:

everything is stuffed into one useEffect
I am forced to use addEventListeners instead of React's onMouseEnter/onMouseLeave
the way I am selecting the two separate sets of letters seems real dirty
it seems like the logic should live in the Logo component

Cleary, this isn't too important so don't waste too much time if you don't have much, but I am curious:

do these compromises happen a lot in React?
should I bother trying to solve those "problems"?
can you think of any way I could solve those "problems"?

Hello u/mattcee233

Here is the backend of this post in Express, the url i see it will expire after 24 hours from now :)

https://codeshare.io/ayLY7e

Thanks,

Cristian

What are /r/learnreactjs' favorite Products & Services?
From 3.5 billion Reddit comments

The most popular Services mentioned in /r/learnreactjs:

React

CodeSandbox

Next.js

freeCodeCamp

Codeshare

Egghead

StackBlitz

Firebase

Netlify

Webpack

Storybook

Auth0

Bootstrap

ESLint

Stripe

The most popular reviews in /r/learnreactjs:

What are /r/learnreactjs' favorite Products & Services? From 3.5 billion Reddit comments